formation
When you create other functions inside a function, you create closures, which are functions that can read variables inside a function.
The scope chain of closures:
- The scope of one's own
- Scope of External Functions
- global scope
Normally, the scope and variables of a function will be destroyed after execution, but when the function returns to the closure, the scope of the function will be preserved until the closure disappears.
Effect
1. Imitate Block Scope
Create and execute a function immediately, and the variables in the function are destroyed immediately unless they are assigned to variables in the global scope.
2. Create private variables in objects
Implementing public methods with closures to access private variables in scope
var fun = (function () {
var a = 1;
function geta() {
return a;
}
Outer = function () {}
Outer.prototype.publicMethod = function () {
a++;
return geta();
}
})();
var o = new Outer();
o.publicMethod();Return2Notes on using closures
1. Because closures cause variables in functions to be stored in memory and consume a lot of memory, closures can not be abused, otherwise it will cause performance problems of web pages and may lead to memory leaks in IE. The solution is to delete all unused local variables before exiting the function.
2) Closure changes the value of variables inside the parent function outside the parent function. So, if you use a parent function as an object, a closure as its Public Method, and an internal variable as its private value, be careful not to change the value of the parent function's internal variable.
Example
The function makeClosures is implemented and the following conditions are satisfied after the call:
1. Returns an array of functions with the same length as arr
2. Run result, the first function in result i The result is the same as that of fn(arr[i]).
Input examples:
var arr = [1, 2, 3]; var square = function (x) { return x * x; }; var funcs = makeClosures(arr, square); funcs1;
Output examples: 4
Direct Anonymous Function
function makeClosures(arr, fn) {
var funcs = [];
for(var i=0; i
(function(v){
funcs[v] = function(){
return fn.call(null,arr[v]);
}
})(i);
}
return funcs;
}forEach()
function makeClosures(arr, fn) {
var result = new Array();
arr.forEach(function(curr){
result.push(function(){return fn(curr)});
})
return result;
}Using ES5's bind() method
function makeClosures(arr, fn) {
var result = new Array();
for(var i=0;i
result[i] = fn.bind(null,arr[i]);
}
return result;
}Reference to the typical method of JavaScript Advanced Programming
function makeClosures(arr, fn) {
var result = new Array();
for(var i=0;i
result[i] = function(num){
return function(){
return fn(num);
}
}(arr[i]);
}
return result;
}Thoughts
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
var a = object.getNameFunc;
a()();//The caller here is always window, so output "The Window";
object.getNameFunc()();//Here object.getNameFunc() caller is object, but object.getNameFunc() as a whole, his caller is window, is window to call object.getNameFunc()(), at this time the caller is window, because the output "The Window";
var name = "The Window";
var object1 = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
object1.getNameFunc()();//This is similar to the object.getNameFunc() above where the caller is object, but in the return function of object1.getNameFunc(), this is assigned to that, so in object1.getNameFunc()(), this is still object, so output "My Object".
var e = object1.getNameFunc;
e()();//Here this is always window, so no matter how you assign it, you output "The Window"
Here's the rest of this
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return this.name;
}
};
object.getNameFunc()
//"My Object"
(object.getNameFunc)()
//"My Object"
(object.getNameFunc = object.getNameFunc)()
//"The Window"
//The last object.getNameFunc value is the function itself. function (){return this.name;}