【JS】全面分析作用域与作用域链

1.什么是作用域?

在ECMAScript中的定义是变量的适用范围。我们了解在js中变量分为两类局部变量和全局变量,全局变量的作用域是全局的,在函数内部声明的变量我们称之为局部变量,作用域是局部的只在函数体内有意义。

2.彼此独立的的区间不能互相访问,全局变量都可以访问,外层函数不能访问里层的,里层可以访问外层的,越往里权限越高。

3.每个js对象都有属性,有些可以被我们访问,有些不行,这些属性仅供js引擎存取,我们要讲的[[scope]]就是这样的一个属性,它指的就是我们所说的作用域,其中存储了运行期上下文的集合。

4.当函数在执行前的一刻,会创建一个称之为执行期上下文的内部对象,一个执行期上下文定义了一个函数执行时的环境,函数每次执行的上下文都是独一无二的,因为在函数执行完后这个内部对象将被销毁。而[[scope]]中存储的执行期上下文对象的集合,呈链式链接我们称之为作用域链。

 function a(){
   function b(){
       var bb=234;
       aa=0;
   }
   var aa =123;
   b();
   console.log(aa);
}
var glob =100;
a();

要解决这个问题我们只需画出其作用域链即可。

按照上文,当a函数被定义时,会创造一个执行期上下文,我们在scope中进行存储

a.[[scope]] ->scope chain[0]->Global Object 这个Global Object我会在编写预编译时具体解释,你现在只需知道这是全局作用域即可 里面存储了两个全局变量 函数a和变量glob;

下一步是什么,不是b的定义,而是a的执行,a执行之后才有b的定义不是吗。在a函数执行时我们可以再添加一个执行期上下文再就是a.[[scope]]->scope chain[0] ->Activation Object  (这个就是a函数的局部作用域)我们可以发现里面也有两个变量函数b和变量aa 而scope chain[1]则指向Global Object,

这是a函数的作用域链,里面存了两个执行期上下文,接下来轮到b函数被定义,按照上文的规则,内部函数可以访问外部,所以b函数的作用域链上天生就挂着a函数的作用域链,当函数b执行时在会发生,b.[[scope]]->scope chain[0] ->Activation Object (这个就是b函数的局部作用域)里面定义了变量b 而scope chain[1]则是之前的a函数的局部作用域,scope chain[2]则是全局作用域

当b函数执行完它给aa赋值0,但它scope chain[0]没有这个变量,他就沿着作用域链向外访问scope chain[1]中有aa且值为123,进行修改,scope chain[1]中的aa值为0,因此输出结果是0;

值得注意的是我们可以发现a函数的执行才带来了b函数的定义,因为在js中为了节省效率,当一个函数未执行时,计算机并不会花费时间去检测函数体中的内容。可能在作用域的讲解中会存在知识盲区,建议先观看我写的js预编译,将有助于对作用域与作用域链的理解,顺便挖个坑,我们都是知道es6之前没有块级作用域,我将在写es6时讲解let和const所带来的块级作用域。


猜你喜欢

转载自blog.csdn.net/TimCope/article/details/80103538