Discussion about variable scope in javascript callback function_javascript skills

1. Background
I believe everyone is familiar with the callback function in Javascript. The most obvious example is the callback function provided when making an Ajax request.
In fact, the event processing method of the DOM node (onclick, ondblclick, etc.) It is also a callback function.
When using DWR, the callback function can appear as the first or last parameter, such as:
JScript code function callBack(result){ } myDwrService.doSomething(param1,param2,callBack);//DWR The recommended method //or myDwrService.doSomething(callBack,param1,param2);

2. Problem description
When using Dojo Dwr recently, I encountered a problem:
If the callback function is A method belonging to an object (recorded as obj1), when DWR executes the callback function,
the context is not obj1.
The phenomenon is that any properties of obj1 accessed in the callback function are undefined.
Version: Dojo1.3.1 and dwr2
3. Code to simulate the problem
The following test code can simulate this problem:
JScript code

Copy code The code is as follows:

Call test

In the callObjMethod method, I used two ways to call back the "method" method:
The first way: method("Callback through the default context");
Without specifying the context, we found that inside the callback function The value of the access context is the value of the global variable.
This means that the default context for executing this method is the global context.
Second method: method.call(obj, "Specify explicit object context callback");
Specify obj as the context for method execution, and you can access the context inside the object.

4. Research DWR
Because I had already encountered this problem when using DOJO DWR (1.0) in 2006. I didn’t do much homework at that time and directly changed the source code of dwr.
I am using dwr2 now, so I wanted to see if DWR has a new way to deal with this problem.
Take out the engine.js in dwr.jar and check the relevant code about callbacks (_remoteHandleCallback and _ execute),
found that the way to handle callbacks seems to be simpler than 1.0, and there is no way to pass the object and method together.
5. Do further research
Because DWR is used too widely in the project this time, and I believe that such demand should be met, so I did not modify the source code immediately.
First of all, on Google Searching for Dojo dwr, I didn't find any conclusion. Maybe Dojo doesn't have too many users.
So I searched for "javascript callback object context" and got an article specifically introducing the issue of java callback functions:
http://bitstructures.com/2007/11/javascript-method-callbacks
The most important thing A sentence:
When a function is called as a method on an object (obj.alertVal()),
"this" is bound to the object that it is called on (obj).
And when a function is called without an object (func()),
"this" is bound to the JavaScript global object (window in web browsers.)
This article also provides a solution, which is to use Closure and Anonymous method,
In JavaScript, when creating a function inside a function, a closure will be automatically created,
and this closure can remember the context when the corresponding function was created.
So, if this:
JScript code var closureFunc=function(){ testObj.callback(); }
Then no matter where, calling closureFunc() directly and calling testObj.callback() are equal price.
For details, see the article mentioned above: http://bitstructures.com/2007/11/javascript-method-callbacks.
6. Improve the simulation code
For the simulation code, we add another callback method:
JScript code

Copy code The code is as follows:

< ;/head>
Call test



Testing the above code, we can find that the effects obtained by Closure and by displaying the specified object are the same.
7. Simulate a more realistic calling scenario
But there is another problem with the above code. Usually in a real environment, if the callback function is a method in the object, then the method that initiates the request is also in the same object,
In JavaScript, this can also represent the current object, but it cannot be used directly in anonymous functions, such as:
JScript code var testObj={ context: "Initial", callback: function (str) {//Callback function alert("callback: In the context I am in, context=" this.context ", the way I am called back: " str); }, caller:function(){ callWithClosure(function(param){this.callback(param );}); } };//Create an object as the context of the test callback function
This in the above code does not refer to testObj, but the global context.
You need to write a temporary variable outside the closure. Represents this, the complete code is as follows:
JScript code

Copy code The code is as follows:

Call test




8. What is Closure

Two one sentence summaries:
a closure is the local variables for a function - kept alive after the function has returned,
or
a closure is a stack-frame which is not deallocated when the function returns. (as if a 'stack-frame' were malloc'ed instead of being on the stack!)