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 相关文章推荐
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
JS出现404错误原理及解决方案
Jul 01 Javascript
梳理一下vue中的生命周期
Dec 30 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函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php文件缓存类汇总
2014/11/21 PHP
php常用文件操作函数汇总
2014/11/22 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
PHP序列化操作方法分析
2016/09/28 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
Jquery 获取checkbox的checked问题
2011/11/16 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
Python实现的多线程端口扫描工具分享
2015/01/21 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Django添加sitemap的方法示例
2018/08/06 Python
Django 大文件下载实现过程解析
2019/08/01 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
django rest framework 过滤时间操作
2020/07/12 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
国外软件测试工程师面试题
2016/12/09 面试题
最新英语专业学生求职信范文
2013/09/21 职场文书
学生自我鉴定
2013/12/18 职场文书
大一自我鉴定范文
2013/12/27 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
2015年重阳节主持词
2015/07/04 职场文书
礼貌问候语大全
2015/11/10 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python