Javascript类中全局变量的范围

Question

I have a custom Javascript object, that looks like this:

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
 }
}

The CustomObject is instantiated upon:

$(document).ready(function{;  
  var customObj = new CustomClass({/*json values*/});
});

And then, another DOM event will call upon method_1 like:

$('#element1').click(function(){
   customObj.method_1(); // this is where var_1 is being set to true
});

The problem happens, when method_2() is being invoked in the DOM by another element, like this:

$('#element2').click(function(){
  customObj.method_2();
});

it checks for the value of var_1 which as you would recall has been set to true when customObj invoked method_1

this.var_1 is false, and not true as it should be. Does this mean the scope of var_1 was set to true only for the scope of the method_1() and still retains it's older value? IMO Javascript is pass by reference, so that variable value should have been set to true in it's original place.

Can someone explain where I am going wrong and how I may go about setting the value of var_1 such that it retains it's new value in method_2 as well ?

Answer 1

this.var_1 is false, and not true as it should be.

That's likely because you do not refer to the same object. Your event handler function(){ var customObj = new CustomClass(…); } function(){ var customObj = new CustomClass(…); } creates an instance and assigns it to a local variable . It will get garbage-collected once the function is ran.

IMO javascript is pass by reference, so that variable value should have been set to true in it's original place.

No, javascript is always pass-by-value. Yet, when you are passing objects, you are actually passing values that reference the object so there will be a lot of variables referencing the same "shared" object.

Answer 2

The problem is that the scope in which you're setting var_1 to true isn't what you want it to be:

CustomClass.prototype.method_1 = function(){

  var reader = new FileReader();
  reader.onload = function(cropWidget) {
    this.var_1 = true;
  };
}

You're setting var_ to true in a callback, and the value of this in the callback is not the same as in method_1 .

You could use the self = this idiom to fix 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;
  };
}

That should solve your problem, though there is still a potential timing issue: if method_2 is called before the FileReader fires its onload event, var_1 won't yet be set to true .