块级作用域问题ES5 & ES6

 

ES5:

 

1.  没有块级作用域

在其他类C语言中，由花括号封闭的代码块都有自己的作用域(如果用ECMAScript的话来说，就是它们自己的执行环境)，

所以支持根据条件来定义变量。

 

if(true){
    var color = 'blue';
}

console.log(color); //'blue'

这里是在一个if语句中定义了变量color。如果是在C、C++或Java中，color会在if语句执

行完毕后被销毁。但在JavaScript中，if语句中的变量声明会将变量添加到当前的执行环境(在这里是

全局环境）中。在使用for语句时，尤其要牢记这一差异，例如：

for(var i=0; i < 10; i++){ 
    doSomething(i);
} 

console.log(i); //10

 

2.  使用var声明的变量会自动被添加到最近的执行环境中。

 

// 'use strict';

var a2 = 'Hera';

function aaa(){

    var a2 = 'Apollo';  //aaa函数作用域的a2，不会影响到全局作用域的a2,注意区分

    function bbb(){
        a2 = 'Diana';  //由于闭包，访问的是调用aaa函数之后产生的局部函数执行环境中的a2变量。

        a1 = 'Medusa'; //没有使用var声明，在非严格模式下，当bbb函数调用之后，a1会被添加到全局环境。
                       //在严格模式下会直接报错a1 is not defined
    }

    bbb();
    
    console.log(a2);

}

aaa();

console.log(a2); //全局环境声明的 a2 'Hera'

console.log(a1); //bbb函数被调用后，被添加到全局环境的a1变量
                 //严格模式时，在调用bbb时，a1 = 'Medusa'这一行就会报错a1 is not defined

 

 

 

 

3.查询标识符

在上一步中，bbb函数中a2 = 'Diana' ,就是一个查询标识符的过程。a2没有使用var声明，向上一级aaa函数的作用域开始查询，

查询到了var a2  = 'Apollo'之后，再赋值，那么这个时候，aaa作用域的a2已然变成了 ‘Diana’。

需要注意的是，下面这个例子：

 

var color = "blue";

function getColor(){ 
    var color = "red"; 
    return color;
} 


console.log(getColor()); //"red"

 

这种情况下，任何位于局部变量color的声明之后的代码，如果不使用window.color，都无法访问全局color变量。

 

 

 

 

ES6:

1.var声明与变量提升

使用var关键字声明的变量，无论其实际声明位置在何处，都会被视为声明于所在函数的顶部（如果声明不在任何函数内，

则视为在全局作用于的顶部）。这就是所谓的变量提升（hoisting）。为了说明变量提升的含义，见下列例子：

 

    function getValue(condition) {

        if(condition){

            var value = "blue"; 
            // 其他代码 
            return value;

        } else {

            // value 在此处可访问，值为 undefined 
            return null;
        } 

        // value 在此处可访问，值为 undefined

    }

 

如果你不太熟悉 JS ，或许会认为仅当 condition 的值为 true 时，变量 value 才会被创建。
但实际上，value 无论如何都会被创建。 JS 引擎在后台对 getValue 函数进行了调整， 就像这样：

    function getValue(condition) { 
        var value;

        if (condition) { 
            value = "blue"; 
            // 其他代码 
            return value;
        } else { 
            return null;
        } 
        
    }

value 变量的声明被提升到了顶部，而初始化工作则保留在原处。这意味着在 else 分支内
value 变量也是可访问的，此处它的值会是 undefined ，因为它并没有被初始化。

那么其实之前的代码可以写成

var color;

if(true){
    color = 'blue';
}

console.log(color); //'blue'




var i;

for(i=0; i < 10; i++){ 
    doSomething(i);
} 

console.log(i); //10

 

 

 

 

2.块级声明

　　块级声明也就是让所声明的变量在指定块的作用域外无法访问。

　　1.在一个函数内部

　　2.在一个代码块（由一对花括号包裹）内部

　　块级作用域是很多类 C 语言的工作机制， ES6 引入块级声明，是为了给 JS 添加灵活性以及 与其他语言的一致性。

 

3.let声明

 

 

 

 

还有需要注意的一点是，let并不影响闭包。