JavaScript 中 this 指向剖析

2023-12-02 10:18:17

在 JavaScript 中，this 关键词是一个非常重要的概念，它用于表示函数运行时所属的对象。this 的指向可以是全局对象、函数自身、对象实例等。理解 this 指向对于编写出健壮可靠的 JavaScript 代码至关重要。

this 指向的本质

在 JavaScript 中，this 的指向本质上是由函数的运行时环境决定的。函数运行时，会创建一个执行上下文（execution context），this 就是这个执行上下文的当前对象。

非严格模式下的 this 指向

在非严格模式（non-strict mode）下，函数中的 this 指向全局对象（window）。也就是说，当一个函数没有被任何对象调用时，它的 this 指向就是 window 对象。

// 非严格模式下的函数
function fn() {
  console.log(this);
}

// 调用函数
fn(); // 输出: window

严格模式下的 this 指向

在严格模式（strict mode）下，函数中的 this 指向 undefined。也就是说，当一个函数没有被任何对象调用时，它的 this 指向就是 undefined。

// 严格模式下的函数
"use strict";

function fn() {
  console.log(this);
}

// 调用函数
fn(); // 输出: undefined

箭头函数的 this 指向

箭头函数（arrow function）是一种简化函数写法的语法。箭头函数没有自己的执行上下文，因此它的 this 指向与外层函数的 this 指向相同。

// 箭头函数
const arrowFn = () => {
  console.log(this);
};

// 调用箭头函数
arrowFn(); // 输出: window

// 在对象方法中使用箭头函数
const obj = {
  name: 'obj',
  method: () => {
    console.log(this);
  }
};

obj.method(); // 输出: undefined

类方法的 this 指向

类方法（class method）是属于类的函数。类方法的 this 指向是类的实例对象。

// 类方法
class MyClass {
  constructor(name) {
    this.name = name;
  }

  // 类方法
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// 创建类实例
const instance = new MyClass('John');

// 调用类方法
instance.greet(); // 输出: Hello, my name is John

对象方法的 this 指向

对象方法（object method）是属于对象的函数。对象方法的 this 指向是对象本身。

// 对象方法
const obj = {
  name: 'obj',
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

// 调用对象方法
obj.greet(); // 输出: Hello, my name is obj