Home > Article > Web Front-end > Detailed explanation of scope and closure in javascript_javascript skills

Detailed explanation of scope and closure in javascript_javascript skills

WBOYOriginal: 2016-05-16 15:20:051271browse

1. JavaScript Scope

JavaScript variables actually have only two scopes, global variables and internal variables of functions. The scope of a variable (var scope) defined anywhere within a function is the entire function body.
Global variables: refers to the object properties under the window object.
Scope division: based on context, divided by functions, not by blocks.
Emphasis on two points:
1. In the same scope, JavaScript allows repeated definitions of variables, and the latter definition will overwrite the previous definition.
2. If a variable is defined without adding the keyword var inside a function, it will be a global variable by default.

var scope="global"; 
function t(){ 
  console.log(scope); //"global" 
  scope="local" 
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"local" 




var scope="global"; 
function t(){ 
  console.log(scope); //"undefined" 
  var scope="local" 
  console.log(scope); //"local" 
} 
t(); 
console.log(scope); //"global"

In the process of variable resolution, the local scope is first searched, and then the upper scope is searched. The variable scope is not defined in the function of the first code, so the upper scope (global scope) is searched and its value is output. However, the variable scope is defined in the function of the second code (no matter whether the variable is defined after the console or before, it is considered that the variable scope is owned in this scope), so the upper-level scope is no longer searched and the scope is output directly. But unfortunately, the local variable i is not assigned a value at this time, so the output is undefined.

//所以根据函数作用域的意思，可以将上述第二段代码重写如下： 
var scope="global"; 
function t(){ 
  var scope; 
  console.log(scope); 
  scope="local" 
  console.log(scope); 
} 
t();

Due to the characteristics of function scope, local variables are always defined in the entire function body. We can "advance" the variable declaration to the top of the function body.

var b; //第1步 
function fun(){  
  b = "change";  
}  
alert(b);//输出undefined，由于第1步只定义未赋值 
 
 
var b; //第1步 
function fun(){  
  b = "change";  
} 
fun(); //调用上述函数 
alert(b); //输出change

When using var to declare a variable, the attribute created is not configurable, which means it cannot be deleted through the delete operator.
2. Scope instance

<html> 
<head> 
  <script type="text/javascript"> 
    function buttonInit(){ 
      for(var i=1;i<4;i++){ 
        var b=document.getElementById("button"+i); 
        b.addEventListener("click"，function(){ alert("Button"+i);}，false); 
      } 
    } 
    window.onload=buttonInit; 
  </script> 
</head> 
<body> 
  <button id="button1">Button1</button> 
  <button id="button2">Button2</button> 
  <button id="button3">Button3</button> 
</body> 
</html>

When the registration event ends, the value of i is 4. When the button is clicked, the event function is function(){ alert("Button" i);} There is no i in this anonymous function. According to the scope chain, so to Find it in the buttonInit function. At this time, the value of i is 4, so "button4" pops up.
3. javaScript closure
In js, closures mainly involve several other features of js: scope chain, garbage (memory) recycling mechanism, function nesting, etc.
1. Scope chain: Simply put, a scope chain is an index created when a function is defined to find the value of a variable used. Its internal rule is to put the local variables of the function itself in At the front, put the variables in its own parent function second, put the variables in the next higher-level function further back, and so on until the global object. When the value of a variable needs to be queried in a function, the js interpreter will search in the scope chain, starting with the local variable at the front. If the corresponding variable is not found, it will search in the next-level chain. Once the variable is found, do not proceed further. If the required variable is not found at the end, the interpreter returns undefined.
2. Javascript's garbage collection mechanism: In Javascript, if an object is no longer referenced, then the object will be recycled by GC. If two objects refer to each other and are no longer referenced by a third party, then the two objects that refer to each other will also be recycled. Because function a is referenced by b, and b is referenced by c outside a, this is why function a will not be recycled after execution. Construct a closure. These variables will not be recycled by the memory collector. Only when the internal function is not called, the closure will be destroyed, and no variables referenced by the closure will be recycled by the next memory. Recycled at startup.
3. With closures, nested function structures can work
4. Use js closure to implement loop binding events

<html> 
<head> 
  <title>闭包</title> 
</head> 
<body> 
  <ul id="list"> 
    <li>第1条记录</li> 
    <li>第2条记录</li> 
    <li>第3条记录</li> 
    <li>第4条记录</li> 
    <li>第5条记录</li> 
    <li>第6条记录</li> 
  </ul> 
  <script type="text/javascript"> 
    function tt(nob) { 
      this.clickFunc = function() { 
        alert("这是第" + (nob + 1) + "记录"); 
      } 
    } 
    var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组 
    for (var i = 0; i<= list_obj.length; i++){ 
      console.log(list_obj[i]) 
      list_obj[i].onmousemove = function(){ 
        this.style.backgroundColor = "#cdcdcd"; 
      } 
      list_obj[i].onmouseout = function() { 
        this.style.backgroundColor = "#FFFFFF"; 
      } 
      //list_obj[i].onclick = function() { 
      // alert("这是第" + i + "记录"); //不能正常获取 alert出来的都是：“这是第6记录” 
      //} 
      var col = new tt(i); //调用tt函数 
      list_obj[i].onclick = col.clickFunc; //执行clickFunc函数 
    } 
  </script> 
</body> 
</html>

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Complete example of jquery drag and drop effect (with demo source code download)_jqueryNext article：Complete example of jquery drag and drop effect (with demo source code download)_jquery

See more

Detailed explanation of scope and closure in javascript_javascript skills

Related articles