浅谈javascript 函数表达式和函数声明的区别


Posted in Javascript onJanuary 05, 2016

javascript中声明函数的方法有两种:函数声明式和函数表达式.

区别如下:

1).以函数声明的方法定义的函数,函数名是必须的,而函数表达式的函数名是可选的.

2).以函数声明的方法定义的函数,函数可以在函数声明之前调用,而函数表达式的函数只能在声明之后调用.

3).以函数声明的方法定义的函数并不是真正的声明,它们仅仅可以出现在全局中,或者嵌套在其他的函数中,但是它们不能出现在循环,条件或者try/catch/finally中,而

    函数表达式可以在任何地方声明.

下面分别用两种方法定义函数:

//函数声明式
 function greeting(){
    console.log("hello world"); 
 }
 
 
 //函数表达式
 var greeting = function(){
   console.log("hello world"); 
 }

下面一个有趣的javascript:

function f() { console.log('I am outside!'); }
(function () {
 if(false) {
  // 重复声明一次函数f
  function f() { console.log('I am inside!'); }
 }
 f();
}());

会输出什么呢?第一反应应该是"I am outside"吧.  结果在chrome中输出"I am inside",IE11直接报错,firefox低一点的版本输出"I am outside"...

chrome输出的结果很明确的反应了用函数声明式声明的函数的特点--函数在声明之前就可以调用.

IE报错显示缺少对象,因为函数声明在了条件里,违背了函数声明式的原则.

函数表达式的作用域:

如果函数表达式声明的函数有函数名,那么这个函数名就相当于这个函数的一个局部变量,只能在函数内部调用,举个栗子:

var f = function fact(x) { 
        if (x <= 1) 
          return 1;
        else 
          return x*fact(x-1);
        };
        alert(fact());  // Uncaught ReferenceError: fact is not defined

fact()在函数内部可以调用,在函数外部调用就会报错:fact未定义.
fact

我们再来详细看下

函数声明

函数声明示例代码

代码如下:

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 MD4
Dec 20 Javascript
JavaScript中的集合及效率
Jan 08 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 #Javascript
jQuery实现二级下拉菜单效果
Jan 05 #Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 #Javascript
jquery中ajax处理跨域的三大方式
Jan 05 #Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 #Javascript
多个js毫秒倒计时同时进行效果
Jan 05 #Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 #Javascript
You might like
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
angularjs 源码解析之scope
2016/08/22 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
python 重命名轴索引的方法
2018/11/10 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
详解python的四种内置数据结构
2019/03/19 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
python实现按首字母分类查找功能
2019/10/31 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
美国职棒大联盟官方网上商店:MLBShop.com
2017/11/12 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
护士岗位职责
2014/02/16 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
经理岗位职责
2015/02/02 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
Nginx搭建rtmp直播服务器实现代码
2021/03/31 Servers