JavaScript variable scope and closure_javascript skills

Scope JavaScript variable scope is divided according to functions. In order to quickly understand its characteristics, we will demonstrate it through an example.

Example 1:

<script type="text/javascript"> 
var i = 1; 
// 弹出内容为 1 true 的提示框 
alert(window.i + &#39; &#39; + (window.i == i)); 
</script>

Analysis:
The variables defined globally are actually the attributes of the window object.
As can be seen from the above example, when we define global variables, the window object will generate a corresponding attribute. How to prevent our code from generating this attribute? See the example below.
Example 2:

<script type="text/javascript"> 
var document = 1; 
window.onload = function(){ 
alert(document); 
} 
// 弹出内容为 1 的提示框 
alert(window.document); 
</script>

This is a situation we don’t want to see. We can do this:

<script type="text/javascript"> 
function test(){ 
var document = 1; 
window.onload = function(){ 
alert(document); 
} 
} 
test(); 
// 弹出内容为 [object] 的提示框 
alert(window.document); 
</script>

In order to make the code more concise, we can do this:

<script type="text/javascript"> 
(function(){ 
var document = 1; 
window.onload = function(){ 
alert(document); 
} 
})(); 
// 弹出内容为 [object] 的提示框 
alert(window.document); 
</script>

Analysis:
This form of running anonymous methods is often seen in mainstream JavaScript frameworks. This can avoid generating unnecessary attributes of the window object and reduce the possibility of conflicts.
Example 3:

<script type="text/javascript"> 
(function(){ 
if(&#39;1&#39; == &#39;1&#39;){ 
var i = 1; 
} 
// 弹出内容为 1 的提示框 
alert(i); 
})(); 
</script>

Analysis:
The scope of the variable is the entire function, not the {} block.
Example 4:

<script type="text/javascript"> 
var i = 1; 
// 弹出内容为 1 的提示框 
alert(i); 
var i = 2; 
// 弹出内容为 2 的提示框 
alert(i); 
</script>

Analysis:
A variable can be redefined, which seems a bit strange, because this does not work in many other languages.
Example 5:

<script type="text/javascript"> 
function test(){ 
i = 1; 
} 
test(); 
// 弹出内容为 1 的提示框 
alert(window.i); 
</script>

Analysis:
If an uninitialized variable is assigned a value, then this variable will be used as a global variable.

Example 6:

<script type="text/javascript"> 
window.onload = function(){ 
var i = 1; 
function test(){ 
alert(i); 
} 
// 弹出内容为 1 的提示框 
test(); 
} 
</script>

Analysis:
Internal functions can access variables of external functions, which leads to a new concept, that is closure.
Closure
What is a closure? Simply put, it is a function A whose internal function B can access the variables defined in A, even if function A has terminated. Let’s learn about it through examples.
Example 7:

<script type="text/javascript"> 
window.onload = function(){ 
var i = 1; 
window.onunload = function(){ 
alert(i); 
} 
} 
</script>

Analysis:
When the entire page is loaded, the onload event will be triggered. This onload event method registers a method for the onunload event of the window. In this method The variables declared in the onload event method are used, and then the onload event method ends. At this time, we click to close the window, and a prompt box with a content of 1 will pop up, indicating that the onunload event method successfully called the variables declared in the onload event method.
In order to further understand the characteristics of closures, look at the following example
Example 8:

<script type="text/javascript"> 
function initX(oarg){ 
// 定义一个变量 
var x = oarg; 
// 定义一个显示变量的方法 
var funGet = function(){ 
alert(x); 
} 
// 定义一个对变量进行修改的方法 
var funSet = function(iarg){ 
x = iarg; 
} 
// 返回这两个方法 
return [funGet,funSet]; 
} 
// 运行一个方法实例，返回值为包含 get 和 set 方法的数组 
var funArr = initX(1); 
// 得到 get 方法 
var funGet = funArr[0]; 
// 得到 set 方法 
var funSet = funArr[1]; 
// 运行 get 方法，显示initX方法实例内的 x 变量，结果为 1 
funGet(); 
// 运行 set 方法，对initX方法实例内的 x 变量进行赋值 
funSet(2); 
// 运行 get 方法，显示initX方法实例内的 x 变量，结果为 2 
funGet(); 
</script>

Analysis:
When the internal function calls the variable defined by the external function, in fact The reference is to the memory block of this variable, so when we call the internal function, the referenced variable value is the actual content of the current variable.
Although the closure function is powerful, it can also cause us trouble if we are not careful. See the example below.
Example 9:

<button id="main">run</button> 
<script type="text/javascript"> 
(function(){ 
var obj = document.getElementById("main"); 
var funArr = [&#39;onclick&#39;,&#39;onkeypress&#39;]; 
for(var i=0; i<funArr.length; i++){ 
var temp = funArr[i]; 
obj[temp] = function(){ 
alert(temp); 
} 
} 
})(); 
</script>

The original intention of writing the code is to register click events and key events for the button whose id is main. The content of the event is to pop up a prompt box with the event name respectively. But the result is a bit strange. The prompt boxes of the two events are all onkeypress. According to the principle of closure, if we analyze carefully, we will find that when the two event methods are called, the temp variable points to the content of funArr[1]. We can Modify this way to solve this problem:

<button id="main">run</button> 
<script type="text/javascript"> 
(function(){ 
var obj = document.getElementById("main"); 
var funArr = [&#39;onclick&#39;,&#39;onkeypress&#39;]; 
for(var i=0; i<funArr.length; i++){ 
(function(){ 
var temp = funArr[i]; 
obj[temp] = function(){ 
alert(temp); 
} 
})(); 
} 
})(); 
</script>

Put the code in the for loop into a function, so that each loop will generate a function instance and let the function instance record each value in the funArr array , thus avoiding the problems encountered above.