作用域链

JavaScript 开发进阶:理解 JavaScript 作用域和作用域链

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

JavaScript作用域

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

  1.  全局作用域(Global Scope)

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

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


1

2

3

4

5

6

7

8

9

10

11

12

var authorName="山边小溪";

function doSomething(){

    var blogName="梦想天空";

    function innerSay(){

        alert(blogName);

    }

    innerSay();

}

alert(authorName); //山边小溪

alert(blogName); //脚本错误

doSomething(); //梦想天空

innerSay() //脚本错误

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


1

2

3

4

5

6

7

8

function doSomething(){

    var authorName="山边小溪";

    blogName="梦想天空";

    alert(authorName);

}

doSomething(); //山边小溪

alert(blogName); //梦想天空

alert(authorName); //脚本错误

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

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

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

  1.  局部作用域(Local Scope)  

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


1

2

3

4

5

6

7

8

9

function doSomething(){

    var blogName="梦想天空";

    function innerSay(){

        alert(blogName);

    }

    innerSay();

}

alert(blogName); //脚本错误

innerSay(); //脚本错误

作用域链(Scope Chain)

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

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


1

2

3

4

function add(num1,num2) {

    var sum = num1 + num2;

    return sum;

}

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

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


1

var total = add(5,10);

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

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

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

作用域链和代码优化

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


1

2

3

4

5

function changeColor(){

    document.getElementById("btnChange").onclick=function(){

        document.getElementById("targetCanvas").style.backgroundColor="red";

    };

}

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


1

2

3

4

5

6

function changeColor(){

    var doc=document;

    doc.getElementById("btnChange").onclick=function(){

        doc.getElementById("targetCanvas").style.backgroundColor="red";

    };

}

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

改变作用域链

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

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

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

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


1

2

3

4

5

try{

    doSomething();

}catch(ex){

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

}

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


1

2

3

4

5

try{

    doSomething();

}catch(ex){

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

}

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

参考资料

1. High.Performance.JavaScript, Nicholas.C.Zakas

2. Explaining JavaScript Scope And Closures, Robert Nyman

3. ECMAScript Language Specification, bclary.com

时间: 05-16

作用域链的相关文章

JavaScript作用域链

JavaScript作用域链 之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包,觉得写得很清晰,可以简单理解闭包产生原因,但看评论都在说了解了作用域链和活动对象才能真正理解闭包,起初不以为然,后来在跟公司同事交流的时候发现作用域和执行环境确实很重要,又很基础,对理解JavaScript闭包很有帮助,所以在写一篇对作用域和执行环境的理解. 作用域 作用域就是变量和函数的可访问范围,控制着变量和函数的可见性与生命周期,在JavaScript中变量的作用域有全局作用域和局部作用域. 单纯

js的变量,变量作用域,作用域链

变量声明: 使用var关键字声明,如果使用没有声明的变量,则JS会自动声明此变量根据变量作用域.如果变量只声明为赋值,则此时值是undefined.重复声明变量,在JS不会报错,会依据最后一次的声明来处理变量. 变量作用域: 一个变量的作用域是,程序代码定义这个变量的区域,全局变量在程序代码内任何地方都可以访问. 包括在{}函数,对象内的变量(属性)成为局部变量. 在函数体内定义的变量成为局部变量,作用域也是局部,函数参数也是局部变量. 他们只在函数体内有意义. 在函数体内,局部变量优先于全局变

JavaScript 作用域链

作用域链 当查找变量的时候,会先从当前上下文的变量对象中查找,如果没有找到,就会从父级(词法层面上的父级)执行上下文的变量对象中查找,一直找到全局上下文的变量对象,也就是全局对象.这样由多个执行上下文的变量对象构成的链表就叫做作用域链. 函数创建 这是因为函数有一个内部属性[[scope]],当函数创建的时候,就会保存所有父变量对象到其中,你可以理解[[scope]]就是所有父变量对象的层级链.(注意:[[scope]]并不代表完整的作用域链!) 举个栗子: function foo() { f

作用域、作用域链、闭包

作用域.作用域链 一.Js以前没有块级作用域,不过在ES6中有let了. 二.Js使用函数作用域 function aaa(){ var a = "a"; } console.log(a);//报错 三.声明提前 console.log(aaa)//报错 console.log(aaa);//undefined 声明未定义 var aaa; console.log(aaa); //undefined 声明未定义 var aaa = "aaa"; 四.Js的作用域链

JavaScript中的作用域链原理

执行环境 作用域链的形成与执行环境(Execution Environment)相关,在JavaScript当中,产生执行环境有如下3中情形: 1 进入全局环境 2 调用eval函数 3 调用function 在一个执行环境A上可以创建执行环境B,执行环境B又可以创建执行环境C...,这一系列的执行环境构成执行环境栈,最新创建的执行环境位于栈顶(栈底永远是全局执行环境),当栈顶执行环境结束之后(与之相关的代码执行结束)就会被弹出站外,底下的执行环境就会成为新的栈顶.如下图所示: 一个执行环境由3

JS_ 垃圾回收、变量与属性、作用域链

1.垃圾回收 js的垃圾回收机制不同于java,c等语言需要手工回收,js中的垃圾回收是自动启动的,大致过程:js解释器会判断一个对象是否是可达的,即是否有变量指向它,没有,则启动回收机制,释放该对象占用的内存,eg: 1 var s = "hello world"; 2 var s2 = s.toUpperCase();//创建新字符串:"HELLO WORLD" 3 s2 = s;//"hello world"没有变量指向,占用内存被释放 这

方法链、作用域链和原型链(三)——原型链

每一个javascript对象(null除外)都有一个prototype属性,这个属性引用了一个对象,即原型对象,都从原型继承属性. 所有通过对象直接量创建的对象都具有同一个原型对象,并可以通过javascript代码Object.prototype获得对原型对象的引用.通过关键字new和构造函数调用创建的对象的原型就是构造函数的prototype属性的值.因此,使用{}和通过new Object()创建的对象,都继承自Object.prototype. 没有原型的对象不多,Object.pro

JS高级心法——作用域链

首先我们来看两个js中的代码: <script type="text/javascript"> var c=5; function t1(){ var d=6 function t2(){ var e=7 alert(c+d+e); } t2(); } t1(); </script> 这个你很快会得出结论:18: <script language="javascript" type="text/javascript"

JS的作用域链与原型链

来一波,好记性不如烂笔头. 这两条链子可是很重要的. 作用域链 当执行一段JS代码(全局代码或函数)时,JS引擎会创建为其创建一个作用域又称为执行上下文(Execution Context),在页面加载后会首先创建一个全局的作用域,然后每执行一个函数,会建立一个对应的作用域,从而形成了一条作用域链.每个作用域都有一条对应的作用域链,链头是全局作用域,链尾是当前函数作用域.作用域链的作用是用于解析标识符,当函数被创建时(不是执行),会将this.arguments.命名参数和该函数中的所有局部变量