JavaScript 中的 this 关键字解析：抽丝剥茧，深入理解上下文相关性

2023-12-30 16:31:50

JavaScript 中的 this 抽丝剥茧，深入理解上下文相关性

JavaScript 中的 this 看似简单，实则蕴含着丰富的上下文相关性。this 关键字的值取决于其所处的位置(上下文环境)，在不同的上下文中，this 的取值也不同。本文将带领您深入解析 this 关键字在全局环境、函数内部、类方法、箭头函数中的不同取值，让您全面掌握 JavaScript 中 this 的奥秘。

一、全局环境中的 this

在全局环境中，this 的值指向全局对象( window 或 global )。全局对象是 JavaScript 中的顶级对象，它包含了所有全局变量和函数。因此，在全局环境中，this 可以访问所有全局变量和函数。

// 全局环境中，this 指向全局对象
console.log(this); // 输出: Window {window: Window, self: Window, document: HTMLDocument, name: '', location: Location, ...}

二、函数内部的 this

在函数内部，this 的取值取决于其所在函数的调用方式。如果函数是作为普通函数调用，那么 this 的值指向全局对象。如果函数是作为方法调用，那么 this 的值指向调用该方法的对象。

// 普通函数调用，this 指向全局对象
function普通函数() {
  console.log(this); // 输出: Window {window: Window, self: Window, document: HTMLDocument, name: '', location: Location, ...}
}

// 方法调用，this 指向调用该方法的对象
const obj = {
  name: 'John Doe',
  sayHello: function() {
    console.log(this.name); // 输出: 'John Doe'
  }
};

obj.sayHello(); // 输出: 'John Doe'

三、类方法中的 this

在类方法中，this 的值指向调用该方法的类实例。类方法是属于类的函数，它可以访问类中的所有属性和方法。

// 类方法中的 this 指向调用该方法的类实例
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log(this.name); // 输出: 'John Doe'
  }
}

const person = new Person('John Doe');
person.sayHello(); // 输出: 'John Doe'

四、箭头函数中的 this

在箭头函数中，this 的值不受函数调用方式的影响，始终指向箭头函数所在作用域中的 this 值。

// 箭头函数中的 this 指向所在作用域中的 this 值
const obj = {
  name: 'John Doe',
  sayHello: () => {
    console.log(this.name); // 输出: 'John Doe'
  }
};

obj.sayHello(); // 输出: 'John Doe'

const普通函数 = function() {
  const sayHello = () => {
    console.log(this.name); // 输出: 'John Doe'
  };

  sayHello(); // 输出: 'John Doe'
};

普通函数(); // 输出: 'John Doe'