理解了作用域链,闭包就不难理解了,所以本文主要谈一谈我对作用域链的理解。
 
关于JavaScript中变量的作用域,全局变量在程序中始终都有定义。局部变量在声明它的函数体内以及其内部所嵌套的函数内始终是有定义的。那么JavaScript是如何管理这些全局变量和局部变量作用域的呢,这就涉及到了作用域链。
作用域链相当于一个对象链表。链表的上的对象定义了这段script代码中的变量。如果要查找一个变量x,则会从这个作用域链的当前有权限访问的最底层对象开始找起,如果这个对象有一个名叫x的属性,则直接使用这个属性的值,如果没有找到继续向外层找其他的对象上是否有这个属性,直到找到作用域链的尾部,如果还没有,就返回undefined。
这里的“里层,外层”就是内部函数对包裹它的函数是不可访问的,提前说明一下有利于之后的理解。
 

在如下所示的JavaScript顶层代码中(不包含任何函数内定义的代码):
 <script>
'use strict';
var a = "";
function hello(){ }
</script>

它的作用域链只包含一个全局对象,作用域链组成如下:

在这段script代码中,由于只有全局变量,所以只有一个全局作用域链。当我们需要寻找a变量或者是hello函数的时候,就会去这个全局作用域链上找可访问的最底层对象(也是仅有的一个对象)——全局对象,然后在他的属性中找是否有a属性或者hello属性。


以上我们看了只有全局作用域链的情况,下面我们看函数体内有变量的情况,这时候就变成了两个作用域链,代码如下所示:

 <script>
'use strict';
var a = "";
function hello(){
var b = "";
console.log(b);
}
console.log(a);
hello();
</script>

此时我们注意到,hello函数的内部也定义了一个变量b,它的作用域链就变成了如下所示:

在这段script代码中,当执行到“console.log(a);”时,因为console.log()在全局环境之下执行,所以会直接去全局对象(可访问的最底层对象)中找名称为a的属性。那么如果我们在全局环境中加一句“console.log(b);”呢,他还是去全局对象中找,但是会发现找不到,返回undefined,因为hello函数内部的变量b是局部变量,它只有在hello函数局部对象中有。
所以当代码执行到“hello()”时,开始执行hello函数,执行到hello函数内部的“console.log(b);”时,就会先去hello函数局部对象中查找,如果找不到,才会去全局对象中查找,当然它在局部对象中就找到了。
那么如果我们在hello函数内部加一句“console.log(a);”它会先在局部对象中找,如果找不到就去全局对象中找。
所以如果我们继续在hello函数内部再定义一个函数inside(),同理,作用域链上又会对一个inside函数局部对象。它内部定义的变量同样是只存在于inside函数局部对象上,也就是仅inside函数内部可见。这种特性为之后的闭包奠定了基础。
 

我们再看下面一段代码:
 <script>
'use strict';
var scope = "global scope";
function checkscope(){
var scope = "local scope";
function f(){
return scope;
}
return f;
}
checkscope()();
</script>

最后的checkscope()();会返回什么呢?答案是“local scope”。这个地方如果想要理解,就必须借助作用域链。首先我们看一下这段代码的作用域链:

我们把“checkscope()()”分成两部分执行:
    第一步:执行checkscope(),返回f函数,注意是函数不是结果。
    第二步:执行f()函数,这时候我们发现函数f()是在全局环境下执行的,所以理所当然的想到返回“global scope”。其实不是这样子,从作用域链就能看出,f函数在“checkscope函数局部对象”上,所以它的可访问的最底层对象是“checkscope函数局部对象”,所以执行到“return scope”时找这个scope变量时会首先在checkscope函数局部对象上找,立马就找到了,所以结果返回“local scope”,假设找不到,才回去全局对象上找。
注意,作用域链只能由里往外找,不能由外往里找,这也是“闭包”实现原则。到此,如果能理解作用域链,则闭包也就不难理解了。
 
 

有错误的地方欢迎指出讨论!

