JavaScript之作用域链

本文深入探讨JavaScript中的作用域链概念,解释其如何控制变量的可见性和生命周期,以及与闭包、this和原型链的关系。

本文共 1200 字,读完只需 4 分钟

概述

JavaScript 中的可执行代码有其执行上下文,在执行上下文中,有三个重要的元素:

  1. 变量对象(variable object)
  2. 作用域链(scope chain)
  3. this

其中,变量对象是上下文中变量声明和函数声明的集合。
this 表示是变量对象被谁所持有,this 总是指向当前的上下文。

而作用域链则控制着变量与函数的可见性和生命周期。

一、作用域链

JavaScript 引擎在查找变量标识符对应的绑定(binding)时,会从最内部的作用域向外冒泡开始查找,如果内部作用域没找到,就在父作用域查找,直到找到第一个匹配的标识符时就停止,这就是 JS 中的作用域链。

var name = "global";
function func1() {
    var name = "outter";
    function func2() {
        var name = "inner";
        console.log(name);
    }
    func2();
}

func1() // "inner"
复制代码

console.log(name)语句中,JS 在查找 name变量标识符的绑定(binding)时,会从 func2 内部向外部函数查找变量声明,直到最顶层。这里最后只取了最近的 "inner"值,找到了第一个就停止查找,就叫做“遮蔽效应”。

二、创建和执行阶段

每个函数有一个内部属性 [[scope]],同时作用域链与执行上下文有关,函数定义的时刻 scope chain 链接所以父级上下文当中的变量对象。

var a = 1;
var b = 3;
function foo(){
  var a = 2;
  bar(4);
  function bar(param){
    console.log(a+param)
  }
}


foo.[[scope]] = [
  globalContext.VO // a, b
];

bar.[[scope]] = [
    fooContext.AO, // a
    globalContext.VO // a, b
];
复制代码

再来:

函数的执行有创建阶段和执行阶段,不同时刻变量对象的值不一样。

函数创建阶段 一般情况下,作用域链就是父级变量对象(variable object)(作用域链的顶部)、函数自身变量VO或活动对象(activation object)组成了一个列表。

var a = 2;
function foo() {
    var b = 3;
    console.log(a+b);
}
foo() // 5

复制代码

我们当然知道最后结果输出 5,但是在创建阶段却有一个有趣的事情: 首先,a 变量属于全局环境中的变量,b 属于 foo 函数环境中的变量,在创建阶段,二者的值都为 undefined;

globalContext.VO = {
    a: undefined
}

fooContext.VO = {
    b: undefined
}
复制代码

可以看到,foo 上下文中并不包含 a, foo 就是通过作用域找到的 a。即:

fooContext = {
    [[scope]]: {
        // 父级的变量对象
    }
}
复制代码

当前执行上下文的 [[scope]], 包含了所有父级上下文中的变量对象列表。

函数执行阶段

当进入函数执行阶段后,函数上下文就会将当前执行上下文中的变量对象,转化为活动对象,并将其放在作用域链的最前端,最后修改变量的值。

scope = [AO].contat([[scope]])
复制代码

所以最后寻找变量的时候,总是从最内部的执行上下文开始,然后再向外冒泡查找。

三、延长作用域链

在 JS 中,withtry catch关键字能延长作用域链,对 with 来说,将会指定一个只读对象添加到作用域链中。

对 catch 来说,会异常对象推入一个可变对象并置于用域的头部。

withtry catch 都增加了当前作用域可以访问的变量对象数量,所以看做延长了作用域链。

四、作用域链和原型链

作用域链的作用是用于查找标识符,沿着作用域链向外冒泡查找,找到第一个就停下。

而原型链用于对象的属性查找,通用原型链想链的顶端查找,如果找到该属性会停止搜索。如果没有找到,就默认为 undefined。

五、闭包

变量在执行完毕后,就会在内存中被垃圾回收,但是如果此时,变量在其他作用域中,或者说加入了其他上下文的作用域链后,变量就能够继续被访问,这种行为就叫做闭包。

function foo() {
    var a = 1;
    function bar (){
        return a;
    }
    return bar;
}

var other = foo();
other();  // 1
复制代码

foo 函数执行完后,内部变量本应该被清空,但是由于返回的函数引用了变量 a ,变量 a 得以继续访问,就构成了闭包。

总结

作用域链是由所有父级上下文的变量对象所构成的列表,用于查找标识符,从内部执行上下文查找,直到全局上下文。

后面的文章会继续讲解与执行上下文,作用域有关的 this 和闭包,尽请期待吧~

欢迎关注我的个人公众号“谢南波”,专注分享原创文章。

掘金专栏 JavaScript 系列文章
  1. JavaScript之变量及作用域
  2. JavaScript之声明提升
  3. JavaScript之执行上下文
  4. JavaScript之变量对象
  5. JavaScript原型与原型链
  6. JavaScript之作用域链
  7. JavaScript之闭包
  8. JavaScript之this
  9. JavaScript之arguments
  10. JavaScript之按值传递
  11. JavaScript之例题中彻底理解this
  12. JavaScript专题之模拟实现call和apply
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值