使用实例方法作为事件处理程序的回调将范围this从"My instance"更改为"Whatever just call the callback"。所以我的代码看起来像这样
function MyObject() {
this.doSomething = function() {
...
}
var self = this
$('#foobar').bind('click', function(){
self.doSomethng()
// this.doSomething() would not work here
})
}
它有效，但这是最好的方法吗？对我来说看起来很奇怪。
这个问题并非特定于 jQuery，而是特定于一般的 JavaScript。核心问题是如何在嵌入式函数中“引导”变量。这是示例：
var abc = 1; // we want to use this variable in embedded functions
function xyz(){
console.log(abc); // it is available here!
function qwe(){
console.log(abc); // it is available here too!
}
...
};
这种技术依赖于使用闭包。但它不起作用，this因为它this是一个伪变量，它可能会在不同的范围内动态变化：
// we want to use "this" variable in embedded functions
function xyz(){
// "this" is different here!
console.log(this); // not what we wanted!
function qwe(){
// "this" is different here too!
console.log(this); // not what we wanted!
}
...
};
我们能做什么？将它分配给某个变量并通过别名使用它：
var abc = this; // we want to use this variable in embedded functions
function xyz(){
// "this" is different here! --- but we don't care!
console.log(abc); // now it is the right object!
function qwe(){
// "this" is different here too! --- but we don't care!
console.log(abc); // it is the right object here too!
}
...
};
this在这方面不是唯一的：arguments另一个伪变量应该以相同的方式处理 - 通过别名。
是的，这似乎是一个共同的标准。一些编码器使用自我，其他编码器使用我。它用作对“真实”对象而不是事件的引用。
这是我花了一些时间才真正理解的东西，起初看起来确实很奇怪。
我通常在对象的顶部执行此操作（请原谅我的演示代码 - 它比其他任何东西都更具概念性，并且不是关于出色编码技术的课程）：
function MyObject(){
var me = this;
//Events
Click = onClick; //Allows user to override onClick event with their own
//Event Handlers
onClick = function(args){
me.MyProperty = args; //Reference me, referencing this refers to onClick
...
//Do other stuff
}
}
如果您正在使用 ES2015 或 type script 和 ES5，那么您可以在代码中使用箭头函数，并且您不会遇到该错误，这指的是您的实例中所需的范围。
this.name = 'test'
myObject.doSomething(data => {
console.log(this.name) // this should print out 'test'
});
作为解释：在 ES2015 中，箭头函数this从它们的定义范围捕获。普通的函数定义不会那样做。
var functionX = function() {
var self = this;
var functionY = function(y) {
// If we call "this" in here, we get a reference to functionY,
// but if we call "self" (defined earlier), we get a reference to function X.
}
}
编辑：尽管如此，对象内的嵌套函数采用全局窗口对象而不是周围对象。
对此的一种解决方案是使用 javascript 的bind方法将所有回调绑定到您的对象。
您可以使用命名方法执行此操作，
function MyNamedMethod() {
// You can now call methods on "this" here
}
doCallBack(MyNamedMethod.bind(this));
或者使用匿名回调
doCallBack(function () {
// You can now call methods on "this" here
}.bind(this));
执行这些而不是诉诸于var self = this向您展示您了解thisjavascript 中绑定的行为并且不依赖于闭包引用。
此外，ES6 中的粗箭头运算符基本上与调用.bind(this)匿名函数相同：
doCallback( () => {
// You can reference "this" here now
});