ECMAScript 规范解读 this

前端

2023-11-30 14:31:35

this 的本质

在 ECMAScript 规范中，this 是一个指向当前执行上下文的指针。上下文可以理解为代码运行的环境，它包括当前执行的函数、对象、作用域等信息。this 的值由运行时环境决定，它在函数调用时确定。

this 的作用

this 的作用是提供对当前执行上下文对象的引用。通过 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 的值为 undefined。例如：

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

greet(); // TypeError: Cannot read properties of undefined (reading 'name')

3. 函数作为构造函数调用

当函数作为构造函数调用时，this 的值为新创建的对象。例如：

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

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

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

4. 函数作为回调函数调用

当函数作为回调函数调用时，this 的值取决于回调函数的调用方式。如果回调函数作为对象方法调用，则 this 的值为该对象。如果回调函数作为独立函数调用，则 this 的值为 undefined。例如：

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

button.addEventListener('click', function() {
  console.log(`Hello, my name is ${this.name}`);
});

// 如果存在 person 对象，则 this 的值为 person 对象
const person = {
  name: 'John Doe'
};

button.addEventListener('click', person.greet);

箭头函数中的 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

改变 this 的值

this 的值可以通过以下几种方式改变：

1. call() 方法

call() 方法可以显式地设置 this 的值。例如：

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

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

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

2. apply() 方法

apply() 方法也可以显式地设置 this 的值。apply() 方法与 call() 方法的区别在于，apply() 方法接受一个数组作为参数，而 call() 方法接受多个参数。例如：

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

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

greet.apply(person, ['John Doe']); // Hello, my name is John Doe