我有一个注册事件处理程序的构造函数:
函数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);
};
但它表现出相同的问题。
如何访问正确的对象?
这一切都在调用方法的“神奇”语法中:
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));
我遇到了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
}
以下是访问子上下文中的父上下文的几种方法-
您可以使用bind()函数。在另一个变量中存储对context/this的引用(参见下面的示例)。使用ES6箭头功能。改变代码、功能设计和架构——为此,您应该能够控制JavaScript中的设计模式。
1.使用bind()函数
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', ( function () {
alert(this.data);
}).bind(this) );
}
// Mock transport object
var transport = {
on: function(event, callback) {
setTimeout(callback, 1000);
}
};
// called as
var obj = new MyConstructor('foo', transport);
如果您正在使用Undercore.js-http://underscorejs.org/#bind
transport.on('data', _.bind(function () {
alert(this.data);
}, this));
2.在另一个变量中存储对context/this的引用
function MyConstructor(data, transport) {
var self = this;
this.data = data;
transport.on('data', function() {
alert(self.data);
});
}
3.箭头功能
function MyConstructor(data, transport) {
this.data = data;
transport.on('data', () => {
alert(this.data);
});
}
你应该知道“this”关键字。
根据我的观点,你可以通过三种方式实现“这一点”(自身|箭头函数|绑定方法)
与其他语言相比,函数的this关键字在JavaScript中的表现稍有不同。
严格模式和非严格模式之间也有一些区别。
在大多数情况下,其值取决于函数的调用方式。
它不能在执行过程中通过赋值来设置,每次调用函数时可能会有所不同。
ES5引入了bind()方法来设置函数的值,
ES2015引入了箭头函数,这些函数不提供自己的绑定(它保留了封闭词汇上下文的值)。
方法1:Self-Self被用于维护对原始this的引用,即使上下文在变化。这是一种常用于事件处理程序(尤其是闭包)的技术。
参考:此
function MyConstructor(data, transport) {
this.data = data;
var self = this;
transport.on('data', function () {
alert(self.data);
});
}
方法2:箭头函数-箭头函数表达式在语法上是正则函数表达式的一种紧凑的替代方法,尽管它本身没有与this、arguments、super或new.target关键字的绑定。
箭头函数表达式不适合作为方法,并且不能用作构造函数。
参考:箭头函数表达式
function MyConstructor(data, transport) {
this.data = data;
transport.on('data',()=> {
alert(this.data);
});
}
方法3:Bind-Bind()方法创建一个新函数,当调用该函数时,将其this关键字设置为所提供的值,并在调用新函数时提供的任何参数之前使用给定的参数序列。
引用:Function.pr原型.bind()
function MyConstructor(data, transport) {
this.data = data;
transport.on('data',(function() {
alert(this.data);
}).bind(this);