About the Scope of Javascript Scope Chain (Picture and text tutorial, clear at a glance)

The following is the scope chain of Javascript that I have compiled for you. Interested students can take a look.

1. Javascript does not have the concept of code block scope. Local scope is for functions.

function fun()  
{  
    for( var i = 0 ; i < 10 ; i++)  
    {}  
    //如果在Java中i此时应当属于未声明的变量，但是Js中i的作用域依然存在  
    console.log(i);//10  
  
    if(true)  
    {  
        var b = "helloworld";  
    }  
    console.log(b);//helloworld  
}  
fun();

2. If it is not declared using var Variables, the default is global variables

function fun02()  
{  
    a = "helloworld";  
    var b = "welcome";  
}  
fun02();  
console.log(a); //     helloworld  
console.log(b); //   b is not defined

3. Scope chain in Js

Let’s look at a simple example first: there is only one function object, function object Like other objects, it has properties that can be accessed through code and a series of internal properties that are only accessible to the JavaScript engine. One of the internal properties is [[Scope]], defined by the ECMA-262 standard third edition. This internal property contains the collection of objects in the scope in which the function is created. This collection is called the scope chain of the function, which determines Which data can be accessed by the function.

var a = "hello";  
      function fun04()  
      {  
           a = "world";  
            var b ="welcome";  
      }

Scope chain diagram:

Note: The window, document, etc. in Global Scope are omitted in the diagram, and each function The arguments, this, etc. in the object are not drawn.

function fun03()  
      {  
          var a = 10;  
          return function(){  
              a*= 2 ;  
              return a ;  
          };  
      }  
  
      var f = fun03();  
      f();  
      var x = f();  
     console.log(x);  //40  
  
      var g = fun03();  
      var y = g();  
      console.log(y); //20

Observe the above code, there are three function objects fun03, f, and g.

The following is a diagram of the scope chain:

Note: Each function object has a scope chain, which is drawn directly together here; For variable search, start from 0 in the chain.

函数对象 f 在代码中执行了2 次，所以a*2*2 = 40 ； 函数对象 g 在代码中执行了1次， 所以 a *2 = 20 ; 

4、闭包

上面的例子可以看到，在fun03执行完成后，a的实例并没有被销毁，这就是闭包。个人对闭包的理解是：函数执行完成后，函数中的变量没有被销毁，被它返回的子函数所引用。

下面以一个特别经典的例子，同时使用作用域链解析：

window.onload = function()  
        {  
            var elements = document.getElementsByTagName("li");  
            for(var i = 0; i < elements.length ; i ++)  
            {  
                elements[i].onclick = function()  
                {  
                    alert(i);  
                }  
            }  
  
        }

相信上面的代码肯定大家都写过，本意是点击每个li，打印出它们的索引，可是事实上打印出的都是elements.length。这是为什么呢？

看下上面的简易的作用域链（省略了很多部分，主要是理解），此时每个onclick函数的i，指向的都是 onload 中的i 此时的 i = element.length.

下面看解决方案：

window.onload = function ()  
       {  
           var elements = document.getElementsByTagName("li");  
           for (var i = 0; i < elements.length; i++)  
           {  
               (function (n)  
               {  
                   elements[n].onclick = function ()  
                   {  
                       alert(n);  
                   }  
               })(i);  
           }  
  
       }

在onclick函数的外层，包了一层立即执行的函数，所以此时的n指向的 n 是立即执行的，所有都是1~elements.length 。

上面是我整理给大家的Javascript的作用域 ，希望今后会对大家有帮助。

相关文章：

详解JavaScript运行机制以及概念分析

详解javascript中this属性

JS实现访问DOM对象指定节点的方法示例_javascript技巧

The above is the detailed content of About the Scope of Javascript Scope Chain (Picture and text tutorial, clear at a glance). For more information, please follow other related articles on the PHP Chinese website!