解析 JavaScript 中的 this 关键字与箭头函数

Why This?

在 JavaScript 中，this 关键字是一个十分重要且常用的概念，它的正确理解与使用可以大大简化代码的书写，使得代码更加清晰和易于维护。在本文中，我们将深入探讨 this 关键字的各种使用场景和规则，并介绍箭头函数对于 this 的独特处理。

This 关键字

1. 默认绑定规则

this 的默认绑定规则是指，当一个函数独立调用时，this 默认指向全局对象，通常是 window 对象（在浏览器环境下）。

scss 复制代码

function sayHello() {
  console.log(this); // 在浏览器环境下，指向 window
}

sayHello();

这种情况下，this 并不是根据函数在代码中被声明的位置来确定的，而是取决于函数的调用方式。其中原理就一句话：函数在哪个词法作用域中生效，this就指向哪里。但是函数不存在词法作用域，它只能往上找，一直找到了window。

2. 隐式绑定规则

当一个函数被对象所拥有，且在调用时，函数的 this 指向该对象。这就是隐式绑定规则。

javascript 复制代码

const person = {
  name: 'John',
  sayHello: function() {
    console.log(this.name); // this 指向 person 对象
  }
};

person.sayHello();

在这个例子中，sayHello 函数被 person 对象拥有，因此在调用时 this 指向 person。

3. 隐式丢失

隐式丢失是指当函数被多个对象链式调用时，this 指向引用函数的那个对象而不是最初的对象。

ini 复制代码

const obj1 = {
  value: 'Hello',
  printValue: function() {
    console.log(this.value);
  }
};

const obj2 = {
  value: 'World'
};

obj2.printValue = obj1.printValue; // 隐式丢失
obj2.printValue(); // this 指向 obj2，输出 'World'

在这个例子中，obj2.printValue 虽然最初是从 obj1 复制而来，但在调用时 this 指向了 obj2。

4. 显式绑定

通过 call、apply、bind 这些方法，可以显式地指定函数执行时的 this 指向。

javascript 复制代码

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

const person = { name: 'John' };

greet.call(person); // 使用 call 显式绑定 this

这里的 call 方法将 greet 函数中的 this 指向了 person 对象。

5. new 绑定

当使用 new 关键字调用构造函数时，this 指向新创建的实例对象。

ini 复制代码

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

const john = new Person('John');
console.log(john.name); // 输出 'John'

在这个例子中，this 指向了通过 new 创建的 Person 的实例对象 john。

箭头函数

与普通函数不同，箭头函数没有自己的 this。它会继承外层作用域中的 this 值，这也就是所谓的"词法作用域"。