JavaScript 中的 this 关键字是该语言中最强大但经常被误解的方面之一。它的值取决于函数的调用方式而不是函数的定义位置,这使得它对于管理代码中的上下文至关重要。
在本指南中,我们将通过实际示例探讨其细微差别,并深入探讨如何使用调用、应用和绑定来显式控制它。
这的基础知识
在 javascript 中,this 指的是当前正在执行代码的对象。确定其值的规则取决于函数的调用类型:
- 隐式绑定:这是方法调用之前的对象。
- 显式绑定:可以使用调用、应用或绑定显式设置。
- new binding:在构造函数中,this 指的是新创建的对象。
- 全局/窗口绑定:如果上述规则均不适用,则默认为全局对象(浏览器中的窗口或 node.JS 中的全局)。
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