JavaScript浓厚之效果域链

by admin on 2019年11月19日

JavaScript 深入之作用域链

2017/05/14 · JavaScript
·
作用域链

原文出处: 冴羽   

已离开简书,原因参见
http://www.jianshu.com/p/0f12350a6b66。

未进入执行阶段之前,变量对象(VO)中的属性都不能访问!但是进入执行阶段之后,变量对象(VO)转变为了活动对象(AO),里面的属性都能被访问了,然后开始进行执行阶段的操作。

它们其实都是同一个对象,只是处于执行上下文的不同生命周期。

作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望能帮助大家更好的学习JavaScript。

前言

在《JavaScript深入之执行上下文栈》中讲到,当JavaScript代码执行一段可执行代码(executable
code)时,会创建对应的执行上下文(execution context)。

对于每个执行上下文,都有三个重要属性:

  • 变量对象(Variable object,VO)
  • 作用域链(Scope chain)
  • this

今天重点讲讲作用域链。

虽人微言轻,但也要有自己的态度。

当JavaScript代码执行一段可执行代码(executable
code)时,会创建对应的执行上下文(execution context)。

JavaScript作用域

作用域链

在《JavaScript深入之变量对象》中讲到,当查找变量的时候,会先从当前上下文的变量对象中查找,如果没有找到,就会从父级(词法层面上的父级)执行上下文的变量对象中查找,一直找到全局上下文的变量对象,也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

下面,让我们以一个函数的创建和激活两个时期来讲解作用域链是如何创建和变化的。

文章可以在我的 Github
https://github.com/mqyqingfeng/Blog
查看

对于每个执行上下文,都有三个重要属性:

任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

函数创建

在《JavaScript深入之词法作用域和动态作用域》中讲到,函数的作用域在函数定义的时候就决定了。

这是因为函数有一个内部属性[[scope]],当函数创建的时候,就会保存所有父变量对象到其中,你可以理解[[scope]]就是所有父变量对象的层级链。(注意:[[scope]]并不代表完整的作用域链!)

举个例子:

function foo() { function bar() { … } }

1
2
3
4
5
function foo() {
    function bar() {
        …
    }
}

函数创建时,各自的[[scope]]为:

foo.[[scope]] = [ globalContext.VO ]; bar.[[scope]] = [
fooContext.AO, globalContext.VO ];

1
2
3
4
5
6
7
8
foo.[[scope]] = [
  globalContext.VO
];
 
bar.[[scope]] = [
    fooContext.AO,
    globalContext.VO
];
  • 变量对象(Variable object,VO)
  • 作用域链(Scope chain)
  • this

1. 全局作用域(Global Scope)

函数激活

当函数激活时,进入函数上下文,创建VO/AO后,就会将活动对象添加到作用链的前端。

这时候执行上下文的作用域链,我们命名为Scope:

Scope = [AO].concat([[Scope]]);

1
Scope = [AO].concat([[Scope]]);

至此,作用域链创建完毕。

上一篇文章主要说的是变量对象

在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域:

捋一捋

以下面的例子为例,结合着之前讲的变量对象和执行上下文栈,我们来总结一下函数执行上下文中作用域链和变量对象的创建过程:

var scope = “global scope”; function checkscope(){ var scope2 = ‘local
scope’; return scope2; } checkscope();

1
2
3
4
5
6
var scope = "global scope";
function checkscope(){
    var scope2 = ‘local scope’;
    return scope2;
}
checkscope();

执行过程如下:

1.checkscope函数被创建,保存作用域链到[[scope]]

checkscope.[[scope]] = [ globalContext.VO ];

1
2
3
checkscope.[[scope]] = [
  globalContext.VO
];

2.执行checkscope函数,创建checkscope函数执行上下文,checkscope函数执行上下文被压入执行上下文栈

ECStack = [ checkscopeContext, globalContext ];

1
2
3
4
ECStack = [
    checkscopeContext,
    globalContext
];

3.checkscope函数并不立刻执行,开始做准备工作,第一步:复制函数[[scope]]属性创建作用域链

checkscopeContext = { Scope: checkscope.[[scope]], }

1
2
3
checkscopeContext = {
    Scope: checkscope.[[scope]],
}

