我有一个自定义Javascript对象,如下所示:
var CustomClass = function(settings) {
this.var_1 = false;
this.var_2 = null;
this.var_3 = 0;
}
CustomClass.prototype.method_1 = function(){
var reader = new FileReader();
reader.onload = (function(cropWidget) {
this.var_1 = true;
});
}
CustomClass.prototype.method_2 = function(){
console.log(this.var_1); // logs 'false' onto the console
if(this.var_1)
{ // proceed further and do something
}
}
CustomObject实例化于:
$(document).ready(function{;
var customObj = new CustomClass({/*json values*/});
});
然后,另一个DOM事件将调用method_1,例如:
$('#element1').click(function(){
customObj.method_1(); // this is where var_1 is being set to true
});
当由另一个元素在DOM中调用method_2()时,会发生问题,如下所示:
$('#element2').click(function(){
customObj.method_2();
});
它会检查var_1的值,您记得在customObj调用method_1时已将其设置为true
this.var_1为false,而不是应为true。这是否意味着仅针对method_1()的范围将var_1的范围设置为true,并且仍保留其旧值? IMO Javascript通过引用传递,因此变量值应在其原始位置设置为true。
有人可以解释我要去哪里哪里以及如何设置var_1的值,以便它还能在method_2中保留它的新值吗?
最佳答案
问题在于将var_1
设置为true的范围不是您想要的范围:
CustomClass.prototype.method_1 = function(){
var reader = new FileReader();
reader.onload = function(cropWidget) {
this.var_1 = true;
};
}
您在回调中将
var_
设置为true
,并且回调中this
的值与method_1
中的值不同。您可以使用
self = this
习惯用法解决此问题:CustomClass.prototype.method_1 = function(){
// "this" here refers to the CustomClass instance,
// so let's store it in "self" so we can use it in the callback
var self = this;
var reader = new FileReader();
reader.onload = function(cropWidget) {
// "this" here will not be the CustomClass instance,
// so we refer to the "self" variable from above.
self.var_1 = true;
};
}
尽管仍然存在潜在的计时问题,这应该可以解决您的问题:如果在
method_2
触发其FileReader
事件之前调用onload
,则var_1
尚未设置为true
。