variable scope
The scope of variables is nothing more than two: global variables and local variables.
When declaring variables inside a function, be sure to use the var command. If you don't use it, you are actually declaring a global variable!
Closure
A common way of creating a variable that has access to the scope of another function is to create another function inside a function, and access the local variables of this function through the other function.
Simply put, a closure is a function that can read variables inside other functions .
Since in the Javascript language, only sub-functions inside functions can read local variables, so closures can be simply understood as "functions defined inside a function".
Defined in MDN is:
A closure is a function that has access to free variables. In other words, a function defined in a closure can "remember" the environment in which it was created.
Note: A free variable is a type of variable that is neither declared locally nor passed as a parameter.
-
simple example
function A(){
function B(){ console.log("Hello Closure!"); } return B; } var b = A(); b();//Hello Closure! So through this example, the closure can be easily understood.
-
Define a function A()
-
Function B() is defined in A
-
Return to B in A
-
Execute A() and assign the return result of A to the variable b
-
execute b()
To sum up a sentence: the inner function B of function A is referenced by a variable b outside of function A. So when an inner function is referenced by a variable outside its outer function, a closure is formed
The role of closures
To define a variable in a module and hope that the variable will be stored in memory without polluting the global variable, use a closure to define the template.
It has two biggest uses, one is to read the variables inside the function mentioned above, and the other is to keep the values of these variables in memory.
A note on closures
-
The advantages and disadvantages of closures are that local variables reside in memory, which can avoid the use of global variables. However, because the resources in the closure will not be destroyed and reclaimed immediately, it may occupy more memory, and excessive use of the closure will lead to performance decline.
-
The closure will be outside the parent function, changing the value of the variable inside the parent function. So, if you use the parent function as an object, the closure as its public method, and the internal variable as its private value, be careful not to Feel free to change the value of the variable inside the parent function.
Note: After it can be used, add null to it and touch the reference.
Example
Example 1:
var name = "The Window"; // 全局
var object = {
name: "My Object", // 局部 getNameFunc: function () { // 对象中的方法，this指向obj这个对象 return function () { // 闭包 return this.name; // this指向window }; } }; alert(object.getNameFunc()()); // The Window
Example 2:
var name = "The Window"; // 全局
var object = {
name: "My Object", // 局部 getNameFunc: function () { // 对象中的方法，this指向obj这个对象 var that = this; // 将getNameFunc()的this保存在that变量中 return function () { // 闭包 return that.name; // that指向object }; } }; alert(object.getNameFunc()()); // My Object
Example 3:
var name = "The Window"; // 全局
var object = {
name: "My Object", // 局部 getNameFunc: function () { return function () { // 闭包 var that = this; return that.name; }; } }; alert(object.getNameFunc()()); // The Window
Example 4:
var name = "The Window"; // 全局
var object = {
name: "My Object", // 局部 getNameFunc: function () { // 对象中的方法，this指向obj这个对象 return function () { // 闭包 var that = this; // 将getNameFunc()的this保存在that变量中 return that.name; // this指向window }; } }; alert(object.getNameFunc().call(object)); // My Object call改变this指向