深入探究JavaScript中的this及其神奇之处

2023-10-04 23:47:40

JavaScript中的this，是一个非常重要的概念，它代表着函数被调用时执行上下文中的对象。this的指向完全取决于函数在哪里被调用(被调用的时执行上下文)。

在JavaScript中，函数可以被各种方式调用，包括作为对象的方法被调用、作为构造函数被调用、作为普通函数被调用等等。不同方式的调用会导致this指向不同的对象。

对象方法中的this

当一个函数作为对象的方法被调用时，this指向调用该方法的对象。例如：

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

person.greet(); // 输出：Hello, my name is John Doe.

在这个例子中，person.greet()被调用时，this指向person对象，因此console.log()语句输出person对象的name属性。

构造函数中的this

当一个函数作为构造函数被调用时，this指向新创建的对象。例如：

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

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

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

person.greet(); // 输出：Hello, my name is John Doe.

在这个例子中，new Person('John Doe')被调用时，this指向新创建的person对象，因此console.log()语句输出person对象的name属性。

普通函数中的this

当一个函数作为普通函数被调用时，this指向global对象。例如：

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

greet(); // 输出：Hello, my name is undefined.

在这个例子中，greet()被调用时，this指向global对象，因此console.log()语句输出undefined。

箭头函数中的this

箭头函数中的this与普通函数中的this不同，它始终指向定义箭头函数时所在的执行上下文中的对象。例如：

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

person.greet(); // 输出：Hello, my name is John Doe.

在这个例子中，person.greet()被调用时，this指向person对象，因此console.log()语句输出person对象的name属性。

改变this指向

在JavaScript中，可以通过各种方式改变this指向。最常见的方式是使用call()、apply()和bind()方法。例如：

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

// 使用call()方法改变this指向
person.greet.call({ name: 'Jane Doe' }); // 输出：Hello, my name is Jane Doe.

// 使用apply()方法改变this指向
person.greet.apply({ name: 'Jane Doe' }); // 输出：Hello, my name is Jane Doe.

// 使用bind()方法改变this指向
const greetJane = person.greet.bind({ name: 'Jane Doe' });
greetJane(); // 输出：Hello, my name is Jane Doe.