JS作用域理解

1.JS解析步骤：

　　a.预解析

　　　　将变量声明提升；

　　　　将函数声明及函数内容提升，可以理解成原来位置的函数在解析代码时已经提到代码初始位置；

　　　　遇到重名，只留下一个；

　　　　如有重名变量和函数，留下函数；

　　　　如有两个重名函数，后一个函数覆盖前一个函数；

　　　　firefox不能预解析块内定义的函数，出于兼容性考虑，定义函数，一般要放到最外面

　　　　（注意：变量提升的是声明，函数提升的是声明和内容）

　　b.逐行解析代码

　　　　遇到表达式，可以修改预解析的变量值，例如变量赋值可以将函数声明替换掉；

2.如果有几个script代码部分，JS会按照先后顺序逐个解析执行，但是这几个代码部分共用一个域

3.函数的参数相当于在函数内部定义了这个变量，相当于局部变量

4.JS中，每个函数都有自己的执行环境（作用域），其中使用的变量会按照作用域链进行搜索，一直到全局环境，并且只会对目标变量所处的环境造成影响

5.被花括号包围的代码块在很多类c语言中会有块级作用域，JS没有块级作用域

6.函数传参相当于赋值表达式

7.只要是一个执行环境（作用域），就会发生JS解析两个步骤

　　例子：

　　　　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　　　　

　　　　alert( typeof a );

　　　　a(); // 报错

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

　　　　<script>

　　　　　　alert(a);        //报错

　　　　</script>

  　　　 <script>

　　　　　　var a=1;

　　　　</script>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

　　　　<script>

　　　　　　var a=1       

　　　　</script>

  　　　 <script>

　　　　　　alert(a); 　　//1

　　　　</script>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

　　　　var a = 1;
　　　　function fn1(){
　　　　alert(a); // undefined
　　　　var a = 2;
　　　　}
　　　　fn1();
　　　　alert(a); // 1

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

　　　　var a = 1;
　　　　function fn1(){
　　　　　alert(a); // 1
　　　　a = 2;
　　　　}
　　　　fn1();
　　　　alert(a); // 2

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

　　　　var a = 1;
　　　　function fn1(a){
　　　　alert(a); // undefined
　　　　a = 2;
　　　　}
　　　　fn1();
　　　　alert(a); // 1

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
　　　　var a = 1;
　　　　function fn1(a){
　　　　alert(a); // 1
　　　　a = 2;
　　　　}
　　　　fn1(a);
　　　　alert(a); // 1
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

　　　　window.onload = function (){
　　　　var aBtn = document.getElementsByTagName('input');

　　　　for( var i=0; i<aBtn.length; i++ ){
　　　　aBtn[i].onclick = function (){

　　　　// alert( i ); // Undefined

　　　　for( var i=0; i<aBtn.length; i++ ){
　　　　aBtn[i].style.background = 'yellow';
　　　　}

　　　　};
　　　　}
　　　　};