JS做用域理解(声明提高)

1.JS解析步骤：

　　a.预解析

　　　　将变量声明提高；

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

　　　　块内的变量声明和函数声明也会被提高，例如if语句

　　　　遇到重名，只留下一个；

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

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

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

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

　　b.逐行解析代码

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

　　　　(重点)先处理js代码，再处理代码中的事件和队列，例如，先将setTimeout解析出来，等代码执行完，再根据延时处理其中的函数

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

3.函数的参数至关于在函数内部定义了这个变量，至关于局部变量，在函数内部解析时也会进行声明提高

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

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

6.函数传参至关于赋值表达式

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

8.只有函数能够建立局部做用域，若是须要一个相似块级做用域的做用域，能够在块内加入一个函数

　　例子：

　　　　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'; 　　　　} 　　　　}; 　　　　}　　　　};