Hello! 欢迎来到小浪资源网!



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


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

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


这的基础知识

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

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

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


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

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

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

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

立即学习Java免费学习笔记(深入)”;


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 

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


调用、应用和绑定总结

这是一个快速比较:

method purpose execution argument passing
call immediate invocation yes individually
apply immediate invocation yes Array of arguments
bind delayed invocation (returns new function) no individually or partially

结论

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

关注我:github linkedin

相关阅读