了解 JavaScript 中的“this”关键字：完整指南

哈喽！今天心血来潮给大家带来了《了解 JavaScript 中的“this”关键字：完整指南》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

javascript 中的 this 关键字是该语言中最强大但经常被误解的方面之一。它的值取决于函数的调用方式而不是函数的定义位置，这使得它对于管理代码中的上下文至关重要。

在本指南中，我们将通过实际示例探讨其细微差别，并深入探讨如何使用调用、应用和绑定来显式控制它。

---

这的基础知识

在 javascript 中，this 指的是当前正在执行代码的对象。确定其值的规则取决于函数的调用类型：

1. 隐式绑定：这是方法调用之前的对象。
2. 显式绑定：可以使用调用、应用或绑定显式设置。
3. new binding：在构造函数中，this 指的是新创建的对象。
4. 全局/窗口绑定：如果上述规则均不适用，则默认为全局对象（浏览器中的窗口或 node.js 中的全局）。

---

1. 隐式绑定：来自调用者的上下文

当函数作为对象的方法调用时，this 指的是点之前的对象。

const car = {
  model: "tesla",
  displaymodel: function () {
    console.log(this.model);
  }
};

car.displaymodel(); // output: "tesla"

在此示例中，this.model 指向 car 对象的 model 属性，因为 car 是调用者。

---

2. 显式绑定：使用call、apply、bind

当你需要精确控制this的值时，可以使用call、apply或bind。

一个。称呼

call 方法立即调用具有指定 this 值和单独参数的函数。

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "jack" };

greet.call(person, "hello", "!"); // output: "hello, jack!"

这里，调用确保 this.name 引用 person 对象的 name 属性。

b.申请

apply 方法与 call 类似，但将参数作为数组而不是单独接收。

greet.apply(person, ["hi", "."]); // output: "hi, jack."

当您要传递一组参数时，这使得 apply 特别有用。

c.绑定

bind 方法返回一个新函数，并将 this 永久设置为指定对象，允许延迟调用。

const boundgreet = greet.bind(person, "welcome");
boundgreet("?"); // output: "welcome, jack?"

通过绑定，您可以创建一个与特定上下文绑定的可重用函数。

---

3. new binding：用构造函数创建对象

当使用 new 关键字调用函数时，this 指的是正在创建的新对象。

function person(name) {
  this.name = name;
}

const jack = new person("jack");
console.log(jack.name); // output: "jack"

new 运算符将其设置为新创建的对象，允许您定义可重用的对象蓝图。

---

4. 全局/窗口绑定：后备

如果以上规则都不适用，则默认为全局对象。但是，在严格模式（“使用严格”）下，在这种情况下这是未定义的。

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

const name = "Global";
showName(); // Output: "Global" in non-strict mode

谨慎对待全局绑定，因为它可能会导致意外行为。

---

调用、应用和绑定总结

这是一个快速比较：

---

结论

掌握 this 关键字对于编写干净的、上下文感知的 javascript 代码至关重要。通过了解隐式、显式、新的和全局绑定，您可以自信地跨各种场景进行管理。调用、应用和绑定等工具提供精细控制，使您的函数灵活且可重用。

关注我：github linkedin

好了，本文到此结束，带大家了解了《了解 JavaScript 中的“this”关键字：完整指南》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！