JavaScript作用域(五)

作用域

对于一个变量来说，它有其有效的范围，这个范围就叫它的作用域。在JavaScript中，作用域分为2种：函数作用域，块作用域。

 一、函数作用域

function foo()
{
    var a = 1;
    console.log(a) //输出1
}
console.log(a) //Uncaught ReferenceError: a is not defined

像上面这样，定义任何一个函数，都会创建一个与之对应的作用域。作用域可以嵌套，像下面的例子这样。并且子作用域可以访问父作用域内的变量，在foob中输出a是可行的，但是输出c是会报错的。然而父作用域不可以访问子作用域的内容。

function fooa()
{
    var a = 1
    function foob()
    {
        var b = 2
        console.log(a)    //1
        console.log(c)    //报错
    }
    function fooc()
    {
        var c = 3
    }
    foob()
    fooc()
}

二、块作用域

 块作用域是指除函数作用域外，其它的以大括号的形式包裹起来的作用域。比如if、while、for、switch、try...catch这些语法出现的时候都会伴随这大括号的使用，或者你也可以像下面这样直接的大括号，都会产生一个块作用域。

{
    var a = 1
}
console.log(a)    //输出1

 在ES6的let、const出现之前，块作用域是不起作用的。换句话说：如果你是使用var来声明的变量，块作用域限制变量作用范围的效果是无效的。如果你是使用let或者const声明的变量，块作用域和函数作用域都有效，所以没有写例子。对于块作用域还有以下的情况需要注意的。

for(var a = 0;a<3;a++){
    var b = 1
}
console.log(a)    //3，作用域外可以访问a变量
console.log(b)    //1


try{
    var a = 0
    throw new Error("")
}catch(error){
    var b = 1
    console.log(error)    //Error
}
console.log(a) //0
console.log(b) //1
console.log(error)//报错,作用域外无法访问error变量

三、变量提升

在JavaScript中，这条语句var a = 1。可以看成是两条语句，var a; a = 1;像这样先声明，后赋值。编译器（解析器）在解析代码时，首先进入到一个作用域内（最开始是window作用域），在里面找到了语句var a，然后它就记下来在window作用域内有a这个变量，像这样的一个工作是在编译时就做好的（这也证明JavaScript有编译这个过程）。所以说你使用下面的写法也有正确的结果：

a = 2    //先赋值

function foo(){
    console.log(a)
}

var a    //再声明

 这样做法叫变量提升。并且向下面这样，有2个var a也不会报错，因为多余的var会被忽略。这些都是let做不到的事情，间接的说明使用更为严格的let能更少的犯错误，因为使用的不好它会报错告诉你。

var a = 1
var a = 2

console.log(a) //2


//情景1（变量提升失败）
a = 1
let a     //Uncaught ReferenceError: a is not defined

//情景2（多次声明失败）
let b = 2
let b = 3 //Uncaught SyntaxError: Identifier 'b' has already been declared

 四、变量声明

JavaScript声明一个变量有四种方式

var a;              //可以不用赋值，可以变量提升
let b;              //声明时可以不用赋值，无法变量提升
const c = 1;        //常量：必须要一个初始值，并且后期不可以改变，块作用域也会限制
d = 1;              //不使用任何关键字声明的是全局变量

//全局变量
function foo(){
    d = 1    //d在全局作用域下
}

function foo2(){
    console.log(d) //1
}
foo()
foo2()


//常量改变的情况,如果常量的类型是引用类型，可以修改其属性，但是不能重新赋值。
const e = {
    a:1
}
e.a = 2
e = {
    
}    //Uncaught TypeError: Assignment to constant variable.

 五、作用域链

前面提到 var a = 2；会被看成var a;a =2;两句话，如果当前作用域内有var a，那么a变量会被记录在对应的作用域。这样在对应的作用域内需要取a的值的时候可以直接找到，如果找不到就找其父作用域，一直找到最顶层的作用域为止。

var d = 1
function foo(){
    var d = 2
    console.log(d)    //2
}
foo()
console.log(d)        //1

/**
 上面这个例子:
    首先 var d = 2 先被拆成2条语句，var d;d=2
    var d 这句话是在编译时就处理了的，但是运行这句话没有作用
    d = 2 这句话执行也分2个步骤，首先差找变量d，然后赋值。
    因为当前作用域内有var d语句，所以不会继续向父作用域内查找
**/


var d = 1
function foo(){
    console.log(d)    //1
}
foo()
console.log(d)        //1

/**
 这样，在当前作用域内没有找到，那么向上层查找。输出1。并且逐层查找是从子作用域一步一步向父作用域查找的。
**/