JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同


Posted in Javascript onNovember 15, 2015

函数表达式和函数声明

在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符:

函数声明:

function 函数名称 (参数:可选){ 函数体 }

函数表达式:

function 函数名称(可选)(参数:可选){ 函数体 }

所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函数声明还是函数表达式呢?ECMAScript是通过上下文来区分的,如果function foo(){}是作为赋值表达式的一部分的话,那它就是一个函数表达式,如果function foo(){}被包含在一个函数体内,或者位于程序的最顶部的话,那它就是一个函数声明。

function foo(){} // 声明,因为它是程序的一部分
 var bar = function foo(){}; // 表达式,因为它是赋值表达式的一部分
 new function bar(){}; // 表达式,因为它是new表达式
 (function(){
  function bar(){} // 声明,因为它是函数体的一部分
 })();

还有一种函数表达式不太常见,就是被括号括住的(function foo(){}),他是表达式的原因是因为括号 ()是一个分组操作符,它的内部只能包含表达式,我们来看几个例子:

  function foo(){} // 函数声明
  (function foo(){}); // 函数表达式:包含在分组操作符内

命名函数表达式

提到命名函数表达式,理所当然,就是它得有名字,前面的例子var bar = function foo(){};就是一个有效的命名函数表达式,但有一点需要记住:这个名字只在新定义的函数作用域内有效,因为规范规定了标示符不能在外围的作用域内有效:

var f = function foo(){
  return typeof foo; // foo是在内部作用域内有效
 };
 // foo在外部用于是不可见的
 console.log(typeof foo); // "undefined"
 console.log(f()); // "function"
var f = function foo(){
return foo; // foo是在内部作用域内有效
};
// foo在外部用于是不可见的
console.log(typeof foo); // "undefined"
console.log( f()==f); // "function"
console.log(f.name);//foo

既然,这么要求,那命名函数表达式到底有啥用啊?为啥要取名?

正如我们开头所说:给它一个名字就是可以让调试过程更方便,因为在调试的时候,如果在调用栈中的每个项都有自己的名字来描述,那么调试过程就太爽了,感受不一样嘛。

ps:JS中函数声明与函数表达式的不同

Js中的函数声明是指下面的形式:

function functionName(){ 
}

这样的方式来声明一个函数,而函数表达式则是类似表达式那样来声明一个函数,如:

var functionName = function(){ 
}

可能很多朋友在看到这两一种写法时会产生疑惑,这两种写法差不多,在应用中貌似也都是可行的,那他们有什么差别呢?

 事实上,js的解析器对函数声明与函数表达式并不是一视同仁地对待的。对于函数声明,js解析器会优先读取,确保在所有代码执行之前声明已经被解析,而函数表达式,如同定义其它基本类型的变量一样,只在执行到某一句时也会对其进行解析,所以在实际中,它们还是会有差异的,具体表现在,当使用函数声明的形式来定义函数时,可将调用语句写在函数声明之前,而后者,这样做的话会报错。

Javascript 相关文章推荐
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
javascript的push使用指南
Dec 05 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
Node.js编程中客户端Session的使用详解
Jun 23 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
深入浅析vue中cross-env的使用
Sep 12 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
浅谈JavaScript中的对象及Promise对象的实现
Nov 15 #Javascript
javascript 中的 delete及delete运算符
Nov 15 #Javascript
详解JavaScript函数对象
Nov 15 #Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 #Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 #Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 #Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 #Javascript
You might like
php 全局变量范围分析
2009/08/07 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
PHP7内核之Reference详解
2019/03/14 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
Python中的字典与成员运算符初步探究
2015/10/13 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
Python断言assert的用法代码解析
2018/02/03 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
this关键字的含义
2015/04/08 面试题
基层党支部公开承诺书
2014/05/29 职场文书
技校毕业生自荐信
2014/06/03 职场文书
2016新年致辞
2015/08/01 职场文书
学习心得体会
2019/06/20 职场文书
五年级作文之想象作文
2019/10/30 职场文书
导游词之日月潭
2019/11/05 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
Python中的 Set 与 dict
2022/03/13 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python