gpt4 book ai didi

javascript - Javascript 类中全局变量的范围

转载 作者:行者123 更新时间:2023-11-28 13:45:17 28 4
gpt4 key购买 nike

我有一个自定义 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。这是否意味着 var_1 的范围仅在 method_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 的值notmethod_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;
};
}

这应该可以解决您的问题,但仍然存在潜在的计时问题:如果在 FileReader 触发其 onload 事件之前调用 method_2var_1 尚未设置为 true

关于javascript - Javascript 类中全局变量的范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14779982/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com