深刻理解JS之Scope链

JS被不少人认为是『拙劣的语言』，被这门语言里的各类离奇的事情整的团团转，这篇文章主要来说讲JS中的Scope链，其主要是影响JS中的变量做用域。

注：本文适合稍有必定JS基础的同窗

目录：

---

1. 初步认识
2. 预编译
3. 不一样Scope进行操做
4. Scope链
5. 例题
6. this变量
7. new操做符

初步认识

首先，来看一段代码：

var a = 1;

if(true){
    var b = 1;
}

console.log(b) //1

咱们从最基本的开始，在面向对象的强语言中（Java，C……），其做用域都是基于块的（即：{}），块内能够对块外的变量进行操做，可是块外却对块内的变量是没法操做的。可是JS呢？一门弱语言，其并无实现基于块的做用域，而是基于function的，所以上面的代码运行出来的结果b并非undefined，说明最终a和b是定义在一个Scope内的。

其Scope如图：

预编译

var a = 1;
var b = 2;

function doit(){
    console.log(b);
    var b = 3;
    console.log(b);
}

doit();

console.log(b);

//undefined
//3
//2

讲到了Scope，不得不讲一讲js的预编译，为何咱们获得的第一个log的结果为undefined呢？按照强语言的思路来讲这里应该是2才对呀，这就是js的预编译。js的代码在首次被加载完成后进行编译时，会将全部的function和var提早进行声明，可是并不会对其进行赋值，赋值则都是在该代码块进行执行时才会对其进行赋值，那么第一个log则是在预编译为b进行了声明后，这时b是没有时行赋值的，因此会log出undefined。

因为js是基于function来建立Scope的，因此只有doit执行时才会建立新的Scope，其Scope如图：

若是不对变量进行var的话，它是不会存在于function执行的时建立的新Scope的。

不一样Scope进行操做

var a = 1;
var b = 2;

function doit(){
    var b = 3;
    console.log(a);
}

doit();

在doit的function里，加了一句console.log(a)，这里就有个问题了，这里的a是从哪里来呢？

这里的doit funciton在执行的时候建立了一个新的Scope，如上一个例子讲的，可是这个Scope里只建立了b变量，去哪找a呢？咱们把上面这个换一换，才是真正正确的Scope:

在js中，var和function在预编译中，做用都是同样的，都是提早声明了变量，可是并无对其进行赋值，因此这段代码完整的Scope应该是拥有这三个变量的，只是doit是一个指向堆的引用。而在doit执行时，才会建立新的Scope，因为js语言的特殊性，虽然doit在这个Scope里定义的，可是其执行环境能够经过引用改变到任何地方，可是doit这个函数的定义环境永远都是肯定的，即这个Scope内。

咱们使用__proto__的思想去理解Scope链，当函数执行时，会在新的Scope内建立一个引用（咱们假设它为__parent__），而这个引用指向则是在function定义时的Scope，在进行变量查找时，则会先在自身的Scope内进行查找，若是没有找到变量，则会根据__parent__来查找到定义时的Scope，在该Scope里进行变量的查找，如图：

Scope链

就像上图那样，每一个Scope都拥有一个__parent__，全部即便这个function不管在什么环境中进行执行，其父Scope都是这个function建立的Scope，虽然js很乱，可是是乱得有规有矩。

当代码在浏览器中执行，去查找变量时，每每都是以下图过程：

优先查找本身Scope，若是查找不到则根据Scope链去查找最近的同名变量，若是一直查找到了Top Scope（在浏览器中则是window）还未找到的话，则这个变量会被认为_"Uncaught ReferenceError: **** is not defined"_，若是直接使用的话则会报错。

咱们为何能够在代码中的任何地方使用document,location等太多变量，都是一直经过Scope链查找到了Top Scope从window中取得的。

例题

拿来最基础的前端面试题来进行分析：

<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>

<script>
var buttons = document.getElementsByTagName("button");

for(var i = 0, l = buttons.length; i < l; i++){
    buttons[i].onclick = function(){
        alert(i);
    }
}
</script>

