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

　　　　};
　　　　}
　　　　};