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类中定义原型方法的两种实现的区别
Mar 08 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
May 30 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
May 07 Javascript
8个实用的jQuery技巧
Mar 04 Javascript
Node.js文件操作详解
Aug 16 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
python实现简单登陆流程的方法
2018/04/22 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python实现小球弹跳效果
2019/05/10 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
库房保管员岗位职责
2014/04/07 职场文书
产品生产计划书
2014/05/07 职场文书
干部作风建设工作总结
2014/10/29 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS