JavaScript之this关键字的全面解读

前端

2023-09-25 17:44:03

扑朔迷离的 JavaScript 之 this，到底指哪一个？

好的，我们来开始this的旅程吧！

一、this的基本原理

this关键字是JavaScript中一个特殊的关键字，它指向函数执行时所在的上下文对象。这个上下文对象可以是全局对象、对象实例或函数本身。简单来说，this指向调用函数的对象。

当函数在全局作用域中调用时，this指向全局对象（通常是window对象）。
当函数作为对象方法调用时，this指向该对象。
当函数作为构造函数调用时，this指向新创建的对象。
当函数作为回调函数调用时，this指向调用回调函数的对象。

二、箭头函数的this

箭头函数没有自己的this关键字，而是继承外层函数的this值。这使得箭头函数非常适合作为回调函数使用，因为你不必担心this指向错误的对象。

三、this的陷阱

在JavaScript中，this关键字有时会表现出令人惊讶的行为。这主要是因为this的值是动态确定的，它取决于函数的调用方式。

例如，以下代码中，this指向全局对象：

function sayHello() {
  console.log(this); //全局对象
}

sayHello();

然而，如果我们将sayHello函数作为对象方法调用，this就会指向该对象：

const person = {
  name: "张三",
  sayHello: function () {
    console.log(this); // {name: "张三"}
  },
};

person.sayHello();

四、如何控制this

有时，我们需要显式地控制this的值。这可以通过以下方法实现：

使用bind()方法：bind()方法可以将函数的this值绑定到指定的对象。例如：

const person = {
  name: "张三",
};

function sayHello() {
  console.log(this.name);
}

const boundSayHello = sayHello.bind(person);

boundSayHello(); // "张三"

使用call()或apply()方法：call()和apply()方法也可以用来显式地设置函数的this值。这两个方法的区别在于call()接受参数列表，而apply()接受参数数组。例如：

const person = {
  name: "张三",
};

function sayHello(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

sayHello.call(person, "你好"); // "你好，张三！"
sayHello.apply(person, ["你好"]); // "你好，张三！"