Detailed explanation of javascript closure_javascript skills-JS Tutorial-php.cn

Detailed explanation of javascript closure_javascript skills

WBOY

Release： 2016-05-16 15:51:54

Original

1203 people have browsed it

After reading the concepts and articles about closures on the Internet, I would like to sort out this issue myself.

Q: What is closure?
Answer: Closure means that in JavaScript, an internal function can always access the parameters and variables declared in the external function in which it is located, even after its external function is returned (end of life).

This is the first time I encountered closure problem

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>闭包循环问题</title>
<style type="text/css">
p {background:#ccc; width: 300px; height: 100px;}
</style>
</head> 
<body> 
<p id="p0">段落0</p> 
<p id="p1">段落1</p> 
<p id="p2">段落2</p> 
<p id="p3">段落3</p> 
<p id="p4">段落4</p> 
<script type="text/javascript">
for( var i=0; i<5; i++ ) { 
document.getElementById("p"+i).onclick=function() { 
alert(i); //访问了父函数的变量i, 闭包 
};
};
</script> 
</body> 
</html>

Copy after login

If you have never used it before, you may also think that clicking on a paragraph will pop up the corresponding numbers 0, 1, 2, 3, 4 for this paragraph. But in fact, they all pop up 5;

There have been many blogs discussing this issue online, and they have given many methods to pop up the corresponding number.

Solution 1: Save the variable i in an attribute of the corresponding paragraph

var pAry = document.getElementsByTagName("p"); 
for( var i=0; i< 5; i++ ) { 
pAry[i].no = i; 
pAry[i].onclick = function() { 
alert(this.no); 
} 
};

Copy after login

Solution 2: Add a layer of closure, and pass i to the inner function in the form of a function parameter

var pAry = document.getElementsByTagName("p"); 
for( var i=0; i< 5; i++ ) { 
pAry[i].no = i; 
pAry[i].onclick = function() { 
alert(this.no); 
} 
};

Copy after login

Regarding the closure problem caused by this, the saying on the Internet is that "the variable i is stored in the function as a pointer or variable address"; well, it is all related to the pointer. . . . Then explore some more.

Explore 1, the returned value is 10 instead of

(function test() { 
var temp =10; 
for(var i=0; i< 5; i++ ){ 
document.getElementById("p"+i).onclick=function() { 
alert(temp); //访问了父函数的变量temp, 闭包 
}
};
temp=20;
})();

Copy after login

Explore 2, return 10 once, and then return 20

(function test() { 
var temp =10; 
for( var i=0; i< 5; i++ ) { 
document.getElementById("p"+i).onclick=function() { 
alert(temp); //访问了父函数的变量i, 闭包 
}
if(i===1){
alert(temp);
}
};
temp=20;
})();

Copy after login

From the exploration of 1 and 2, it can be concluded that if a variable of the same level as the function is accessed inside the function, then the variable is resident in memory. Accessing this variable essentially accesses the address of the variable;

Then, I read another article about "this object in JS closure", let's continue to discuss the issue of this.

// js闭包this对象1
var name = 'The Window';
var object = {
  name : 'My Object',
  getNameFunc1 : function(){
    // return this.name;
    console.log(this);//object
    return function(){//闭包，访问的便是全局变量的了，this指windows
     console.log(this);//windows
     return this.name; //The Window
    }
  },
  getNameFunc2 : function(){
     return this.name;//访问的是object
  },
  aa:function(){
   alert(22);
  }
};
alert(object.getNameFunc1()());//弹出“The Window”

Copy after login

Question: So why doesn’t the anonymous function get the this object that contains its scope?
Answer: Every function automatically obtains two special variables when it is called: this and arguments. When searching for these two variables, the inner function directs the search to its active object, so it is never possible to directly access these two variables in the outer function.
But this can be done with the following code (direct access to variables in external functions):

// js闭包this对象2
var name = 'The Window';
var object = {
  name : 'My Object',
  getNameFunc : function(){
   var that = this;
   console.log(this);//输出的是object
   return function(){
    console.log(this);//输出的仍然是Windows
    return that.name;
   };
  }
};
alert(object.getNameFunc()());//弹出“My Object”

Copy after login

The difference is that the this object is assigned to a that variable. Even after the function returns, that still refers to the object, so object will be returned.
I have written so much about closures, so let me mention the usefulness of closures; otherwise, it would be a bad person to keep messing with closures.

Look at this typical closure example:

function A(){
 var a=1;
 function B(){
  return a;
 }; 
 return B;
};

var C=A();//C取得A的子作用域B的访问接口
console.log(C());//1 C能访问到B的父级作用域中的变量a

Copy after login

As long as other scopes can obtain the access interface of the child scope, then other scopes will have a way to access the variables of the parent scope of the child scope. In this case, it will be greatly useful if you need to access the value in a certain function in the future.

Many of the above codes were actually found online. I just summarized what I understood and the process of reading.