JavaScript中的this指针与回调函数
JavaScript中的this指针与回调函数
coderhuo
发布于 2023-10-21 16:21:36
发布于 2023-10-21 16:21:36
在常规的面向对象语言中(比如C++)，this指针的指向是确定的。但在JavaScript中，this指向依赖于运行环境。
下面的例子，预期的输出是nihao：
class A {
setEventListener(func) {
this.callback = func;
}
triggerEvent() {
this.callback();
}
}
class B {
constructor(a) {
a.setEventListener(this.onEvent);
this.localValue = "nihao";
}
onEvent() {
console.log(this.localValue);
// console.log(this);
}
}
var a = new A();
var b = new B(a);
a.triggerEvent();但实际输出是undefined。
在onEvent中打印下this，可以看到，它指向的是对象a而不是b:
A { callback: [Function: onEvent] }这是因为在JavaScript中，this指向依赖于运行环境。上面的回调是被对象a执行的，所以onEvent的执行上下文是对象a。这有点像dart的Mixins。
可以在注册回调的时候，调用bind函数强制进行强制绑定，将下面的代码:
a.setEventListener(this.onEvent);改成：
a.setEventListener(this.onEvent.bind(this));这样就能得到预期的输出nihao。
关于JavaScript中this指针，可以参阅下面几篇文档：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-08-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读