我有一个注册事件处理程序的构造函数:
函数MyConstructor(数据,传输){this.data=数据;transport.on('数据',函数(){警报(this.data);});}//模拟传输对象var传输={on:函数(事件,回调){setTimeout(回调,1000);}};//称为var obj=新MyConstructor('o',传输);
但是,我无法访问回调中创建的对象的数据属性。看起来这不是指创建的对象,而是指另一个对象。
我还尝试使用对象方法而不是匿名函数:
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', this.alert);
}
MyConstructor.prototype.alert = function() {
alert(this.name);
};
但它表现出相同的问题。
如何访问正确的对象?
问题围绕着this关键字在JavaScript中的行为。这表现如下不同,
其值通常由函数执行上下文确定。在全局范围中,这是指全局对象(窗口对象)。如果为任何函数启用了严格模式,则其值将是未定义的,因为在严格模式中,全局对象是指未定义的窗口对象。位于点之前的对象是this关键字将绑定到的对象。我们可以使用call()、bind()和apply()显式设置此值当使用new关键字(构造函数)时,它将绑定到正在创建的新对象。箭头函数不绑定此 — 相反,这是在词汇上绑定的(即,基于原始上下文)
正如大多数答案所建议的那样,我们可以使用arrow函数或bind()方法或Self var。我将引用GoogleJavaScript风格指南中关于lambdas(arrow函数)的一点
更喜欢使用箭头函数而不是f.bind(this),尤其是在goog.绑定(f,this)。避免写入常量self=this。箭头功能对于有时意外传递的回调特别有用其他参数。
谷歌明确建议使用lambdas,而不是bind或const self=this
因此,最好的解决方案是使用如下lambdas,
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => {
alert(this.data);
});
}
参考文献:
https://medium.com/tech-tajawal/javascript-this-4-rules-7354abdb274c箭头函数与绑定
我遇到了Ngx折线图xAxisTickFormatting函数的问题,该函数是从HTML调用的,如下所示:[xAxisTikFormatting]=“xFormat”。
我无法从声明的函数访问组件的变量。这个解决方案帮助我解决了问题,找到了正确的答案。
不要像这样使用函数:
xFormat (value): string {
return value.toString() + this.oneComponentVariable; //gives wrong result
}
使用此项:
xFormat = (value) => {
// console.log(this);
// now you have access to your component variables
return value + this.oneComponentVariable
}
这一切都在调用方法的“神奇”语法中:
object.property();
当您从对象中获取属性并一次性调用它时,该对象将成为该方法的上下文。如果调用相同的方法,但在不同的步骤中,则上下文是全局范围(窗口):
var f = object.property;
f();
当您获得方法的引用时,它将不再附加到对象。它只是对普通函数的引用。当您获取要用作回调的引用时,也会发生同样的情况:
this.saveNextLevelData(this.setAll);
这就是将上下文绑定到函数的地方:
this.saveNextLevelData(this.setAll.bind(this));
如果使用jQuery,则应改用$.proxy方法,因为并非所有浏览器都支持绑定:
this.saveNextLevelData($.proxy(this.setAll, this));