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 相关文章推荐
instanceof和typeof运算符的区别详解
Jan 06 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
js实现全选和全不选
Jul 28 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 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 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
jQuery MD5加密实现代码
2010/03/15 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
JS精确判断数据类型代码实例
2019/12/18 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
python中对数据进行各种排序的方法
2019/07/02 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
电大学习个人自我评价范文
2013/10/04 职场文书
办公室前台岗位职责
2014/01/04 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
网络技术专业求职信
2014/05/02 职场文书
法人委托书的范本格式
2014/09/11 职场文书
大学教师个人总结
2015/02/10 职场文书
Pandas自定义选项option设置
2021/07/25 Python
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python