理解JavaScript中的作用域链的更多相关文章

  1. 深入理解JavaScript中的作用域和上下文

    介绍 JavaScript中有一个被称为作用域(Scope)的特性.虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,我会尽我所能用最简单的方式来解释作用域.理解作用域将使你的代码脱颖而出,减 ...

  2. 深入理解JavaScript中的作用域、作用域链和闭包

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qappleh/article/detai ...

  3. 理解JavaScript中的作用域和上下文

    JavaScript对于作用域(Scope)和上下文(Context)的实现是这门语言的一个非常独到的地方,部分归功于其独特的灵活性. 函数可以接收不同的的上下文和作用域.这些概念为JavaScrip ...

  4. 理解JavaScript中的作用域

     什么是变量,什么是作用域? 变量:简单来说就是在特定时间内保存特定值的一个名字而已,由于不存在定义某个变量必须要保存某种数据类型值的规则,所以变量的值及其数据类型可以在脚本生命周期内任意改变,变量可 ...

  5. JavaScript中的作用域链原理

    执行环境 作用域链的形成与执行环境(Execution Environment)相关,在JavaScript当中,产生执行环境有如下3中情形: 1 进入全局环境 2 调用eval函数 3 调用func ...

  6. 理解 JavaScript 中的 this

    前言 理解this是我们要深入理解 JavaScript 中必不可少的一个步骤,同时只有理解了 this,你才能更加清晰地写出与自己预期一致的 JavaScript 代码. 本文是这系列的第三篇,往期 ...

  7. 深入理解javascript中执行环境(作用域)与作用域链

    深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...

  8. 认识Javascript中的作用域和作用域链

    作用域 只要写过java或者c#等语言的同学来说,相信一定能理解作用域的概念,在作用域的范围中,我们可以使用这个作用域的变量,对这个变量进行各种操作.可是,当使用Javascript的时候,相信很多的 ...

  9. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

随机推荐

  1. JavaScript--表单处理(27)

    一 表单介绍 // 在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型; // HTMLFormElement继承 ...

  2. DOM(JavaScript高程笔记)

    一.节点层次 1.Node类型 if (someNode.nodeType == 1){ // 适用于所有浏览器 alert("Node is an element."); } N ...

  3. django-缓存的应用

    为什么需要缓存? django中文文档: 通常,计算值是昂贵的(即资源匮乏和缓慢),因此将值保存到可快速访问的缓存中可以有巨大的好处,为下一次需要做好准备. 这是一个足够重要和强大的技术,Django ...

  4. 解决linux下安装nodejs后npm未成功安装的问题

    1.下载npm软件包 点击链接进入下载页面:npm下载 2.下载完成后将压缩包放到家目录下就可以(也可以放到其他地方) 3.解压 tar -zxvf 压缩包名称,解压后你会得到一个文件夹,进入后是这样 ...

  5. JS 正则截取字符串

    1.js截取两个字符串之间的内容: varstr = "aaabbbcccdddeeefff"; str = str.match(/aaa(\S*)fff/)[1]; alert( ...

  6. tar.xz文件的解压

    xz是绝大数linux默认就带的一个压缩工具. 压缩包xz格式的居然比7z还要小. 不过xz也有一个坏处就是压缩时间比较长,比7z压缩时间还长一些.不过压缩是一次性的,所以可以忽略. xz压缩文件方法 ...

  7. span元素文字自动换行

    <span>加上display:inline-block,成功实现了想要的效果.但又有一个问题,纯连续字母和数字不会换行,最后加上word-wrap: break-word强制自动换行搞定 ...

  8. Android性能优化系列之APK终极瘦身策略

    第1条:使用一套资源 这是最基本的一条规则,但非常重要. 对于绝大对数APP来说,只需要取一套设计图就足够了.鉴于现在分辨率的趋势,建议取720p的资源,放到xhdpi目录. 相对于多套资源,只使用7 ...

  9. Ajax 小实例

    1.urls.py url(r'^jiafa', views.jiafa), 2.views.py def jiafa(request): if request.method == "GET ...

  10. JS中的“==”符号及布尔值转换规则

    what are the rules for how == converts types? 关于"=="的比较规则: 1. Comparing numbers and string ...