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 读取xml,写入xml 实现代码
Jul 10 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 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中在PDO中使用事务(Transaction)
2011/05/14 PHP
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
PHP最常用的正则表达式
2017/02/13 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
2013/04/24 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
基于javascript实现贪吃蛇小游戏
2019/11/25 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
连接pandas以及数组转pandas的方法
2019/06/28 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
C语言50道问题
2014/10/23 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
技校教师求职简历的自我评价
2013/10/20 职场文书
银行存款证明样本
2014/01/17 职场文书
大学社团活动总结
2014/04/26 职场文书
婚前保证书
2014/04/29 职场文书
销售求职信范文
2014/05/26 职场文书
房产授权委托书范本
2014/09/22 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB