浅谈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 相关文章推荐
关于js类的定义
Jun 28 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 Javascript
JavaScript实现前端倒计时效果
Feb 09 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之第九天
2006/10/09 PHP
收藏的PHP常用函数 推荐收藏保存
2010/02/21 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
解析php中的escape函数
2013/06/29 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
python实现简单的计时器功能函数
2015/03/14 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
敬老模范事迹
2014/05/21 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
成本会计实训报告
2014/11/05 职场文书
学籍证明模板
2014/11/21 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS