第1章 塊級作用域綁定
1. var聲明及變量提升（Hoisting）機制
- 基于js原生是沒有塊級作用域的，看下面兩段代碼的比較就能理解變量提升機制
function getValue(condition){
if(condition){
var value = "blue";
// ...
return value;
}else{
// 可訪問value，其值為undefined
return null;
}
// 可訪問value，其值為undefined
}
<!-- 以上函數等同于以下的 -->
function getValue(condition){
var value;
if(condition){
value = "blue";
return value;
}else{
return null;
}
}
//變量提升機制不止在函數中的局部變量，全局變量也有提升
2. 塊級聲明
- 塊級聲明用于聲明在指定塊的作用域之外無法訪問的變量；
- 塊級作用域（詞法作用域）存在于函數內部，塊中（{}之間）
2.1 let聲明
function getValue(condition){
if(condition){
let value = "blue";
return value;
}else{
//此處value不存在
return null;
}
//此處value不存在
}
2.2 禁止重聲明
var count = 30;
let count = 40; //TypeError
if (condition){
let count = 40; //內嵌不會，可以重聲明，作用域不同
2.3 const聲明
//const聲明的是常量，使用const要初始化并且不可更改
const maxItems = 30;
const name; //SystaxError
2.3.1 const & let
- const & let 都是塊級標志符，塊執行完就銷毀，不會被提升到作用域頂部
- 變量不能重復聲明
var message = "Hello!";
let age = 25;
//以下報錯 TypeError
const message = "Goodbye";
const age = 30;
- let 與 const的區別：const不可再賦值，對象可以
const maxItems = 5;
maxItems = 6;//TypeError;
const person = {
name: "Nicholas"
};
//可以修改對象屬性值
person.name = "Greg";
//不可以修改對象本身
person = {
name: "Greg"
};
2.4 臨時死區（Temporal Dead Zone）
- 變量不會被提升，在聲明之前調用這一位置就稱為臨時死區，會報錯
if(condition){
console.log(typeof value); //ReferenceError
let value = "blue";
}
//對比
if(condition){
console.log(typeof value); //"undefined"
var value = "blue";
}
//對比
console.log(typeof value); //"undefined"
if(condition){
let value = "blue";
}
- TDZ臨時死區是塊級綁定的特色，一般是塊級作用域中使用let & const,變量不提升
3. 循環中的塊作用域綁定（筆試面試常考）
for(var i = 0;i < 10;i++){
process(items[i]);
}
console.log(i); // 10
for(let i =0;i<10;i++){
process(items[i]);
}
console.log(i); //RerefenceError
3.1 循環中的函數
var funcs = [];
for(var i = 0;i<10;i++){
funcs.push(function(){
console.log(i);
});//這個只是把函數放進去數組，并沒有調用
}
funcs.forEach(function(func){
func(); //輸出10個10
});
- 以前用立即調用函數表達式（IIFE）解決，強制生成計數器變量副本
var funcs=[];
for (var i = 0;i<10;i++){
funcs.push((function(value){
return function(){
console.log(value);
}
}(i)));
}
funcs.forEach(function(func){
func();//輸出0,1,2,3,4,5,6,7,8,9
});
3.2 循環中的let聲明
- let聲明模仿IIFE,每次迭代循環都會創建一個新變量，并以之前迭代中同名變量的值將其初始化
var funcs=[];
for(let i = 0;i<10;i++){
funcs.push(function(){
console.log(i);
});
}
funcs.forEach(function(func){
func();//輸出0,1,2,3,4,5,6,7,8,9
})
var funcs=[];
obj = {
a: true,
b: true,
c: true
};
for(let key in obj){
funcs.push(function(){
console.log(key);
});
}
funcs.forEach(function(func){ //func是funcs中的每一項
func(); //輸出a，b，c
});
3.3 循環中的const聲明
var funcs=[];
for(const i = 0;i<10;i++){
console.log(i);//第二次就報錯了： TypeError:Assignment to constant variable
}
var funcs=[];
obj = {
a: true,
b: true,
c: true
};
for(const key in obj){
funcs.push(function(){
console.log(key);
});
}
funcs.forEach(function(func){
func();//輸出a,b,c
});
4. 全局塊作用域綁定
- let&const 與 var的區別：var 定義全局變量是會把原先的全局對象覆蓋掉的，而let&const只是遮蔽作用，看例子就明白了
var RegExp = "hello!";
console.log(window.RegExp); //”hello!"
var ncz = "Hi";
console.log(window.ncz); //"Hi"
let RegExp = "Hello!";
console.log(RegExp); //"Hello!"
console.log(window.RegExp === RegExp); //false
const ncz = "Hi!";
console.log(ncz); //"Hi!"
console.log("ncz" in window); //false
- 有時希望全局對象下定義變量，可以使用var，常見于瀏覽器跨frame或者跨window訪問代碼
5. 塊級綁定最佳實踐的進化
- 普通開發中默認使用let而不是var，需要保護的變量則要使用const；
- ES6開發中，默認使用const，需要變化的使用let
小結
- 塊級作用域綁定的let和const為js引入詞法作用域，他們聲明的變量不會提升，只能在聲明的代碼塊中使用；
- 臨時死區（TDZ）：變量聲明前訪問塊級綁定導致錯誤的位置
- let & const 與 var 在循環中的差異
- 塊級綁定的最佳實踐：默認使用const，需要變化的值用let
