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 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
提高网站信任度的技巧
Oct 17 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
vue实现简易计算器功能
Jan 20 Vue.js
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中使用Oracle数据库(1)
2006/10/09 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
图片自动更新(说明)
2006/10/02 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
python中去空格函数的用法
2014/08/21 Python
Python循环语句之break与continue的用法
2015/10/14 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python创建xml文件示例
2017/03/22 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
法律专业学生的自我评价
2014/02/07 职场文书
小学清明节活动总结
2014/07/04 职场文书
党员演讲稿
2014/09/04 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
公司酒会主持词
2015/07/02 职场文书
高中运动会广播稿
2015/08/19 职场文书
Java实现带图形界面的聊天程序
2022/06/10 Java/Android