【深入浅出ES6】块级变量

块级绑定

var变量及变量提升

当使用var声明变量时，js引擎会先将声明语句提升至当前作用域最顶部(如果在函数内部，就是函数作用域的最顶部；如果是全局作用域，就提升到全局作用域最顶部)

function getValue(condition) {

    if (condition) {
        var value = "blue";

        // other code

        return value;
    } else {

        // value exists here with a value of undefined

        return null;
    }

    // value exists here with a value of undefined
}
复制代码

javascript 引擎处理后的结果

function getValue(condition) {

    var value;

    if (condition) {
        value = "blue";

        // other code

        return value;
    } else {

        return null;
    }
}
复制代码

延伸

关于编译器对函数、变量提升的问题：

• var和函数声明会在代码执行前，被提升到作用域顶部
• 函数表达式的方式，只会把变量提升
• let不会被提升，做到了即用即声明的目的，不会因为变量提升导致不可预估的异常

  // 函数声明提升
  printName('hello world')
  var printName = function(name){
    console.log('name:',name) //name: hello world
  }
  // 函数表达式不会被提升
  printName('hello world') // Uncaught TypeError: printName is not a function
  var printName = function(name){
    console.log('name:',name)
  }
  /// 等效于
  var printName //变量提升
  printName('hello world') // Uncaught TypeError: printName is not a function
  printName = function(name){
    console.log('name:',name)
  }
  复制代码

块级声明

块极作用域(又叫词法作用域)被创建的情况：

• 在函数内部
• 在代码块{}内部

块极变量不存在变量提升的情况，块极变量只能在作用域内访问，外部访问不了

let声明

• 在块极作用域内使用，和var声明的变量使用方法基本一致

const声明

• 常量声明必须在声明时完成初始化
• 常量声明会阻止对变量本身的修改，但是对于const声明的对象，对其变量的某一成员属性修改是不报错的，但是不建议

const person = {
name: "Nicholas"
};
// 工作正常
person.name = "Greg";
// 抛出错误
person = {
name: "Greg"
};
复制代码

注意点：

1. 同级作用内不能重复声明

var count = 30;

// Syntax error
let count = 40;
复制代码

2. 暂时性死区

使用 let 或 const 声明的变量，在当前同级作用域内在达到声明处之前都是无法访问的

当 JS 引擎检视接下来的代码块并发现变量声明时，它会在面对 var 的情况下将声明提升到函数或全局作用域的顶部，而面对 let 或 const 时会将声明放在暂时性死区内。任何在暂时性死区内访问变量的企图都会导致“运行时”错误（runtime error）。只有执行到变量的声明语句时，该变量才会从暂时性死区内被移除并可以安全使用。

很有意思的一组变量申明对比

// 使用var声明，存在变量提升
console.log(b); // undefined
var b = 100;

// 不使用任何关键字，b为全局对象属性
console.log(b); // 这里报错
// Uncaught ReferenceError: b is not defined
b = 100;

// 使用let声明，暂时性死区
console.log(b); // 这里报错
// Uncaught ReferenceError: b is not defined
let b = 100;
复制代码

使用typeof

if (true) {
// 在同级块极作用域内，存在暂时性死区，不能在块极变量声明之前使用它
console.log(typeof value); //Uncaught ReferenceError: value is not defined
let value = "blue";
}

// 在外层访问，访问的是全局对象属性
console.log(typeof value); // "undefined"
if (true) {
let value = "blue";
}

if (true) {
// 不使用任何关键字声明，默认为全局对象属性
console.log(typeof value); // undefined
value = "blue";
}
复制代码

3. 在循环中使用let块极变量绑定，可以实现局部作用域绑定的效果(for-in\for-of同样适用)

var funcs = [];
for (var i = 0; i < 10; i++) {
funcs.push(function() { console.log(i); });
}
funcs.forEach(function(func) {
func(); // 输出数值 "10" 十次
});
复制代码

var被提升至最顶部，在循环中i变量是共享的同一个变量，所以在循环内创建的函数都拥有对同一i变量的引用，因此当最后执行函数时，打印的都是最后的i结果

var funcs = [];
for (let i = 0; i < 10; i++) {
funcs.push(function() {
console.log(i);
});
}
funcs.forEach(function(func) {
func(); // 从 0 到 9 依次输出
})
复制代码

在每次循环中，在局部作用域中都会创建一个新的局部块极变量i,在每一次迭代中都是在自己的局部作用域中，因此i变量不会被共享，当函数执行时，也就是打印对应作用域中的i变量的值

4. 全局块极绑定

• 在全局作用域，var声明的变量会挂载到window对象上
• 在全局作用域，let声明的变量不会挂载到window对象上，当访问同名变量时，会优先取局部块极变量(屏蔽全局变量，除非使用window.变量名访问)

变量声明最佳实践

• 默认情况下，优先使用const
• 在确定声明的变量会更改时，使用let

转载于:https://juejin.im/post/5c7cc1a2518825408b65855b