JavaScript变量的作用域，变量提升hositing，作用域链

10-变量作用域

JavaScript不像其他编译类型的语言需要解释，编译，执行三个阶段，JavaScript只需要两个阶段，解释和执行阶段。

• 解释阶段
  • 词法分析
  • 语法分析
  • 作用域规则确定
• 执行阶段
  • 创建执行上下文
  • 执行函数代码
  • 垃圾回收

函数变量的作用域

作用域：变量声明的区域，就是变量和函数可访问的范围。

函数的参数只能在函数内部访问。但是如果函数有嵌套，子函数是可以访问父函数的变量，但是父函数不能访问子函数的变量。

变量声明的时候没有用var声明或者没有在函数内部声明那么这个变量就是全局变量。

特殊！ var a=b=c=0; 这里的b、c都是全局变量。

ECMAscript5中没有块级作用域（ECMAscript6中新增块级作用域），只有函数作用域和全局作用域。注意！ECMAscript5中for循环内部定义的变量是函数级别的作用域。

拓展： 块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域

11-变量提升(hositing)

函数内部声明的变量会被提升到函数的头部。函数在解析执行的时候先进行变量声明处理，然后再运行函数内部的代码。

变量和赋值语句一起写，在js引擎解析的时候会将其拆成声明和赋值两部分。声明置顶，赋值保留在原来的位置。

var a=1; => var a;放在头部 var a=1;留在原来的位置

变量重复声明不会出错，后面的会覆盖前面的。

<script>
        var a=1;
        f1();
        function f1()
        {
            console.log(a);     //1.a=>undefined
            var a=2;
            console.log(a);     //2.a=>2


            console.log(b);     //3.b=>function
            var b=20;
            function b()
            {

            }
            console.log(b);     //4.b=>20
        }
</script>

1. 因为函数内部也有a所以优先访问函数内部的a，函数的EC把所有变量都提升到函数的头部并都赋值undefined，所以第一条语句打印出undefined。
2. 因为前面一条语句给a赋值2，所以打印出2，而不是undefined。
3. 如果函数声明和变量声明同名时，函数的优先级高。所以打印出function。
4. 之后因为js是动态的，上一条语句给b赋值20之后覆盖了函数的声明，所以打印出20。

小提示： 全局EC会将所有函数声明提到头部。

window

在浏览器中全局对象就是window

在全局作用域中声明的变量和函数声明都会作为window的属性存在。

var a=9;
console.log('a' in window);		//true
console.log(window.a);			//9
console.log(window['a']);		//9

例题：

//注意 window中包含所有声明的变量，包括函数内声明的变量
//这里 'a' in window返回的是true，因为if是块级作用域所以这里面的a是全局变量
if(!('a' in window))
{
	var a=1;
}
console.log(a)		//undefined

12-作用域链

对于VO,AO,执行上下文等没有概念的可以看一下我的这篇博客链接地址

• 作用域链式一个数组
• 作用域链式控制变量作用域的有序访问的js内部实现
• 作用域链存储在执行上下文中，作用域链中存放的是执行环境中的VO或者AO
• 当前函数的作用域对象都是在最前端，而全局的在最末端
• 变量（标识符）的搜索都是从作用域链的最前端向后搜索，从第一个对象开始逐级向后回溯，直到找到同名标识符，找到后不再遍历，找不到报错。

 <script>
        var a=10;
        var b=20;
        var res=parent(a,b);
        console.log(res);

        function parent(i,j)            //父函数
        {
            var vparent='parent';

            function child(k)           //子函数
            {
                var vchild='child';
                return k+vchild;
            }

            return i+j+vparent+child(i);
        }
    </script>

（这张图中b=10应该是b=20，懒得重新做了，将就看一下）