js之匿名函数详解
1. 函数的声明与函数表达式区别
1.1 函数的声明
如下方法 add 就是函数声明的代码结构：
function add(x,y){
alert(x+y)
}
add(1,2) //弹窗显示：3
关于函数声明，它最重要的一个特征就是函数声明提升，意思是执行代码之前先读取函数声明。不管函数声明写在前面，还是后面，都会出现函数声明的提升。
如下代码可以正确执行：
add(1,2); //弹窗显示：3
function add(x,y){
alert(x+y)
}
1.2 函数表达式
函数表达式中有几种不同的语法。最常见和最具代表性的一种如下所示：
var add = function(x,y){
alert(x+y)
}
add(1,2) //弹窗显示：3
这种形式看起来好像是常规的变量赋值语句。但是函数表达式和函数声明的区别在于，函数表达式在使用前必须先赋值。所以这段代码执行的时候就会出错：
add(1,2) //无弹窗，报错： add is not a function
var add = function(x,y){
alert(x+y)
}
造成这种现象是因为解析器在向执行环境中加载数据时，解析器会率先读取函数声明，并使其在执行任何代码前可用；至于函数表达式，则必须等到解析器执行到它的所在的的代码行，才会真正的被解析。函数表达式中，创建的函数叫做匿名函数，因为function关键字后面没有标识符。
1.3 区别
JS中常见的两种函数声明(statement)方式有这两种:
复制代码
// 函数表达式(function expression)
var h = function() {
// h
}
// 函数声明(function declaration)
function h() {
// h
}
先说两者的显著区别:
-
第一种声明方式也就是var声明方式, 函数只有在var语句声明之后才能被调用
-
第二种生命方式也就是function声明方式, 函数可以在function声明之前被调用
这是因为,
-
对第一种情况, 函数表达式是在函数运行阶段才赋值给变量h
-
对第二种情况, 函数表达式是在代码运行阶段之前, 也就是代码解析阶段才赋值给标识符h
为了证明这种说法可以看下面两个例子:
对应第一种情况,
var h = function () {
// h
}
console.log(h)
h = function () {
// h1
}
console的结果是
ƒ h() {
// h
}
因为赋值发生在代码运行阶段, 代码自上而下运行console.log(h)所在位置只能获取它之前的赋值
对应第二种情况,
function h() {
// h
}
console.log(h)
function h() {
// h1
}
console的结果是
ƒ h() {
// h1
}
因为赋值发生在代码解析阶段, 代码运行到console.log(h)时解析早已完成, 而解析的结果是后面那个函数h, 故会打印此结果
深入:
JS声明函数的三种方式:
- 1.函数表达式: 即上面第一种方式, 这种方法使用function操作符创建函数, 表达式可以存储在变量或者对象属性里. 函数表达式往往被称为
匿名函数, 因为它没有名字. 证明这一点你可以 console.log(h.name); 可以看到打印为空 “”
- 2.函数声明: 即上面第二种方式, 会声明一个具名函数, 且函数能在其所在作用域的任意位置被调用, 其创建的函数为具名函数, 证明这一
点你可以 console.log(h.name); 可以看到打印为 “h”. 可在后面的代码中将此函数通过函数名赋值给变量或者对象属性
- 3.Function()构造器: 不推荐这种用法, 容易出问题
2. 匿名函数的调用方式
匿名函数，就是没有名字。
2.1 调用方式
还有一种匿名函数的调用方式是：使用()将匿名函数括起来，然后后面再加一对小括号（包含参数列表）。我们再看一下以下一个例子：
//表达式的调用
/*
const add = function (x, y){
return x + y;
}
const sum = add(1, 2)
console.log(sum)
*/
//匿名函数式调用
//方式1
//这种方式尽量少用
const sum1 = function(x, y){
return x + y;
}(1, 2);
//方式2
//推荐
const sum = (function(x, y){
return x + y;
})(1, 2);
console.log(sum1);
//方式3
(new Function("x","y","return x+y"))(1,2)
在javascript中，是没有块级作用域这种说法的，以上代码的这种方式就是模仿了块级作用域(通常成为私有作用域)，语法如下所示：
(function(){
//这里是块级作用域
})();
以上代码定义并立即调用了一个匿名函数。经函数声明包含在一对圆括号中，表示它实际上是一个函数表达式。而紧随其后的另一对圆括号会立即调用这个函数。然而要注意一点：
function(){
}();
上面的代码是错误的，因为Javascript将function关键字当作一个函数声明的开始，而函数声明后面不能加圆括号，如果你不显示告诉编译器，它会默认生成一个缺少名字的function，并且抛出一个语法错误，因为function声明需要一个名字。有趣的是，即便你为上面那个错误的代码加上一个名字，他也会提示语法错误，只不过和上面的原因不一样。提示为：Uncaught SyntaxError: Unexpected token ( 。
在一个表达式后面加上括号()，该表达式会立即执行，但是在一个语句后面加上括号()，是完全不一样的意思，只是分组操作符。
function foo(){
alert('测试是否弹窗')
}()
// SyntaxError: Unexpected token )
// 报错因为分组操作符需要包含表达式
function foo(){
alert('测试是否弹窗')
}(1)
// (1) => 等价于 1
// 相当于foo方法后面个跟了一个无关系的表达式子:(1)
所以上面代码要是想要得到想要的弹窗提示，就必须要实现赋值，如
a = function(){
alert(‘测试是否弹窗’)
}()
// 弹窗提示成功
“a=” 这个片段告诉了编译器这个是一个函数表达式，而不是函数的声明。因为函数表达式后面可以跟圆括号。
因此下面两段代码是等价的
var aa = function(x){
alert(x)
}(5) //弹窗显示：5
(function(x){
alert(x)
})(5) //弹窗显示：5
3.自执行匿名函数
自执行函数，即定义和调用合为一体。我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。
下面我们来看下一些比较有趣的自执行函数表达方式:
// 下面2个括弧()都会立即执行
(function () { /* code */ } ()) // 推荐使用这个
(function () { /* code */ })() // 但是这个也是可以用的
// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的
// 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了
var i = function () { return 10; } ();
true && function () { /* code */ } ();
0, function () { /* code */ } ();
// 如果你不在意返回值，或者不怕难以阅读
// 你甚至可以在function前面加一元操作符号
!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } ();
// 还有一个情况，使用new关键字,也可以用，但我不确定它的效率
// http://twitter.com/kuvos/status/18209252090847232
new function () { /* code */ }
new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()
参考
- https://juejin.im/post/5af10fdaf265da0b74521b7a
- https://www.cnblogs.com/skura23/p/7520593.html