Using setTimeout_javascript trick in Javascript class

Recently encountered a Javascript test question, the content is as follows:

Try to implement the Javascript code in the comment part, you can add more
code anywhere else (if it cannot be implemented, explain why it cannot be implemented ):

var Obj = function(msg){
this.msg = msg;
this.shout = function(){
alert(this.msg);
}

this.waitAndShout = function(){
// Execute the above shout method after five seconds
}
}

var testObj = new Obj(" Hello, World!");
testObj.shout(); To be honest, I had no experience using setTimeout/setInterval in Javascript classes before, so I thought it was impossible to achieve at first. But after careful consideration, I found that it can be achieved. To take a step back, it is very easy to execute a certain statement every five seconds. For example, without considering other factors, the function in the question can be written like this:

this.waitAndShout = function(){
setTimeout('this.shout()', 5000);
} After running it, everyone will realize that the this variable cannot be found. But why is this? You will soon realize that setTimeout/setInterval is actually a method of the window object, so it can also be written as window.setTimeout/window.setInterval. Then the above this.shout() is very easy to understand why. It cannot be executed because it actually calls window.shout().

After knowing the reason, it is very easy to solve it. Just bind the object to the window object (I am excited about the interesting object mechanism of Javascript). Then, make a small modification to the above function:

this.waitAndShout = function() {
window.Obj = this;
setTimeout('Obj.shout()', 5000) ;
} That’s it. In fact,

setTimeout('Obj.shout()', 5000); is equivalent to

window.setTimeout('window.Obj.shout()', 5000); in addition, before I also thought of saving the object as an array and then calling it by reference. The code is as follows:

function ObjectClass (property) {
this.property = property;
this.id = ObjectClass.cnt;
ObjectClass.objects[ObjectClass.cnt] = this;
this.method = ObjectClass_method;
}

ObjectClass.cnt = 0;
ObjectClass.objects = new Array();

function ObjectClass_method () {
setTimeout('ObjectClass.objects[' this.id '].method();', 5000);
}

var obj1 = new ObjectClass('feelinglucky');
obj1.method(); However, I personally feel that the first method above is much clearer.

Postscript, Javascript does seem to have many areas that need to be treated with caution, especially the object mechanism. As I said before, Javascript is not more complicated than other languages, but it is not as simple as you think.

PS: After completing this question, Google found that other brothers have already solved this kind of problem, such as here and here, you can compare and refer to it.


----------------------------------------- ---------------------------------------

Updated, thanks to Brother Sheneyan As a reminder, there is another way to achieve it through Closure. The code is as follows:

var Obj = function(msg){
this.msg = msg;
this. shout = function() {
alert(this.msg);
this.waitAndShout();
}

var _self = this;
this.waitAndShout = function() {
setTimeout(function(){_self.shout()}, 5000);
}
}

var testObj = new Obj("Hello, World!");
testObj.shout(); It seems that this question can no longer harm people :^)