js的匿名函数_匿名函数

全栈程序员站长

发布于 2022-11-09 17:23:29

3.9K0

发布于 2022-11-09 17:23:29

文章被收录于专栏：全栈程序员必看

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 */ } () // 如果需要传递参数，只需要加上括弧()