this指针在 JavaScript 中的五个绑定规则

2023-10-08 05:12:30

this 在 JavaScript 中的妙用

在 JavaScript 的奇妙世界中，this 扮演着至关重要的角色，它如同一个指向当前对象的神奇指针，赋予了我们操控对象属性和方法的能力。本文将深入探讨 this 的五个绑定规则，并通过生动的示例和实际应用，帮助你掌握它的精髓。

this 的五个绑定规则

1. 默认绑定： 当一个函数作为某个对象的方法被调用时，this 就默认绑定到了该对象 。例如：

const person = {
  name: "John Doe",
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // "Hello, my name is John Doe"

2. 隐式绑定： 即便一个函数没有明确定义为对象的方法，当它作为该对象的方法被调用时，this 也会隐式绑定到该对象 。例如：

const person = {
  name: "John Doe"
};

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

person.greet = greet;

person.greet(); // "Hello, my name is John Doe"

3. 显式绑定： 使用 bind() 方法可以显式将 this 绑定到特定对象 。例如：

const person = {
  name: "John Doe"
};

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const boundGreet = greet.bind(person);

boundGreet(); // "Hello, my name is John Doe"

4. new 绑定： 当一个函数使用 new 关键字被调用时，this 就绑定到了新创建的对象 。例如：

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

const person = new Person("John Doe");

console.log(person.name); // "John Doe"

5. 箭头函数： 箭头函数没有自己的 this 绑定，它们继承自其外层函数 的 this 绑定。例如：

const person = {
  name: "John Doe",
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // "Hello, my name is John Doe"

常见 JavaScript 指向问题

1. 意外的 this 绑定： 在 JavaScript 中，意外的 this 绑定是一个常见的问题。例如：

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = {
  name: "John Doe"
};

greet(); // "Hello, my name is undefined"

在这个例子中，greet() 函数没有作为 person 对象的方法被调用，因此 this 绑定到了全局对象 ，而全局对象没有 name 属性，所以 this.name 为 undefined 。

2. 箭头函数的 this 绑定： 箭头函数没有自己的 this 绑定，这可能会导致意外的行为。例如：

const person = {
  name: "John Doe",
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};

const boundGreet = person.greet.bind(this);

boundGreet(); // "Hello, my name is undefined"

在这个例子中，greet() 箭头函数没有自己的 this 绑定，它继承自其外层函数 person.greet() 的 this 绑定，但 person.greet() 没有作为 person 对象的方法被调用，因此 this 绑定到了全局对象 ，而全局对象没有 name 属性，所以 this.name 为 undefined 。