浅谈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 相关文章推荐
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
基于jquery的表头固定的若干方法
Jan 27 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
浅谈vue权限管理实现及流程
Apr 23 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 图片文件上传实现代码
2010/12/29 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
文本加密解密
2006/06/23 Javascript
javascript String 对象
2008/04/25 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
2012/09/19 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
python实现linux下使用xcopy的方法
2015/06/28 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
前台领班岗位职责
2013/12/04 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
环保倡议书400字
2014/05/15 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
欢迎领导标语
2014/06/27 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
Oracle创建只读账号的详细步骤
2021/06/07 Oracle
使用python绘制横竖条形图
2022/04/21 Python