javascript函数声明和函数表达式区别分析


Posted in Javascript onDecember 02, 2014

平时再用js写函数的时候,一般都是以惯例 function fn () {} 的方式来声明一个函数,在阅读一些优秀插件的时候又不免见到 var fn = function () {} 这种函数的创建,究竟他们用起来有什么区别呢,今天就本着打破砂锅问到底的精神,好好来说说这个让人神魂颠倒的--函数声明。

函数声明

函数声明示例代码

function fn () {

    console.log('fn 函数执行..');

    // code..

}

这样我们就声明了一个名称为fn的函数,这里出个思考,你认为在这个函数的上面来调用他的话会执行吗?还是会报错?

fn(); // 在之前调用我们声明的fn函数 function fn () { console.log('fn 函数执行..'); // code..}

控制台输出结果:

javascript函数声明和函数表达式区别分析

是的,此时fn函数是可以被调用到的,这里来总结下原因。

总结:

1:此时fn函数是变量的结果,默认存储在全局上下文的变量中(可用 window.函数名 来验证)

2:此方式为函数声明,在进入全局上下文阶段创建,代码执行阶段,它们已经可用。ps:javaScript在每次进入方法时都会先初始化上下文环境(由全局 → 局部)

3:它可以影响变量对象(仅影响存储在上下文中的变量)

函数表达式

函数表达式示例代码

var fn = function () {

    console.log('fn 函数【表达式】声明执行..')

    // code..

}

这样我们就声明了一个匿名函数,并且把它的引用指向了变量fn

再次在该表达式声明的函数上下方各调用一次,来看控制台的输出结果。

// 为了清晰的看到控制台的输出,我们在各自调用前后做个标记,增加可读性。

console.log('之前调用开始..');

fn();

console.log('之前调用结束..');

var fn = function () {

    console.log('fn 函数【表达式】声明执行..')

    // code..

}

console.log('之后调用开始..');

fn();

console.log('之后调用开始..');

控制台打印结果:

javascript函数声明和函数表达式区别分析

可以看到代码在执行到第一次调用fn()函数的时候,提示:fn is not a function (fn 不是一个方法),遇到错误而终止运行。

这说明在第一次调用fn()的同时,var fn 变量没有做为全局对象的一个属性而存在,且 fn 引用的匿名函数上下文也没有被初始化,所以在他之前调用失败。

// 现在先把之前的调用逻辑给注释掉,再看下控制台的输出

//    console.log('之前调用开始..');

//    fn();

//    console.log('之前调用结束..');

    var fn = function () {

        console.log('fn 函数【表达式】声明执行..')

        // code..

    }

    console.log('之后调用开始..');

    fn(); // 在表达式之后调用

    console.log('之后调用开始..');

控制台打印结果:

javascript函数声明和函数表达式区别分析

可以看出,在该表达式函数之后来调用是可以的,来总结下那是为什么呢?

总结:

1:首先变量本身不做为一个函数存在,而是一个匿名函数的引用(值类型的不属于引用)

2:在代码执行阶段,初始化全局上下文时,它没有被做为全局的一个属性而存在,所以不会造成变量对象的污染

3:该类型的声明一般在插件的开发比较常见,也可做为闭包中回调函数的调用

所以 function fn () {} 并不等于 var fn = function () {} ,他们有本质上的区别。

以上就是本文的全部内容了,思路很清晰,对比也很明确,是篇非常不错的文章,小伙伴们一定要仔细研读下

Javascript 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jquery与prototype框架的详细对比
Nov 21 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
js enter键激发事件实例代码
Aug 17 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
javascript常用方法汇总
Dec 02 #Javascript
js时间日期格式化封装函数
Dec 02 #Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 #Javascript
JavaScript基础知识学习笔记
Dec 02 #Javascript
Js 正则表达式知识汇总
Dec 02 #Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 #Javascript
bootstrap改变按钮加载状态
Dec 01 #Javascript
You might like
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP实现微信提现功能
2018/09/30 PHP
img标签中onerror用法
2009/08/13 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python使用sorted排序的方法小结
2017/07/28 Python
python处理数据,存进hive表的方法
2018/07/04 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
Django模板标签{% for %}循环,获取制定条数据实例
2020/05/14 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
中软Java笔试题
2012/11/11 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
大学生就业策划书范文
2014/04/04 职场文书
企业安全生产标语
2014/06/06 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
毕业横幅标语
2014/10/08 职场文书
2014年电工工作总结
2014/11/20 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
机关保密工作承诺书
2015/05/04 职场文书
工程款申请报告
2015/05/15 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技