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 相关文章推荐
Dom 结点创建 基础知识
Oct 01 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
php实现可逆加密的方法
2015/08/11 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
Python httplib模块使用实例
2015/04/11 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
土木工程个人自荐信范文
2013/11/30 职场文书
大学生活动策划方案
2014/02/10 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
《去年的树》教学反思
2014/04/11 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
人事文员岗位职责
2015/02/04 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis