深入理解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中取值时是不一定能取得到的。

callapply则可以去改变函数执行的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.namethis.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.

posted @ 2015-09-28 23:21 纸异兽 阅读(...) 评论(...) 编辑 收藏