解释下JavaScript中this是如何工作的？

八股文_JavaScript面试题 0 105

参考回答：

在 JavaScript 中，this 是一个特殊的关键字，它指向当前函数执行的上下文（即当前函数被调用时的对象）。this 的值会根据函数的调用方式而有所不同：

普通函数调用：this 指向全局对象（在浏览器中是 window，在严格模式下是 undefined）。
对象方法调用：this 指向调用该方法的对象。
构造函数调用：this 指向新创建的实例对象。
箭头函数：this 会继承自外层的 this，即箭头函数没有自己的 this，它的 this 来自定义它的上下文。

详细讲解与拓展：

1. 普通函数调用：

在普通函数中，this 默认指向全局对象。对于浏览器来说，this 指向 window 对象，但在严格模式下，this 为 undefined。

function showThis() {
  console.log(this);
}
showThis(); // 在浏览器中，输出 window（非严格模式下）

在严格模式下：

"use strict";
function showThis() {
  console.log(this);
}
showThis(); // 输出 undefined

2. 对象方法调用：

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

const person = {
  name: 'Alice',
  greet: function() {
    console.log(this.name);  // this 指向 person 对象
  }
};
person.greet(); // 输出 'Alice'

3. 构造函数调用：

当函数作为构造函数使用时，this 指向新创建的实例对象。

function Person(name) {
  this.name = name;
}
const person = new Person('Bob');
console.log(person.name); // 输出 'Bob'

这里，new 关键字创建了一个新的对象，并将 this 绑定到该对象。

4. 箭头函数：

箭头函数与普通函数的最大区别是它没有自己的 this，它会从外部作用域继承 this。也就是说，箭头函数中的 this 是在定义时确定的，而不是调用时确定的。

const obj = {
  name: 'Charlie',
  greet: function() {
    setTimeout(() => {
      console.log(this.name);  // 箭头函数中的 this 继承了外层 greet 方法中的 this
    }, 1000);
  }
};
obj.greet(); // 输出 'Charlie'

在上述代码中，箭头函数的 this 来自 greet 方法的 this，即 obj 对象。

5. bind、call 和 apply：

bind、call 和 apply 是三个可以显式改变 this 指向的方法。
– call：调用一个函数并显式指定 this 的值。call 会立即执行函数。

“`javascript
function greet() {
console.log(`Hello, ${this.name}`);
}
const person = { name: ‘David’ };
greet.call(person); // 输出 ‘Hello, David’
“`
– **`apply`**：和 `call` 类似，区别在于传递参数时，`apply` 使用数组。
“`javascript
greet.apply(person); // 输出 ‘Hello, David’
“`
– **`bind`**：`bind` 返回一个新的函数，`this` 被永久绑定到指定对象。它不会立即执行函数。
“`javascript
const boundGreet = greet.bind(person);
boundGreet(); // 输出 ‘Hello, David’
“`

6. 总结：

this 在普通函数调用中指向全局对象，在对象方法调用中指向对象，在构造函数调用中指向新实例，在箭头函数中继承自外层上下文。
通过 bind、call 和 apply 可以显式地控制 this 的指向。

理解 this 的工作机制对于编写灵活和可维护的 JavaScript 代码至关重要，特别是在涉及事件处理、回调函数以及面向对象编程时。