JS小菜之作用域

前言

关于作用域的说法相信很多 JS 的书籍都有讲解过，这里我就通过代码来解释一下吧

作用域

在网页代码中一般 CSS 的解析顺序是从上到下，从左到右，而浏览器解析 JS 代码却不是这样的，我们请看浏览器解析步骤

第一步，解析定义，浏览器会先解析 JS 代码中 var,function 等定义

第二步，执行语句，例如alert,++,–,=等执行操作

从代码中看问题

<script type="text/javascript">
alert(a);//function a(){alert(4);}
var a = 1;
alert(a);//1
function a(){
alert(2);
}
alert(a);//1
var a = 3;
alert(a);//3
function a(){
alert(4);
}
alert(a);//3
</script>

上面代码分别打印出 1 1 3 3.为什么呢？我们来分析一下

根据前面讲的，一开始浏览器先解析 var 得到 a ，此时 a 为 undfined ，接着继续解析遇到 function 语句 将 var 覆盖，这里说明一下， 当函数名跟变量名相同时，funtion 会覆盖 var 也就是此时 a 为 function a(){alert(2);} 但 var 不能覆盖 function， 以此类推，直到解析完所有的定义，接着执行语句，第一个 alert（a）此时的 a 是最后一个 function语句,再接着 a 赋值为 1 ，第二次 alert 打印 1，当遇到 function 时由于前面定义的时候解析了，也不是执行语句，所以 a 的不会变，到这里看懂的同学下面也就不用再解释了吧！

我们再看俩个例子

<script type="text/javascript">
alert(a);
var a =
function a(){
alert(2);
};
alert(a);
</script>

按照思路分析，应该不难想到 var 先解析到 a 为 undfined,所以打印结果为undfined,function a(){alert(2);};

<script type="text/javascript">
alert(a);
a();
var a = function a(){
alert(2);
};
</script>

上面这代码，a 在处于 undfined 时调用就会产生报错。。。。。。。。

这也就是为什么方法使用定义式时要在定义之后调用，而方法使用声明式时可以在方法体前面调用

<script type="text/javascript">
var a = 0;
function f(){
alert(a);//------0
var a = 1;
alert(a);//------1
};
f();
</script>

“`

这里有同学可能有疑问为什么第一次打印 a 为 0，函数体里面明明赋值a 为 1了啊，我们来分析一下

第一步，分析全局的 var 和 function

第二步，执行语句后 a = 0,调用 f();

进入 f() 的函数作用域，这里再次分析 var a，然后执行alert语句

这里是时候要解释一下什么叫作用域链了，在这个函数里面

第一个 alert 中的 a 已经是有定义了，但是未赋值，换做在全局中应该是打印 undfined，

但是别忘了这里是在函数中，也就是作用域链的最低层，还可以往上追溯到

爸爸层，爷爷层，这里可以追溯到全局的 a = 0 时 a 已经赋值为 0,所以打印结果是 0.

最后我们以一个比较难的例子结束这篇文章

<script type="text/javascript">
f();
alert(a);//undfined
var a = 0;
function f(){
alert(a);//undfined
alert(b);//undfined
alert(f);//f()整个函数
var a = 1;
var b =1;
function c(){
alert(a);
}
return c;
};
</script>

这里需要注意的是父域的变量不会被子域所影响，具体怎么分析，自己学会了也就掌握了本文的知识了，同学都到这里了就不要放弃了，加油O(∩_∩)O