不少人知道这个例子最终结果是什么样的，即点击每一个button则都alert(6)，并无达到咱们预想中的结果，可是大部分人并不能对这个问题说出个因此然，只能说到“最后不就是加到6了嘛”。咱们从Scope链来分析这个例子，这里遍历了6次，定义了6个匿名function，并将其赋值于了不一样按钮的onclick事件，而这6个匿名function的定义Scope都是相同的，当用户进行点击时，会执行对应的一个匿名function，该function建立的Scope中并无i这个变量，因此它会根据__parent__来找到定义这个function的Scope，找到了i，可是这个i的这时值为6，而且这六个function都是找到了这个值为6的i，因此点击它们都会相同地弹出i这个值。

正确的写法有不少，可是思路只有一个，那就是改变匿名函数的建立Scope，而且该Scope又与i存在的Scope不一样，这就是你们说的闭包，其实闭包就是Scope，每一个函数都会建立Scope，建立闭包，下面两种写法都是改变了匿名函数的建立Scope，并在该Scope中保存了独一无二的index值。

写法1：

for(var i = 0, l = buttons.length; i < l; i++){
    (function(index)
        buttons[index].onclick = function(){
            alert(index);
        }
    )(i);
}

写法2：

for(var i = 0, l = buttons.length; i < l; i++){
    buttons[i].onclick = (function(index){
        return function(){
            alert(index);
        }
    })(i);
}

this变量

this做为js中最为灵活的变量，也是弄晕了一批一批青年们。开始以前，咱们先来上一段代码：

var a = 1;
function doit(){
    var b = 2;
    
    return function(){
        var c = 3;
        console.log(this);
    }
}

doit()();

那么问题来了，这里的this会和a,b,c中的哪个变量有关系呢？

先思考一段时间

···
···
···
···

答案是a，经过this.a能够获取到a的值，即：1。

对于this，咱们能够理解为：特殊的Scope引用变量，其指向当前函数的执行环境Scope（并非定义时的Scope）

---

咱们用上面的例子来理解，虽然this是写在最里面的function的，可是这个function的最终执行是在最外面的Scope进行执行的，因此this指向的是最外层的Scope，而a是定义在最外层的Scope中的，则这时咱们可使用this.a来获取到a的值。

在使用this时：明确了this指向的Scope再使用this，因为js的对引用并无限制，因此这个函数的执行环境永远是不肯定的，因此this去对应的Scope中取值时是不必定能取获得的。

call和apply则能够去改变函数执行的Scope，从而改变this的指向，对于这两个方法的使用，这里再也不详解。

new操做符

js做为一个弱语言，在ES6以前并无class之说，如今全部浏览器都不直接支持ES6（除非手动打开），可是咱们想要实现对类的建立该怎么作呢？乒乒乓乓来段代码：

function Person(name,sex,age){
    this.name = name;
    this.sex = sex;

    var Age = age;
}

var man = new Person("Bob", "male", "17");

在这个new的过程当中，它到底作了什么呢？咱们来按步分析一下：

1.建立Object Scope

建立一个空的Scope

2.在该Object Scope下执行

Person("Bob", "male", "17");

则这时Person里的this是指向这个Object Scope，因此this.name与this.sex则是为Object Scope赋值了新的变量和值。

3.获得：

而Age去哪了呢？根据上面Scope的知道，Age则是被建立在Person自身的Scope内，并不是Object Scope，这时Person函数建立出来的Scope则拥有四个变量，即:name,sex,age,Age；这个Age就像是强语言中的private同样，外界是没法获取到的，这样咱们则会生成一个相似于类的实现方法。

因此来讲，下面的代码：

console.log(man.name) //Bob
console.log(man.sex)  //male
console.log(man.Age)  //undefined

咱们能够获得name和sex，可是并不能获得Age。

End

对于Scope的介绍结束啦，但愿本文能为你更深地理解js起到帮助，BTW，js并非拙劣的语言，当你真正熟悉了它，你会以为它如此地好用。

Finish.