关于javascript中的作用域和作用域链

我GitHub上的菜鸟客栈地点： 点击跳转检察其他相干文章

文章在我的博客上的地点： 点击跳转

        前面的文章说到， 实行高低文的建立阶段，主要有三个内容：

        1、建立变量对象；2、初始化作用域链；3、肯定this的指向。

        在这里，要说一下作用域和作用域链了，先来一个例子：

//全局环境
var a = 10;
function inner(){
    console.log(a);
}
inner();

        在inner函数的实行高低文的实行阶段中，它的VO（变量对象）都没有var a如许的变量声明，所以console的时刻，如何取得a的值呢，就是经由过程全局环境中的AO（运动对象），因为内里就有a的值（不晓得什么是VO和AO，一定要先看一下我前面的文章：关于javascript中的变量对象和运动对象）。

        实在，作用域这个东西，能够邃晓为本身实行高低文中的运动对象（AO）能够被接见的地区，说的有点拗口，实在看一下我前面的文章（关于javascript中的变量对象和运动对象），就能够晓得，实在我们实行函数的时刻，用到的变量值，都是从AO上面取到的，假如本身的实行高低文中的AO没有对应要用的值（比方上面例子中的a），那就要往上一层的实行高低文中的AO中找这个值，假如上一层还没有，就要再往上一层的实行高低文中的AO去找，而这个一层一层的链接关联，就是所谓的作用域链。（这里说到的上一层，实在就是实行高低文栈中压着的下一层实行高低文，不邃晓能够先看我前面的文章：关于javascript中的从客栈内存到实行高低文）

        说到作用域这个东西，我以为不少人都被它坑过，举个例子：

//先声明变量jj并赋值为10
var jj = 10;

//再声明一个函数what
function what(){
    console.log(jj);
}

//实行what函数
what();

        置信人人都异常清晰打印效果了，就和上面例子一样，就是10。那假如如许呢：

//先声明变量jj并赋值为10
var jj = 10;

//再声明一个函数what
function what(){
    console.log(jj);
    var jj = 20;
    console.log(jj);
}

//实行what函数
what();

        是否是会说打印效果是10和20呢？那就错了，现实打印效果是undefined和20。为何呢？不是一开始打印时刻前面没有变量jj，然后向上找到即是10，背面就转变它的值，然后输入20吗？

        如许就没有真正邃晓javascript的词法作用域的观点。作用域的种别能够影响到变量的取值，分为词法作用域（静态作用域）和动态作用域。

        它们的区别是：关于词法作用域，函数的作用域在函数定义的时刻就已肯定了，而动态作用域差别，在函数挪用的时刻才肯定的。

        而javascript，采纳的就是词法作用域，或许叫静态作用域。

        所以在what函数中声清楚明了一个var jj = 20，就将内里有jj这个变量名的取值，框住了在这个函数内里了，或许能够说，挪用what函数的时刻，你用var如许的字眼声清楚明了jj这个变量，就会在实行高低文建立时刻的变量对象VO中挂上了属性jj=undefined，所以一开始就将jj打印出来，因为还没有赋值，所以打印出undefined了，然后背面赋值了，就打印出了20了。

        假如你想根据你一开始想的那样打印出10和20，能够将what函数内里的var jj = 20改成jj = 20，去掉var，如许就相当于what函数内里没有声明变量jj，而是向上找到jj，并将它打印，然后变动jj的值，再打印，现实上，这类做法会污染全局变量，因为你在what函数内里将jj这个全局变量的值改成20了。

        好了，假如你邃晓因为用var声清楚明了变量，致使在本身的实行高低文中寻觅jj的值而不是向上寻觅，然则你不邃晓为何var jj 明显在console以后才声明的，为何会遭到它影响呢？这里，就要再说一个观点，叫做变量提拔。

        变量提拔，就是诠释器会将函数声明和变量声明提拔到方法体的最顶部，函数声明比变量声明提得更高。

        实在很轻易邃晓变量提拔，照样归去看一下我前面的文章（关于javascript中的变量对象和运动对象）就晓得了，实行高低文在建立的时刻就会建立变量对象，而变量对象的建立递次为：形参、函数声明、变量声明（用var 声明的），所以在你的代码实行阶段（实行高低文的实行阶段）之前，它已建立了变量对象了，所以相对其他的实行代码来讲，这就是所谓的变量提拔。

        说归去最初的实行what函数的处所，实在我如许写也是能够的：

//先声明变量jj并赋值为10
var jj = 10;

//实行what函数
what();

//如今才声明一个函数what
function what(){
    console.log(jj);
}

        为何呢？因为变量提拔，诠释器会将声明的what这个函数提到顶部，所以你上面实行what这个函数，现实诠释器已将what函数提拔上去了。

        除了函数声明，变量声明也一样。

        回到前面的例子，我在what函数内声明并初始化var jj = 20 能够算作两个步骤，第一个步骤，声明变量var jj ，第二个步骤，初始化变量，jj = 20，所以上面的函数能够写成如许：

function what(){
    console.log(jj);
    var jj ;
    jj = 20;
    console.log(jj);
}

        固然了，这内里声明的jj变量，也会变量提拔，所以会变成如许：

function what(){
    var jj ;
    console.log(jj);
    jj = 20;
    console.log(jj);
}

        再连系回到前面一同：

//先声明变量jj并赋值为10
var jj = 10;

//再声明一个函数what
function what(){
    var jj ;
    console.log(jj);
    jj = 20;
    console.log(jj);
}

//实行what函数
what();

        是否是很好地邃晓了打印效果就是undefined 和 20了，这里要注意的是，初始化变量是不会提拔的，所以jj = 20照样留在了原位。

        换个体式格局说一下变量提拔，下面两个函数写法有什么差别的处所：

//写法一
var claim = function(){
    console.log('i am first');
};

//写法二
function claim(){
    console.log('i am first');
}

        举一个例子就很清晰了：

//写法一
var claim = function(){
    console.log('i am first');
};

claim();//打印效果为i am first

var claim = function(){
    console.log('i am second');
};

claim();//打印效果为i am second

//写法二
function claim (){
    console.log('i am first');
};

claim();//打印效果为i am second

function claim(){
    console.log('i am second');
};

claim();//打印效果为i am second

        好了，邃晓了上面两种打印效果就晓得了变量提拔了。

        实在作用域前面已说得很清晰了，就是实行高低文的AO（运动对象）可被接见的局限，而作用域链能够类比原型链，本身假如没有，就一级一级往上找，这个一级一级，就是实行高低文栈中压着的下一个实行高低文（再回忆前面文章：关于javascript中的从客栈内存到实行高低文），那就很轻易邃晓邃晓了。