终于弄懂this指向了吗？区别箭头函数和标准函数的陷阱

2024-02-23 07:58:33

这次你真的懂this指向了吗？

前言

在说this指向之前，请观察以下代码，并说出它们的输出结果：

// 第 1 组：标准函数
function Person() {
  this.name = 'John';
}

const person1 = new Person();
console.log(person1.name); // John

// 第 2 组：箭头函数
const person2 = {
  name: 'Mary',
  greet: () => {
    console.log(this.name);
  },
};

person2.greet(); // undefined

第一组代码中，标准函数Person的this指向person1对象，因此person1.name的输出结果为'John'。而第二组代码中，箭头函数greet的this指向person2对象，因此this.name的输出结果为'Mary'。

区别箭头函数和标准函数的this指向

为什么箭头函数和标准函数的this指向不同？这与箭头函数的词法作用域有关。箭头函数没有自己的作用域，它继承了外层函数的作用域。因此，箭头函数中的this指向与外层函数中的this指向相同。

而在标准函数中，this指向是由函数的调用方式决定的。当标准函数作为构造函数被调用时，this指向新创建的对象。当标准函数作为普通函数被调用时，this指向global对象(在浏览器中)或module.exports对象(在Node.js中)。

this指向的本质

this指向的本质是执行上下文。执行上下文是一个概念，它了代码执行的环境。执行上下文包含了当前执行的函数、变量和对象。this指向就是执行上下文中当前执行的函数的this对象。

如何理解this指向

理解this指向的关键是理解执行上下文。当代码执行时，会创建一个执行上下文，执行上下文包含了当前执行的函数、变量和对象。this指向就是执行上下文中当前执行的函数的this对象。

常见的this指向陷阱

在使用this指向时，经常会遇到一些陷阱。常见的陷阱包括：

箭头函数中的this指向： 箭头函数没有自己的作用域，因此箭头函数中的this指向与外层函数中的this指向相同。这可能会导致意外的结果。
标准函数中的this指向： 标准函数的this指向是由函数的调用方式决定的。当标准函数作为构造函数被调用时，this指向新创建的对象。当标准函数作为普通函数被调用时，this指向global对象(在浏览器中)或module.exports对象(在Node.js中)。这可能会导致意外的结果。
闭包中的this指向： 闭包是内部函数可以访问外部函数的作用域的函数。在闭包中，内部函数的this指向与外部函数的this指向相同。这可能会导致意外的结果。

避免this指向陷阱的方法

为了避免this指向陷阱，可以采用以下方法：

使用箭头函数时，要谨慎考虑this指向。 如果箭头函数中需要使用this指向，则需要确保外层函数的this指向是正确的。
使用标准函数时，要明确函数的调用方式。 如果标准函数作为构造函数被调用，则this指向新创建的对象。如果标准函数作为普通函数被调用，则this指向global对象(在浏览器中)或module.exports对象(在Node.js中)。
在闭包中使用this指向时，要谨慎考虑this指向。 如果闭包中需要使用this指向，则需要确保内部函数的this指向与外部函数的this指向相同。