4.第二步:用arguments创建活动对象,随后初始化活动对象,加入形参、函数声明、变量声明

checkscopeContext = { AO: { arguments: { length: 0 }, scope2: undefined
} }

1
2
3
4
5
6
7
8
    checkscopeContext = {
        AO: {
            arguments: {
                length: 0
            },
            scope2: undefined
        }
    }

5.第三步:将活动对象压入checkscope作用域链顶端

checkscopeContext = { AO: { arguments: { length: 0 }, scope2: undefined
}, Scope: [AO, [[Scope]]] }

1
2
3
4
5
6
7
8
9
    checkscopeContext = {
        AO: {
            arguments: {
                length: 0
            },
            scope2: undefined
        },
        Scope: [AO, [[Scope]]]
    }

6.准备工作做完,开始执行函数,随着函数的执行,修改AO的属性值

这篇讲讲执行上下文的作用域链条

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域,例如:

深入系列

JavaScript深入系列预计写十五篇左右,旨在帮大家捋顺JavaScript底层知识,重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念,与罗列它们的用法不同,这个系列更注重通过写demo,捋过程、模拟实现,结合ES规范等方法来讲解。

所有文章和demo都可以在github上找到。如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎star,对作者也是一种鼓励。

本系列:

  1. JavaScirpt 深入之从原型到原型链
  2. JavaScript
    深入之词法作用域和动态作用域
  3. JavaScript 深入之执行上下文栈
  4. JavaScript 深入之变量对象

    1 赞 1 收藏
    评论

图片 1

作用域链

当查找变量的时候,会先从当前上下文的变量对象中查找,如果没有找到,就会从父级(词法层面上的父级)执行上下文的变量对象中查找,一直找到全局上下文的变量对象,也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

当代码在一个环境中执行时,会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。

下面,让我们以一个函数的创建和激活两个时期来讲解作用域链是如何创建和变化的。

复制代码 代码如下:

函数创建

因为JavaScript是静态作用域,函数的作用域在函数定义的时候就决定了

这是因为函数有一个内部属性
[[scope]],当函数创建的时候,就会保存所有父变量对象到其中,你可以理解
[[scope]] 就是所有父变量对象的层级链

但是注意:[[scope]] 并不代表完整的作用域链!

这里一定主要 [[scope]]是函数的上层作用域链!!

实例:

function foo() {
    function bar() {
        ....
    }
}

函数创建的时候 各自的父级作用域链是这样的

foo.[[scope]] = [
    globalCotext.VO   //相当于父级是windows 变量对象
]
bar.[[scope]] = [
    fooContext.AO,    //bar() 的父级是foo 再父级是 全局  为活动对象
    globalContext.VO
];

函数体内的作用域链创建完毕

var authorName=”山边小溪”;
function doSomething(){
var blogName=””;
function innerSay(){
alert(blogName);
}
innerSay();
}
alert(authorName); //山边小溪
alert(blogName); //脚本错误
doSomething(); //
innerSay() //脚本错误 

函数激活

当函数激活时,进入函数上下文,创建 VO/AO
后,就会将活动对象添加到作用链的前端。

这时候执行上下文的作用域链,我们命名为 Scope:

将[AO]添加到作用域的最上面

Scope = [AO].concat([[Scope]]);

创建的时候已经将作用域链创建完毕

这里可能大部分人都不太看懂 我也是理解很久

通俗点解释(参考js高级程序设计P73)

当代码在一个环境中执行时,都会创建一个作用域链。
作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。整个作用域链的本质是一个指向变量对象的指针列表。作用域链的最前端,始终是当前正在执行的代码所在环境的变量对象。

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:

关于函数创建的执行环境 书上这么说的

执行环境是JavaScript中的重要概念之一。执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。
全局执行环境是最外围的一个执行环境。在Web浏览器中,全局执行环境被认为是window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建的。某个执行环境中的所有代码执行完毕后,该环境被销毁,保存在其中的所有变量和函数定义也随之销毁(全局执行环境知道应用程序退出–例如关闭网页或浏览器—时才会被销毁)
每个函数都有自己的执行环境。当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。而在函数执行后,栈将其环境弹出,把控制权返回给之前的执行环境。
执行环境的建立分为两个阶段:进入执行上下文(创建阶段)和执行阶段(激活/执行阶段)
(1)进入上下文阶段:发生在函数调用时,但在执行具体代码之前。具体完成创建作用域链;创建变量、函数和参数以及求this的值
(2)执行代码阶段:主要完成变量赋值、函数引用和解释/执行其他代码
总的来说可以将执行上下文看作是一个对象

