JavaScript 匿名函数 this

在 JavaScript 中,函数是一等公民,这意味着函数可以像其他值一样被赋值给变量、作为参数传递给其他函数或从其他函数返回。匿名函数是一种没有函数名的函数,可以直接在代码中定义和使用。

在匿名函数中,this 是一个关键字,表示当前执行上下文的对象。它在不同的情况下可能引用不同的对象,这取决于函数是如何调用的。

全局上下文中的匿名函数

当匿名函数在全局上下文中被调用时,this 引用全局对象 window

(function() {
  console.log(this); // 输出:Window
})();

上面的代码定义了一个立即执行的匿名函数,并在函数体中输出 this 的值。由于该函数是在全局上下文中被调用的,因此 this 引用全局对象 window

对象方法中的匿名函数

当匿名函数作为对象的方法被调用时,this 引用该对象。

const obj = {
  name: "Alice",
  sayHello: function() {
    console.log("Hello, " + this.name);
  }
};

obj.sayHello(); // 输出:Hello, Alice

在上面的例子中,obj 是一个对象,它有一个属性 name 和一个方法 sayHellosayHello 方法是一个匿名函数,当它被调用时,函数体中的 this 引用 obj 对象。

构造函数中的匿名函数

当匿名函数用作构造函数创建对象时,this 引用新创建的对象。

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello, " + this.name);
};

const alice = new Person("Alice");
alice.sayHello(); // 输出:Hello, Alice

在上面的例子中,Person 是一个构造函数,它有一个参数 name,并将其赋值给新创建的对象的 name 属性。构造函数原型上的 sayHello 方法是一个匿名函数,当使用 new 关键字创建 Person 的实例时,this 引用新创建的对象。

函数调用中的匿名函数

当匿名函数作为普通函数被调用时,this 引用全局对象 window(在非严格模式下)或 undefined(在严格模式下)。

(function() {
  console.log(this);
})();

上面的代码中,匿名函数被直接调用,而不是作为对象方法或构造函数。因此,this 引用全局对象 window

改变匿名函数中的 this

有时候,我们希望在匿名函数中显式指定 this 的值,而不是使用默认的上下文对象。JavaScript 提供了几种方法来改变 this 的值。

使用 bind 方法

bind 方法创建一个新的函数,将指定的对象绑定为函数体中的 this 对象。

const obj = {
  name: "Alice"
};

function sayHello() {
  console.log("Hello, " + this.name);
}

const hello = sayHello.bind(obj);
hello(); // 输出:Hello, Alice

上面的代码中,bind 方法通过传递 obj 对象作为参数,将 sayHello 函数绑定到 obj 对象。当调用绑定后的函数 hello 时,this 引用 obj 对象。

使用箭头函数

箭头函数是 ES6 中的新语法,它没有自己的 this 值,而是继承外部作用域中的 this 值。

const obj = {
  name: "Alice",
  sayHello: function() {
    const hello = () => {
      console.log("Hello, " + this.name);
    };

    hello();
  }
};

obj.sayHello(); // 输出:Hello, Alice

在上面的例子中,sayHello 方法中定义了一个箭头函数 hello。箭头函数没有自己的 this 值,所以它继