登录  /  注册
首页 > web前端 > js教程 > 正文

关于Javascript的作用域 作用域链(图文教程,一目了然)

亚连
发布: 2018-05-18 15:00:26
原创
1383人浏览过

下面是我给大家整理的Javascript的作用域 作用域链,有兴趣的同学可以去看看。

1、Javascript没有代码块作用域的概念,局部作用域是针对函数来说的

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、如果不使用var声明的变量,默认为全局变量

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

3、Js中的作用域链

先看个简单的例子:只有一个函数对象,函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。

var a = "hello";  
      function fun04()  
      {  
           a = "world";  
            var b ="welcome";  
      }
登录后复制

作用域链的图:


注:图中省略了,Global Scope中的window,document等,每个函数对象中的arguments,this等均未画出。

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
登录后复制

观察上面代码,存在fun03,f,g三个函数对象。

下面是作用域链的图:

注:每个函数对象一个作用域链,这里直接画在了一起;对于变量的查找,先从链的0开始找。

函数对象 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技巧

以上就是关于Javascript的作用域 作用域链(图文教程,一目了然)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号