如何在javascript匿名函数中调用类释放函数

Question

I am trying to access the object's member function in an anonymous function by the following way-

  function a()
    {
      this.memb = 10;
    }

    a.prototype.hide_member = function(id){
      alert(id);
    }

    a.prototype.show_member = function(){
      setTimeout('this.hide_member(this.memb)', 2000); //Problem 1
      setTimeout(this.hide_member(this.memb), 2000); //Problem 2
      setTimeout(alert(this.memb), 2000);  //Problem 3
      this.memb++;
    }

    var obj = new a();
    obj.show_member();

Here, Problem 1 - is the code is executing exactly at right time what is given, means just after 2000 ms, but it's displaying the following error after 2000 ms -

Uncaught TypeError: Object [object global] has no method 'hide_member'
(anonymous function)

Problem 2 - The code is executing, but it's executing immediately after the code is parsed, means not after 2000 ms.

Problem 3 - Same problem as in Problem 2

I am getting confusion here about these 3 problems. Thanks

Answer 1

A couple of things are going on here:

In this code:

setTimeout(this.hide_member(this.memb), 2000);

you're calling this.hide_member immediately, and passing its return value into setTimeout . This is exactly like foo(bar()) , where you're calling bar and passing its return value into foo .

You need to pass a function into setTimeout , and then call the member function from within that function. Note that within the function, this will be different, so you have to remember it:

a.prototype.show_member = function(){
  var self = this,
      memb_to_hide = this.memb;
  setTimeout(function() {
      self.hide_member(memb_to_hide);
  }, 2000);
  this.memb++;
}

Note that I also remembered the old value of this.memb to use in the function.

Another way to do that is with ES5's Function#bind , but it requires that the browser's JavaScript engine have that (or that you've loaded an "ES5 shim", as bind is a shimmable feature):

a.prototype.show_member = function(){
  setTimeout(this.hide_member.bind(this, this.memb), 2000);
  this.memb++;
}

Function#bind returns a function that, when called, will call the original function using the value you give in the first argument as this (and then passing on any further arguments). In this case, we didn't have to remember the old value of this.memb because we've already passed the old value into bind .

---

Side note: You're relying on the horror that is Automatic Semicolon Insertion. I recommend not doing that, and supplying semicolons at the ends of your statements, eg:

a.prototype.mumble = function() {
    /*...*/
}; // <=== Note the ;

Answer 2

is the code is executing exactly at right time what is given, means just after 2000 ms, but it's displaying the following error after 2000 ms

The error is self-explaining: this is referring to the global object instead of the instance of the a class. To avoid this you have to save a reference to the instance's context:

a.prototype.show_member = function(){
    var self = this; //self refers to the instance
    setTimeout('self.hide_member(self.memb)', 2000);
    this.memb++;
}

The code is executing, but it's executing immediately after the code is parsed, means not after 2000 ms.

It is executed after the parsing(to be more clear it is executed when show_member is called in the last line) because it is a function call:

setTimeout(this.hide_member(this.memb), 2000);

setTimeout expects a string or a function in order to be executed properly, what you're doing here is to execute the function and return a value(nothing in this case, so it's undefined ) which will be executed by setTimeout after 2000 ms. What is the result of a call to undefined ? An error. The problem is exactly the same in the third case.

NOTE : It is important to highlight that passing a string to setTimeout is a form of eval and it should be avoided; you can pass an anonymous function instead:

a.prototype.show_member = function(){
    var self = this; //self refers to the instance
    setTimeout(function() {
        self.hide_member(self.memb); 
    }, 2000);
    this.memb++;
}

Answer 3

Try this:

a.prototype.show_member = function(){
  var self = this;
  setTimeout('self.hide_member(self.memb)', 2000); //Problem 1
  setTimeout(function() { self.hide_member(self.memb) }, 2000); //Problem 2
  setTimeout(function() { alert(self.memb) }, 2000);  //Problem 3
  this.memb++;
}