JavaScript中的this关键字：你真的了解吗？

2023-11-13 08:04:13

JavaScript 中的 this 是一个非常重要的，它用于引用当前执行代码的对象。在不同的上下文中，this 的值可能会有所不同，但总体来说，它总是指向调用代码的对象。

this 的基本概念

在 JavaScript 中，this 的值由执行代码的对象决定。因此，在全局上下文中，this 指向 window 对象，而在函数内部，this 指向该函数所属的对象。

// 全局上下文中，this 指向 window 对象
console.log(this); // 输出：window

// 函数内部，this 指向该函数所属的对象
function Person() {
  this.name = "John Doe";
}

const person = new Person();
console.log(person.name); // 输出：John Doe

this 在箭头函数中

箭头函数是一个匿名函数，它没有自己的 this 值。因此，箭头函数内部的 this 与其父作用域的 this 相同。

// 全局上下文中，箭头函数的 this 指向 window 对象
const globalArrowFunction = () => {
  console.log(this); // 输出：window
};

// 函数内部，箭头函数的 this 指向该函数所属的对象
function Person() {
  this.name = "John Doe";

  const arrowFunction = () => {
    console.log(this); // 输出：Person { name: 'John Doe' }
  };

  arrowFunction();
}

const person = new Person();

this 在嵌套函数中

嵌套函数是一个定义在另一个函数内部的函数。嵌套函数的 this 值与它所属的函数的 this 值相同。

// 全局上下文中，嵌套函数的 this 指向 window 对象
function outerFunction() {
  const innerFunction = function() {
    console.log(this); // 输出：window
  };

  innerFunction();
}

// 函数内部，嵌套函数的 this 指向该函数所属的对象
function Person() {
  this.name = "John Doe";

  const innerFunction = function() {
    console.log(this); // 输出：Person { name: 'John Doe' }
  };

  innerFunction();
}

const person = new Person();