查看原文
其他

【JS. ES5重点笔记】执行环境和作用域

叉烧ZBayes CS的陋室 2022-08-08

前情提要:

【JS. ES5重点笔记】数据类型

参考文献:

  • Nicholas C.Zakas 《JavaScript》高级程序设计

仅为个人学习参考文献的内容记录的笔记。存在部分直接拿来的成分。不得不说,这本书写得很透彻。另外,我在segment和有道云笔记上已经放了这篇内容,觉得这份文档的阅读体验不好的,可以移步阅读原文(有道云笔记)或者这个链接:https://segmentfault.com/a/1190000009097614

引言和基本概念

执行环境是JS中很重要的概念,其定义了变量或者函数访问其他数据的权限,决定了其各自的行为。

当代码在一个环境中执行时,会创建变量对象的一个作用域链(scope chain)。作用域链是为了保证对执行环境有权访问的所有变量和函数的有序访问的。作用域链的前端,是当前执行的代码所在环境的变量对象。当环境为函数,会将其活动对象(activation object)作为变量对象。活动对象在最开始时只包含一个变量,即 arguments 对象(这个对象在全局环境中是不存在的)。作用域链中的下一个变量对象来自包含(外部)环境,而再下一个变量对象则来自下一个包含环境。这样,一直延续到全局执行环境;全局执行环境的变量对象始终都是作用域链中的最后一个对象。

标识符解是沿着作用域链一级一级往下拓展的,而搜素则是从作用域链的前端开始逐级回溯,直到找到标识符为止(找不到的话当然就报错了)。

下面请看简单的事例:

var color = "blue";


function changeColor(){

    if (color === "blue"){

        color = "red";

    } else {

        color = "blue";

        }

}


changeColor();


alert("Color is now " + color);


通过运行可以发现,存行结果是红色,运行changecolor时,会去搜索color的值,在函数体内,未发现color的定义,于是会往外找,结果找到了color="blue"的定义,于是就会访问,获取,修改。

var color = "blue";


function changeColor(){

    var anotherColor = "red";


    function swapColors(){

        var tempColor = anotherColor;

        anotherColor = color;

        color = tempColor;

        

        //color, anotherColor, and tempColor are all accessible here

    }


    //color and anotherColor are accessible here, but not tempColor        

    swapColors();

}


changeColor();


//anotherColor and tempColor aren't accessible here, but color is

alert("Color is now " + color);


上面涉及了3个执行环境,全局、changecolor()和swapColors三种。其中全局变量是color和anotherColor。changeColor()的局部环境中有一个名为anotherColor 的变量和一个名为swapColors()的函数,但它也可以访问全局环境中的变量 color。 swapColors()的局部环境中有一个变量tempColor,该变量只能在这个环境中访问到。无论全局环境还是 changeColor()的局部环境都无权访问 tempColor。然而,在 swapColors()内部则可以访问其他两个环境中的所有变量,因为那两个环境是它的父执行环境。

延长作用域链

下列两种情况可以延长作用域链:

  • try-catch语句的catch语句块

  • with语句

这两个语句都会在作用域链的前端添加一个变量对象。对 with 语句来说,会将指定的对象添加到作用域链中。对 catch 语句来说,会创建一个新的变量对象,其中包含的是被抛出的错误对象的声明。

function buildUrl() {

    var qs = "?debug=true";


    with(location){

        var url = href + qs;        

    }


    return url;

}


var result = buildUrl();

alert(result);


with接受了location对象,于是变量对象就是location的所有属性和方法,变量对象就被添加在作用域链前端。buildUrl()函数中有局部变量qs。with引用变量href时,即location.href,能够被找到。引用变量qs,指的则是buildUrl()函数内部的qs。至于 with 语句内部,则定义了一个名为 url 的变量,因而 url 就成了函数执行环境的一部分,所以可以作为函数的值被返回。

没有块级的作用域

JS中并没有块级作用域。在类C语言中是有的,如条件语句,循环语句之类,大括号内属于一种作用域,但是在JS中并没有。

if (true) {

var color = "blue";

}


alert(color); //"blue"


显然,color在条件语句的大括号中,var定义的也是局部变量,但实际上,大括号外面能访问到想访问的color。

声明变量

使用 var 声明的变量会自动被添加到最接近的环境中。而且仅限于该环境。反之,如果该声明没有带,var会被自动认为是全局变量。

function add(num1, num2) {

    var sum = num1 + num2;

    return sum;

}


var result = add(10, 20); //30

alert(sum);


这里报错了,因为sum在add函数中为局部变量,从大括号外面并不能访问到sum。如果改成下面这样,就能正常运行。

function add(num1, num2) {

    sum = num1 + num2;

    return sum;

}


var result = add(10, 20); //30

alert(sum); //30


查询标识符

当在某个环境中需要访问一个标识符时,是通过搜索来确定该标识符实际代表什么的。搜索过程从作用域链的前端开始,向上逐级查询与给定名字匹配的标识符。如果在局部环境中找到了该标识符,搜索过程停止,变量就绪。如果在局部环境中没有找到该变量名,则继续沿作用域链向上搜索。搜索过程将一直追溯到全局环境的变量对象。如果在全局环境中也没有找到这个标识符,则意味着该变量尚未声明,会报错。

var color = "blue";


function getColor(){

    return color;

}


alert(getColor()); //"blue"


alert中调用了getcolor()函数,这个函数中访问了color,然而函数中并没有声明color,于是会向上找color,在全局中找到了,于是就取值。

var color = "blue";


function getColor(){

    var color = "red";

    return color;

}


alert(getColor()); //"red"

alert(color);//"blue"



getcolor函数体内有color的声明,而且是局部的,所以并不会覆盖全局的blue。在getcolor内部,color就是内部声明的color,一旦搜索到定义之后就不会再搜索,所以就是red;而外面的color则并不会因为里面的color是red而改变,所以还是blue。

补充: 变量查询也不是没有代价的。很明显,访问局部变量要比访问全局变量更快,因为不用向上搜索作用域链。 JavaScript 引擎在优化标识符查询方面做得不错,因此这个差别在将来恐怕就可以忽略不计了。


下期精彩预告:

深度学习和神经网络的数学基础清单级介绍

名字有点长,但是内容已经表现出来,数学知识涉及的不少,下次我会给大家简单介绍一下,学习深度学习或者神经网络时需要什么数学上的预备知识。



微信:zgr950123
QQ:545281848欢迎关注

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存