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 15 Javascript
JQuery live函数
Dec 24 Javascript
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
JavaScript采用递归算法计算阶乘实例
Aug 04 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 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
体育彩票排列三组选三算法分享
2014/03/07 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
python regex库实例用法总结
2021/01/03 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
盛大笔试题
2016/11/05 面试题
高级技校毕业生自荐信
2013/11/18 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
运动会100米加油稿
2015/07/21 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
关于Javascript闭包与应用的详解
2021/04/22 Javascript
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技