Advanced JavaScript scope and closure
This lesson is to talk:
- JavaScript Scope
- JavaScript closures
Speaker teachers: Head teacher
A. JavaScript Scope
Block scope braces wrapped up section
for(var i=1;i<3;i++){
}
PS: javascript not dynamically scoped
function f(){
alert(x);
}
function f(){
f()
var x = 5;
}
f();
Two closure .JavaScript
Closure is a function with access to another function scope variables to create a common way of closure, it is to create an internal function to another function, local variables of this function by another function.
// local variable can be returned by the closure
function box() {
var user = 'Lee';
function return () { // return Box () by anonymous functions local variables
return user;
};
}
Alert (box () ()); // through the box () () to directly call the anonymous function return values
where b = box ();
Alert (B ()); // call to another anonymous function return value
Using closures has an advantage, but also its shortcomings: local variables that can reside in memory, to avoid the use of global variables. (Global Variables pollution causes the application to unpredictability, each module can be called will lead to disaster, it is recommended to use private, local variables package).
// to accumulate through the global variable
Age = 100 var; // global variables
function box() {
++ Age; // module level can be called a global variable, accumulate
}
Box (); // execute a function, the accumulated
Alert (Age); // global variable output
// local variables can not be achieved by accumulating
function box() {
was age = 100;
++ Age; // accumulate
return age;
}
alert(box()); //101
Alert (Box ()); // 101, can not be achieved, since has been initialized
// local variable accumulation may be achieved by closure
function box() {
was age = 100;
return function () {
age ++;
return age;
}
}
Box B = var (); // get function
Alert (b ()); // call the anonymous function
Alert (b ()); // second call anonymous function, to achieve cumulative
The scope chain mechanism causes a problem, any variable anonymous function in a loop in the last value is obtained.
// loop contains anonymous functions
function box() {
was arr = [];
for (var i = 0; i < 5; i++) {
arr[i] = function () {
return i;
};
}
return arr;
}
Box B = var (); // get the function array
Alert (to b.length); // get the length of the set of functions
for (var i = 0; i < b.length; i++) {
Alert (B [I] ()); // output of each function is the last value
}
The results output from the above example is 5, i is the maximum value of the cycle obtained. Because it is anonymous functions, anonymous functions are not self-enforcing, until the time of the call, box () has already been performed, i had become 5, so the final result is 5 5 b [i] call.
// loop contains anonymous functions - 1 change, self-enforcement anonymous function
function box() {
was arr = [];
for (var i = 0; i < 5; i++) {
ARR [I] = (function (NUM) { // perform self
Surely return;
}) (I); // parameter passing and
}
return arr;
}
where b = box ();
for (var i = 0; i < b.length; i++) {
Alert (B [I]); // returned here is the array, direct printing can
}
We make an anonymous function self-enforcing, leading to the eventual return to a [i] is an array rather than a function. Eventually leading to b [0] -b [4] retains a value of 0,1,2,3,4.
About this subject
Use this object in a closure may also cause some problems, this is based on the object at run-time execution environment functions of binding, if this is the window in the global scope, if the internal object points to this object. And window closures have directed at runtime, since the closure property or method does not belong to the object.
var user = 'The Window';
var obj = {
user : 'The Object',
getUserFunction : function () {
function return () { // do not belong to the closure obj, this refers to the inside of the window
return this.user;
};
}
};
alert(obj.getUserFunction()()); //The window
// can force refers to an object
alert(obj.getUserFunction().call(obj)); //The Object