EC = {
    VO:{/*函数中的arguments对象、参数、内部变量以及函数声明*/}
    this:{},
    Scope:{/*VO以及所有父执行上下文中的VO*/}

以下面的例子为例,结合着之前讲的变量对象和执行上下文栈,我们来总结一下函数执行上下文中作用域链和变量对象的创建过程:

var scope = "global scope";
function checkscope(){
    var scope2 = 'local scope';
    return scope2;
}
checkscope();
  1. checkscope函数被创建 保存作用域链到内部属性 [[scope]]

checkscope.[[scope]] = [
    globalContext.VO     //父级作用域为全局作用域
];
  1. 执行checkscope函数,创建checkscope函数上下文,checkscope函数执行上下文被压入执行上下文栈

ECStack = [
    checkscopeContext,    //进入执行上下文栈
    globalContext
];
  1. checkscope
    函数并不立刻执行,开始做准备工作,第一步:复制函数[[scope]]属性创建作用域链

checkscopeContext = {
    Scope: checkscope.[[scope]],       //获取作用域链
}
  1. 第二步:用 arguments
    创建活动对象,随后初始化活动对象,加入形参、函数声明、变量声明

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined 
    },
    Scope: checkscope.[[scope]],
}
  1. 第三步:将活动对象压入 checkscope 作用域链顶端

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    Scope: [AO, [[Scope]]]      //将当前函数的活动对象加入作用链
}

6.准备工作做完,开始执行函数,随着函数的执行,修改 AO 的属性值

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: 'local scope'   //执行代码的时候 赋值
    },
    Scope: [AO, [[Scope]]]
}

查找到 scope2 的值,返回后函数执行完毕,函数上下文从执行上下文栈中弹出

ECStack = [
    globalContext   //执行完毕 弹出栈
];

作为JavaScript里面很重要的概念 作用域链 可以参照JavaScript高级程序设计
P73 (执行环境与作用域) 好好理解

复制代码 代码如下:

function doSomething(){
var authorName=”山边小溪”;
blogName=””;
alert(authorName);
}
alert(blogName); //
alert(authorName); //脚本错误 

变量blogName拥有全局作用域,而authorName在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域

一般情况下,window对象的内置属性都都拥有全局作用域,例如window.name、window.location、window.top等等。

2. 局部作用域(Local Scope)

和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域成为函数作用域,例如下列代码中的blogName和函数innerSay都只拥有局部作用域。

复制代码 代码如下:

function doSomething(){
var blogName=””;
function innerSay(){
alert(blogName);
}
innerSay();
}
alert(blogName); //脚本错误
innerSay(); //脚本错误 

作用域链(Scope Chain)

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

当一个函数创建后,它的作用域链会被创建此函数的作用域中可访问的数据对象填充。例如定义下面这样一个函数:

复制代码 代码如下:

