第十八篇 js高级知识---作用域链

一直有想法去写写js方面的东西，我个人是最喜欢js这门语言，喜欢的他的自由和强大，虽然作为脚本语言有很多限制的地方，但也不失为一个好的语言，尤其是在H5出现之后。下面开始说说js的方面的东西，由于自己的能力有现，有点地方说的不明白，还请高手指点。这个文章，如果有时间的话应该会写一个系列，包括js的高级方面的知识，最终希望能够说到js的引擎方面的东西。千里之行，始于足下，下面开始说说最简单的一个东西—js的作用域链，时常也比较容易弄错，也算是自己做一个纪录。

首先看一段代码：

function t(){
var b=1;
if(b===1){
var name="test1";
}else{
var name="test2";
}
console.log(name);
}
t();

这段代码，可能很多人认为输出的结果是undefine,但是输出的结果是：



可能有点想不明白，如果是在强类型里面这个肯定是要报错的，但是在js的词法分析和运行中确能运算出来结果，这个是原因是什么呢？原来是js中的作用域是和C++/C中的不一样，js中没有块级作用域，作用域只有函数，只要在一个函数里面，你定义的变量在函数的内部任何地方都可以访问到，包括嵌套的函数。用官方的话说是所谓的函数作用域。所以上面的结果就是一个有值的数据，而不是一个undefine.

再看代码修改：

function t() {
var sp = "test1";
if (true) {
var sp = "test2";
console.log(sp);
}
console.log(sp);
}
t();

这次输出的结果应该很简单了，只要是在函数内部的块级作用域有js里面都不起作用，所以代码可以拆解成:

function t() {
var sp = "test1";
// if (true) {
var sp = "test2";
console.log(sp);
// }
console.log(sp);
}
t();

所以再次输出都是test2;



好了，现在应该是初步了解了js的函数作用域了，这个理解清楚了，作用域链自然也就不攻自破。下面看一个简单的代码：

var _name = "windows";
function t() {
var name = "test1";
function t1() {
console.log(_name);//1
console.log(name);//2
}
t1();
console.log(_name);//3
console.log(name);//4
}
t();

如果上面的问题都清楚的话，这个代码应该很简单，因为js是函数的作用域，所以在函数内数据都有能访问，执行顺序如下：

1、在1中，执行console.log(_name);这个_name在当前的函数内没有，到t函数中去寻找，t函数中也没有就会到windows里面去找，找到_name并输出windows，同理2步骤输出”test1”

2、3与4 步骤也是同样的道理，所以结果是



从上面的例子可以看出js作用域特点:1、没有块级的作用域，在一个函数的内部定义都有效 2、如果当前数据在当前的函数里面的没有话，会沿着层级向上找。

t1->t->window,从而形成作用域链。