Weird JavaScript Closure

Come out and try again sooner or later. Only by writing JavaScript code today can we know Functions share the same closure. The three closures share a variable. For example, the following code is incorrect and the corresponding description of each event cannot be correctly reported:

VaR DIV = Document. getelementbyid ("testdiv ");
VaR events = {onclick: "clicked", onchange: "changed", onmouseover: "mouse over "};

For (VAR e in events ){
Div [e] = function (){
Alert (events [e]);
};
}

Try it. No matter which part of the events list is triggered, the alert pop-up window is always "mouse over ".

I don't understand why JavaScript processes the relationship between loops and closures in this way. Which boss gave me some advice?Update: just guess. The closure environment of JavaScript is determined by the static syntax structure. That is to say, once the code is written, we will know which environment the function's free variables are bound. In this case, the above loop only declares a Variable P and an internal function. From the perspective of the static syntax structure, we do have only one environment. Therefore, although the same internal function is called multiple times during the runtime, multiple closures are created, which point to the same variable in the same environment. This is consistent with the closure semantics specified by JavaScript.

The change method of the Yangchun version is to create a new closure using the function definition. In line with the industry's famous saying: Any computer problems can be solved through an additional abstraction. :-) Crockford Douglas calls the extra layer of function a factor function ).

VaR DIV = Document. getelementbyid ("testdiv ");
VaR events = {onclick: "clicked", onchange: "changed", onmouseover: "mouse over "};

For (VAR e in events ){
Div [e] = function (e ){
Return function (){
Alert (events [e]);
};
} (E );
}

Of course, it is complicated to create a factor function everywhere. Therefore, the call in the dojo style is refreshing:

Dojo. Lang. foreach (events, function (e ){
Alert (E );
});

Obviously, we can see that this is a function programming style. In fact, JavaScript uses the simplified lisp of C syntax, which is extremely flexible. If we pay attention to the use of high-end functions (with closures), we can "assemble" our programs like building blocks to make the code clean. The dojo framework implements various common functions for function programming, such as map, reduce, filter, find, hitch, and curry, which are very convenient. Combined with prototype chain, powerful support for inspection (light arguments. callee makes it easy to write well-functional DSL in Javascript, as well as call, apply, and eval super functions. Even if you don't try DSL, JavaScript has countless advantages. For example, the event processing code in Dojo implements the AOP-style recommendation function, allowing us to manipulate the event processing time at will and easily intercept arbitrary event parameters, even the parameters called by common JavaScript Functions. The code for implementing these functions is not complex.

The implementation of dojo also shows the importance of learning multiple programming paradigms. Dojo supports functions such as function programming, object-oriented programming, ruby-style Mixin, and event processing in the AOP style for reference in different languages. If the main process of dojo, Alex Russell, only understands JavaScript, he may not be able to write dojo even if he can back up emcascript specifications. Enjoy programming and avoid a wonderful thing from being physically active. Kung Fu is always out of poetry.