gpt4 book ai didi

javascript - es6 类方法内的 "This"

转载 作者:行者123 更新时间:2023-12-02 23:18:46 25 4
gpt4 key购买 nike

出于某种原因,我在 es6 类中得到了奇怪的“this”值...

'use strict';
class Clicker {
constructor(element) {
this.count = 0;
this.elem = element;
this.elem.addEventListener('click', this.click);

// logs Clicker { count:0, elem: button#thing} as expected
console.log(this);
}

click() {
// logs <button id="thing">...</button> as unexpected...
console.log(this);
this.count++;
}
}


var thing = document.getElementById('thing');
var instance = new Clicker(thing);
<button id="thing">Click me</button>

问题:

为什么 Clickers 的 click 方法中的“this”指的是 dom 节点而不是 ... 本身?

更重要的是,如果我不能使用“this”来执行此操作,如何在其“click”方法中引用 Clickers 的 count 属性?

最佳答案

Why is the "this" inside of of the Clickers' click method referring to the dom node rather than ... itself?

因为.addEventListener()的规范是将this指针设置为捕获事件的DOM元素。这就是它的设计原理。

<小时/>

当您想要覆盖 this 的值时,将方法作为回调传递时,可以使用 .bind() 强制使用 所需的值这与它:

this.elem.addEventListener('click', this.click.bind(this));

说明:

Javascript 中的所有函数调用都会根据函数的调用方式设置 this 的新值。请参阅this explanation有关这组基本规则的更多信息。

最重要的是,当你这样做时:

this.elem.addEventListener('click', this.click);

您只需获取 this.click 方法并将该方法单独传递给 addEventListener()this 的值(value)将完全丢失。就好像您正在这样做:

var m = this.click;     // m here is just a reference to Clicker.prototype.click
this.elem.addEventListener('click', m);

除此之外,.addEventListener() 是专门构建的,用于在调用回调时设置它自己的 this 值(指向 this code> 创建事件的元素)。

因此,您可以使用如上所示的 .bind() 来强制在调用方法时使用 this 的正确值。

<小时/>

作为引用,您可以找到this description of the six ways that this is set让 Javascript 中的函数调用变得有用。

<小时/>

其他选项

我发现 .bind() 是定义它的最清晰的方法,但您也可以使用本地匿名函数:

var self = this;
this.elem.addEventListener('click', function() {
self.click();
});

或者在 ES6 中,箭头函数:

this.elem.addEventListener('click', () => this.click());

箭头函数将自动为您保留 this 的值,以避免需要前面示例中使用的 self 引用。

关于javascript - es6 类方法内的 "This",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36489579/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com