this揭秘：浅显剖析JavaScript之this

2023-12-31 10:06:57

this机制的本质

在JavaScript中，this代表的是当前执行上下文的执行对象。可以想象，执行上下文就好像是一个容器，它包含了当前执行的代码、变量和对象。而this就是指向这个容器中当前执行对象的指针。

当你调用一个函数时，这个函数的执行上下文就会被创建，而this就会被赋值为这个函数的执行对象。如果函数没有明确指定执行对象，那么this就默认指向global对象，即window对象。

理解this的应用场景

this的应用场景非常广泛。以下是一些典型的例子：

作为对象方法的调用者 ：当你在对象上调用一个方法时，this就会指向这个对象。例如，以下代码中，this指向的是person对象：

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

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

作为构造函数的实例 ：当你在构造函数中创建一个新对象时，this就会指向这个新对象。例如，以下代码中，this指向的是new Person对象：

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

const john = new Person('John');

console.log(john.name); // 输出：John

作为事件处理器的上下文对象 ：当你在HTML元素上注册一个事件处理器时，this就会指向这个元素。例如，以下代码中，this指向的是button元素：

const button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log(this.innerHTML); // 输出：Click me!
});

巧妙运用this

除了这些常见的用法之外，this还有很多巧妙的用法。例如，你可以通过改变this的值来改变函数的行为。

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

const anotherPerson = {
  name: 'Jane'
};

person.greet.call(anotherPerson); // 输出：Hello, my name is Jane!

在这种情况下，我们使用call方法来改变greet函数的执行对象，从而改变了函数的行为。