你不知道的JavaScript--Item7 函数和(命名)函数表达式
1、函数声明与函数表达式
在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符:
函数声明:
function 函数名称 (参数:可选){ 函数体 }
函数表达式:
function 函数名称(可选)(参数:可选){ 函数体 }
所以,可以看出,如果不声明函数名称,它肯定是表达式,可如果声明了函数名称的话,如何判断是函数声明还是函数表达式呢?ECMAScript是通过上下文来区分的,如果function foo(){}是作为赋值表达式的一部分的话,那它就是一个函数表达式,如果function foo(){}被包含在一个函数体内,或者位于程序的最顶部的话,那它就是一个函数声明。
function foo(){} // 声明,因为它是程序的一部分
var bar = function foo(){}; // 表达式,因为它是赋值表达式的一部分
new function bar(){}; // 表达式,因为它是new表达式
(function(){
function bar(){} // 声明,因为它是函数体的一部分
})();
表达式和声明存在着十分微妙的差别,首先,函数声明会在任何表达式被解析和求值之前先被解析和求值,即使你的声明在代码的最后一行,它也会在同作用域内第一个表达式之前被解析/求值,参考如下例子,函数fn是在alert之后声明的,但是在alert执行的时候,fn已经有定义了:
alert(fn());
function fn() {
return 'Hello world!';
}
另外,还有一点需要提醒一下,函数声明在条件语句内虽然可以用,但是没有被标准化,也就是说不同的环境可能有不同的执行结果,所以这样情况下,最好使用函数表达式: 因为在条件语句中没有块级作用域这个概念
// 千万别这样做!
// 因为有的浏览器会返回first的这个function,而有的浏览器返回的却是第二个
if (true) {
function foo() {
return 'first';
}
}
else {
function foo() {
return 'second';
}
}
foo();
// 相反,这样情况,我们要用函数表达式
var foo;
if (true) {
foo = function() {
return 'first';
};
}
else {
foo = function() {
return 'second';
};
}
foo();
函数声明的实际规则如下:
函数声明只能出现在程序或函数体内。从句法上讲,它们 不能出现在Block(块)({ … })中,例如不能出现在 if、while 或 for 语句中。因为 Block(块) 中只能包含Statement语句, 而不能包含函数声明这样的源元素。另一方面,仔细看一看规则也会发现,唯一可能让表达式出现在Block(块)中情形,就是让它作为表达式语句的一部分。但是,规范明确规定了表达式语句不能以关键字function开头。而这实际上就是说,函数表达式同样也不能出现在Statement语句或Block(块)中(因为Block(块)就是由Statement语句构成的)。
2、命名函数表达式
提到命名函数表达式,理所当然,就是它得有名字,前面的例子var bar = function foo(){};就是一个有效的命名函数表达式,但有一点需要记住:这个名字只在新定义的函数作用域内有效,因为规范规定了标示符不能在外围的作用域内有效:
var f = function foo(){
return typeof foo; // function --->foo是在内部作用域内有效
};
// foo在外部用于是不可见的
typeof foo; // "undefined"
f(); // "function"
既然,这么要求,那命名函数表达式到底有啥用啊?为啥要取名?
正如我们开头所说:给它一个名字就是可以让调试过程更方便,因为在调试的时候,如果在调用栈中的每个项都有自己的名字来描述,那么调试过程就太爽了,感受不一样嘛。
tips:这里提出一个小问题:在ES3中,命名函数表达式的作用域对象也继承了 Object.prototype 的属性。这意味着仅仅是给函数表达式命名也会将 Object.prototype 中的所有属性引入到作用域中。结果可能会出人意料。
var constructor = function(){return null;}
var f = function f(){
return construcor();
}
f(); //{in ES3 环境}
该程序看起来会产生 null, 但其实会产生一个新的对象。因为命名函数表达式在其作用域内继承了 Object.prototype.constructor(即 Object 的构造函数)。就像 with 语句一样,这个作用域会因 Object.prototype 的动态改变而受到影响。幸运的是,ES5 修正了这个错误。
这种行为的一个合理的解决办法是创建一个与函数表达式同名的局部变量并赋值为 null。即使在没有错误地提升函数表达式声明的环境中,使用 var 重声明变量能确保仍然会绑定变量 g。设置变量 g 为 null 能确保重复的函数可以被垃圾回收。
var f = function g(){
return 17;
}
var g =null;
3、调试器(调用栈)中的命名函数表达式
刚才说了,命名函数表达式的真正用处是调试,那到底怎么用呢?如果一个函数有名字,那调试器在调试的时候会将它的名字显示在调用的栈上。有些调试器(Firebug)有时候还会为你们函数取名并显示,让他们和那些应用该函数的便利具有相同的角色,可是通常情况下,这些调试器只安装简单的规则来取名,所以说没有太大价值,我们来看一个例子:不用命名函数表达式
function foo(){
return bar();
}
function bar(){
return baz();
}
function baz(){
debugger;
}
foo();
// 这里我们使用了3个带名字的函数声明
// 所以当调试器走到debugger语句的时候,Firebug的调用栈上看起来非常清晰明了
// 因为很明白地显示了名称
baz
bar
foo
expr_test.html()
通过查看调用栈的信息,我们可以很明了地知道foo调用了bar, bar又调用了baz(而foo本身有在expr_test.html文档的全局作用域内被调用),不过,还有一个比较爽地方,就是刚才说的Firebug为匿名表达式取名的功能:
function foo(){
return bar();
}
var bar = function(){
return baz();
}
function baz(){
debugger;
}
foo();
// Call stack
baz
bar() //看到了么?
foo
expr_test.html()
然后,当函数表达式稍微复杂一些的时候,调试器就不那么聪明了,我们只能在调用栈中看到问号:
function foo(){
return bar();
}
var bar = (function(){
if (window.addEventListener) {
return function(){
return baz();
};
}
else if (window.attachEvent) {
return function() {
return baz();
};
}
})();
function baz(){
debugger;
}
foo();
// Call stack
baz
(?)() // 这里可是问号哦,显示为匿名函数(anonymous function)
foo
expr_test.html()
另外,当把函数赋值给多个变量的时候,也会出现令人郁闷的问题:
function foo(){
return baz();
}
var bar = function(){
debugger;
};
var baz = bar;
bar = function() {
alert('spoofed');
};
foo();
// Call stack:
bar()
foo
expr_test.html()
这时候,调用栈显示的是foo调用了bar,但实际上并非如此,之所以有这种问题,是因为baz和另外一个包含alert(‘spoofed’)的函数做了引用交换所导致的。
归根结底,只有给函数表达式取个名字,才是最委托的办法,也就是使用命名函数表达式。我们来使用带名字的表达式来重写上面的例子(注意立即调用的表达式块里返回的2个函数的名字都是bar):
function foo(){
return bar();
}
var bar = (function(){
if (window.addEventListener) {
return function bar(){
return baz();
};
}
else if (window.attachEvent) {
return function bar() {
return baz();
};
}
})();
function baz(){
debugger;
}
foo();
// 又再次看到了清晰的调用栈信息了耶!
baz
bar
foo
expr_test.html()
OK,又学了一招吧?
系列文章导航:
3、你不知道的JavaScript–Item3 隐式强制转换
4、你不知道的JavaScript–Item4 基本类型和基本包装类型(引用类型)
6、你不知道的JavaScript–Item6 var预解析与函数声明提升(hoist )
7、你不知道的JavaScript–Item7 函数和(命名)函数表达式
8、你不知道的JavaScript–Item8 函数,方法,构造函数调用
9、你不知道的JavaScript–Item9 call(),apply(),bind()与回调
10、你不知道的JavaScript–Item10 闭包(closure)
11、你不知道的JavaScript–Item11 arguments对象
12、你不知道的JavaScript–Item12 undefined 与 null
13、你不知道的JavaScript–Item13 理解 prototype, getPrototypeOf 和_ proto_
14、你不知道的JavaScript–Item14 使用prototype的几点注意事项
15、你不知道的JavaScript–Item15 prototype原型和原型链详解
16、你不知道的JavaScript–Item16 for 循环和for…in 循环的那点事儿
17、你不知道的JavaScript–Item17 循环与prototype最后的几点小tips
18、你不知道的JavaScript–Item18 JScript的Bug与内存管理
19、你不知道的JavaScript–Item19 执行上下文(execution context)
20、你不知道的JavaScript–Item20 作用域与作用域链(scope chain)
21、你不知道的JavaScript–Item21 漂移的this
持续更新中……………….
版权声明:本文为小平果原创文章,转载请注明:http://blog.csdn.net/i10630226
你不知道的JavaScript--Item7 函数和(命名)函数表达式的更多相关文章
- 你不知道的JavaScript--Item6 var预解析与函数声明提升(hoist )
1.var 变量预编译 JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对"先声明.后使用"的规则很熟悉, ...
- JavaScript 数组,字符串,函数
数组 创建数组 利用 new 创建数组 var arr = new Array(); console.log(arr); // Array(0) 数组字面量创建 var arr = []; // 空数 ...
- 深入理解javascript:揭秘命名函数表达式
这是一篇转自汤姆大叔的文章:http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 前言 网上还没用发现有人对命名函数表达式进去重复深 ...
- <深入理解JavaScript>学习笔记(2)_揭秘命名函数表达式
写在前面的话 注:本文是拜读了 深入理解JavaScript 之后深有感悟,故做次笔记方便之后查看. 感觉这章的内容有点深奥....略难懂啊. 先坐下笔记,加深一下印象吧. 我主要记一下自己感觉有用的 ...
- 深入理解JavaScript系列(2):揭秘命名函数表达式
前言 网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点. 简单的说,命名函数表 ...
- 深入理解JavaScript系列(2):揭秘命名函数表达式(转)
前言 网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点. 简 单的说,命名函数 ...
- [Effective JavaScript 笔记] 第14条:当心命名函数表达式笨拙的作用域
js函数会根据上下文改变其含义. function double(x){return x*2;} 这是一个函数声明,也可以是一个命名函数表达式(named function expression),取 ...
- JavaScript 函数声明,函数表达式,匿名函数,立即执行函数之区别
函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...
- [转]Javascript中的自执行函数表达式
[转]Javascript中的自执行函数表达式 本文转载自:http://www.ghugo.com/javascript-auto-run-function/ 以下是正文: Posted on 20 ...
- JavaScript 函数声明,函数表达式,匿名函数的区别,深入理解立即执行函数(function(){…})()
function fnName(){xxxx}; // 函数声明:使用function关键字声明一个函数,在指定一个函数名. //例如:(正常,因为 提升 了函数声明,函数调用可以在函数声明之前) f ...
随机推荐
- 介绍一种很棒的wince 如何替换系统声音的方法
Topic:介绍一种很棒的wince 如何替换系统声音的方法(作者:Baiduluckyboy) //------------------------------------------------- ...
- HFile
HFile存储格式 HBase中的所有数据文件都存储在Hadoop HDFS文件系统上,主要包括两种文件类型: 1. HFile, HBase中KeyValue数据的存储格式,HFile是Hadoop ...
- obj-c编程05:类的多态与id动态绑定
说实在的,写这第5篇的时候十分纠结,代码老是不能动态绑定,在编译时就会出错,最后发现这是开了ARC的原因.开了ARC obj-c就不能动态绑定了吗?这个问题还不清楚哦.把ARC关闭后,虽然会有警告,但 ...
- ubuntu下无法编译ruby-2.1.5提示something wrong with CFLAGS -arch x86_64
在Mac OS X10.10下以下语句运行没有问题: ./configure -prefix=/Users/apple/src/ruby_src/ruby2.1.5_installed --with- ...
- Best Time to Buy and Sell Stock i
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...
- 学习MQ(三) 一个实例
学习MQ(三) 一个实例. 现在有两台机器A和B,分别安装了MQ6.0,我要通过MQ进行A和B之间的双向通信. 我打算分两步,第一步:实现A到B的数据传输. 在A上: 1.创建队列管理器 QM_100 ...
- 一个基础的for循环面试题
下面的这段程序主要考察的就是for循环的基础,输出什么?????? [html] view plaincopyprint? public class test { /** * @param args ...
- 【转载】tomcat+nginx+redis实现均衡负载、session共享(一)
http://www.cnblogs.com/zhrxidian/p/5432886.html 在项目运营时,我们都会遇到一个问题,项目需要更新时,我们可能需先暂时关闭下服务器来更新.但这可能会出现一 ...
- 关于mybatis更新数据的问题
前两天用mybatis的时候,发现这样一个问题,日志显示mytatis更新数据已经成功了,但是实际上数据库是没有更新到的,经过一番查找,发现mybatis更新的时候默认返回的是查找到的数据(Rows ...
- 使用LSTM和Softmx来进行意图识别
前言 在前面我们大致介绍了什么是意图识别,把这个问题抽象出来其实是一个分类问题.在结构上面,我们使用LSTM来提取特征,Softmax来进行最后的多分类.由于语料的限制,我们目前仅考虑电台,音乐,问答 ...