1. What is a closure
A closure is a function that has access to a variable in the scope of another function.
Simply put, Javascript allows the use of internal functions---that is, function definitions and function expressions are located in the function body of another function. Furthermore, these inner functions have access to all local variables, parameters, and other inner functions declared in the outer function in which they exist. A closure is formed when one of these inner functions is called outside the outer function that contains them.
2. The scope of variables
To understand closures, you must first understand the scope of variables.
The scope of variables is nothing more than two types: global variables and local variables.
The special thing about Javascript language is that global variables can be read directly inside the function.
The internal function can access the variables of the external function because the scope chain of the internal function includes the scope of the external function;
can also be understood as: the scope of the internal function Radiating to the scope of the external function;
var n=999; function f1(){ alert(n); } f1(); // 999
On the other hand, the local variables within the function cannot be read outside the function.
function f1(){ var n=999; } alert(n); // error
There is one thing to note here. When declaring variables inside a function, you must use the var command. If you don't use it, you are actually declaring a global variable!
function f1(){ n=999; } f1(); alert(n); // 999
3. Several ways to write and use closures
3.1. Add some attributes to the function
function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { return Circle.PI * this.r * this.r; } var c = new Circle(1.0); alert(c.area()); //3.14159
3.2. Declare a variable and assign a function as a value to the variable
var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) ); //3.14159
##3.3. This kind of The method is widely used and the most convenient. var obj = {} is to declare an empty object
var Circle={ "PI":3.14159, "area":function(r){ return this.PI * r * r; } }; alert( Circle.area(1.0) );//3.14159
function f1(){ var n=999; function f2(){ alert(n); // 999 } }
function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999
function f1(){ var n=999; nAdd=function(){n+=1} function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999 nAdd(); result(); // 1000
var name = "The window"; var object = { name:"My object", getNameFun:function(){ return function(){ return this.name; }; } }; alert(object.getNameFun(){}); //"The window"(在非严格模式下)
var name = "The window"; var object = { name:"My object", getNameFun:function(){ var that = this; return function(){ return that.name; }; } }; alert(object.getNameFun(){}); //“My object”
function assignHandler(){ var element = document.getElementById("someElement"); element.onclick = function(){ alert(element.id); } }
function assignHandler(){ var element = document.getElementById("someElement"); var id = element.id; element.onclick = function(){ alert(id); } element = null; }
The above code implements closure without directly referencing element, and a reference will still be saved in the active object containing the function. Therefore, it is necessary to set the element variable to null so that the memory it occupies can be recycled normally.
7. Points of note when using closures
1) Since closures will cause the variables in the function to be stored in memory, which consumes a lot of memory, closures cannot be abused, otherwise It will cause performance problems on web pages and may cause memory leaks in IE. The solution is to delete all unused local variables before exiting the function.
2) The closure will change the value of the variable inside the parent function outside the parent function. Therefore, if you use the parent function as an object, the closure as its public method, and the internal variables as its private value, you must be careful not to Feel free to change the value of the variable inside the parent function.
The above is the detailed explanation of the writing and function of closures in JavaScript introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. . I would also like to thank you all for your support of the PHP Chinese website!
For more detailed explanations of the writing and functions of closures in JavaScript, please pay attention to the PHP Chinese website!