function add(num1,num2) {
var sum = num1 + num2;
return sum;

在函数add创建时,它的作用域链中会填入一个全局对象,该全局对象包含了所有全局变量,如下图所示(注意:图片只例举了全部变量中的一部分):

图片 2

函数add的作用域将会在执行时用到。例如执行如下代码:

复制代码 代码如下:

var total = add(5,10);

执行此函数时会创建一个称为“运行期上下文(execution
context)”的内部对象,运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链,用于标识符解析,当运行期上下文被创建时,而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。

这些值按照它们出现在函数中的顺序被复制到运行期上下文的作用域链中。它们共同组成了一个新的对象,叫“活动对象(activation
object)”,该对象包含了函数的所有局部变量、命名参数、参数集合以及this,然后此对象会被推入作用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。新的作用域链如下图所示:

图片 3

在函数执行过程中,没遇到一个变量,都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部,也就是从活动对象开始搜索,查找同名的标识符,如果找到了就使用这个标识符对应的变量,如果没找到继续搜索作用域链中的下一个对象,如果搜索完所有对象都未找到,则认为该标识符未定义。函数执行过程中,每个标识符都要经历这样的搜索过程。

作用域链和代码优化

从作用域链的结构可以看出,在运行期上下文的作用域链中,标识符所在的位置越深,读写速度就会越慢。如上图所示,因为全局变量总是存在于运行期上下文作用域链的最末端,因此在标识符解析的时候,查找全局变量是最慢的。所以,在编写代码的时候应尽量少使用全局变量,尽可能使用局部变量。一个好的经验法则是:如果一个跨作用域的对象被引用了一次以上,则先把它存储到局部变量里再使用。例如下面的代码:

复制代码 代码如下:

function changeColor(){

document.getElementById(“btnChange”).onclick=function(){

document.getElementById(“targetCanvas”).style.backgroundColor=”red”;

};

这个函数引用了两次全局变量document,查找该变量必须遍历整个作用域链,直到最后在全局对象中才能找到。这段代码可以重写如下:

复制代码 代码如下:

function changeColor(){

var doc=document;

doc.getElementById(“btnChange”).onclick=function(){

doc.getElementById(“targetCanvas”).style.backgroundColor=”red”;

};

这段代码比较简单,重写后不会显示出巨大的性能提升,但是如果程序中有大量的全局变量被从反复访问,那么重写后的代码性能会有显著改善。

改变作用域链

函数每次执行时对应的运行期上下文都是独一无二的,所以多次调用同一个函数就会导致创建多个运行期上下文,当函数执行完毕,执行上下文会被销毁。每一个运行期上下文都和一个作用域链关联。一般情况下,在运行期上下文运行的过程中,其作用域链只会被
with 语句和 catch 语句影响。

with语句是对象的快捷应用方式,用来避免书写重复代码。例如:

复制代码 代码如下:

function initUI(){

with(document){

var bd=body,

links=getElementsByTagName(“a”),

i=0,

len=links.length;

while(i < len){

update(links[i++]);

}

getElementById(“btnInit”).onclick=function(){

doSomething();

};

}

这里使用width语句来避免多次书写document,看上去更高效,实际上产生了性能问题。

当代码运行到with语句时,运行期上下文的作用域链临时被改变了。一个新的可变对象被创建,它包含了参数指定的对象的所有属性。这个对象将被推入作用域链的头部,这意味着函数的所有局部变量现在处于第二个作用域链对象中,因此访问代价更高了。如下图所示:

图片 4

因此在程序中应避免使用with语句,在这个例子中,只要简单的把document存储在一个局部变量中就可以提升性能。

另外一个会改变作用域链的是try-catch语句中的catch语句。当try代码块中发生错误时,执行过程会跳转到catch语句,然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部,函数的所有局部变量将会被放在第二个作用域链对象中。示例代码:

复制代码 代码如下:

try{

doSomething();

}catch(ex){

alert(ex.message); //作用域链在此处改变

}

请注意,一旦catch语句执行完毕,作用域链机会返回到之前的状态。try-catch语句在代码调试和异常处理中非常有用,因此不建议完全避免。你可以通过优化代码来减少catch语句对性能的影响。一个很好的模式是将错误委托给一个函数处理,例如:

复制代码 代码如下:

try{

doSomething();

}catch(ex){

handleError(ex); //委托给处理器方法

优化后的代码,handleError方法是catch子句中唯一执行的代码。该函数接收异常对象作为参数,这样你可以更加灵活和统一的处理错误。由于只执行一条语句,且没有局部变量的访问,作用域链的临时改变就不会影响代码性能了。

您可能感兴趣的文章:

  • JS 作用域与作用域链详解
  • Javascript变量的作用域和作用域链详解
  • JavaScript 作用域链解析
  • 深入理解JavaScript高级之词法作用域和作用域链
  • 老生常谈原生JS执行环境与作用域
  • 浅谈JavaScript
    执行环境、作用域及垃圾回收
  • javascript执行环境及作用域详解
  • 谈一谈js中的执行环境及作用域
  • 深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
  • javascript中关于执行环境的杂谈
  • js
    函数的执行环境和作用域链的深入解析
  • 浅谈javascript中执行环境(作用域)与作用域链

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图