JavaScript 全面解析：5 种 this 绑定的科学探究

2024-01-08 08:02:13

JavaScript 作为一门功能强大的编程语言，在前端开发中占据着重要地位。为了更深入地理解 JavaScript 的运行机制，掌握 this 的绑定规则至关重要。本文将全面解析 5 种 this 绑定的类型，通过理论讲解、代码示例和实际案例，帮助您透彻理解 this 的奥妙，在项目开发中灵活运用，成为 JavaScript 编程高手。

1. 独立函数调用：this 指向全局对象

function greet() {
  console.log(this); // this === window
}

greet();

在独立函数调用中，this 指向全局对象，在浏览器环境中，全局对象就是 window 对象。当我们在控制台中调用 greet() 函数时，this 将输出 window 对象。

2. 方法调用：this 指向所属对象

const person = {
  name: 'John',
  greet: function() {
    console.log(this.name); // this === person
  }
};

person.greet(); // "John"

在方法调用中，this 指向所属对象。当我们调用 person.greet() 时，this 将指向 person 对象，因此 console.log(this.name) 输出 "John"。

3. 构造函数调用：this 指向新创建的对象

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log(this.name); // this === new Person('John')
  };
}

const john = new Person('John');
john.greet(); // "John"

在构造函数调用中，this 指向新创建的对象。当我们使用 new 调用 Person() 构造函数时，this 将指向新创建的 Person 对象。因此，console.log(this.name) 输出 "John"。

4. call/apply/bind：显式绑定 this

const person = {
  name: 'John'
};

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

greet.call(person); // "John"
greet.apply(person); // "John"
const boundGreet = greet.bind(person);
boundGreet(); // "John"

call、apply 和 bind 方法可以显式地绑定 this。call 和 apply 方法接收两个参数：第一个参数是要绑定的对象，第二个参数是参数列表。bind 方法接收一个参数：要绑定的对象。这三个方法都会返回一个新的函数，该函数的 this 指向已绑定对象。

5. 箭头函数：this 继承父作用域

const person = {
  name: 'John',
  greet: () => {
    console.log(this.name); // this === undefined
  }
};

person.greet(); // undefined

箭头函数没有自己的 this，它会继承父作用域的 this。在上面的示例中，greet() 函数是一个箭头函数，因此它的 this 指向父作用域的 this，即 person 对象。然而，由于 person 对象没有 name 属性，因此 console.log(this.name) 输出 undefined。