【Js01】變量以及es6的塊級做用域

1.Js的變量特色

1.1變量聲明的提高

先看一道面試題

console.log(v1);
var v1 = 100;
function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
foo();
console.log(v1);

var聲明變量時會提高到它所在做用域的頂端去執行，到咱們代碼所在的位置來賦值。

1.2函數的提高

函數的兩種聲明：

//函數聲明式
function bar () {}
//函數字面量式 ， 合普通變量提高的機制同樣
var foo = function () {}

函數聲明式的提高現象和變量提高略有不一樣：

console.log(bar);
function bar () {
  console.log(1);
}
//打印結果：ƒ bar () {
//  console.log(1);
//}

函數提高是整個代碼塊提高到它所在的做用域的最開始執行，上述代碼執行順序至關於

function bar () {
  console.log(1);
}
console.log(bar);

思考下面的代碼，這就是函數優先規則。

foo(); //3
 
var foo;
 
function foo () {
    console.log(1);
}

function foo () {
    console.log(3);
}
 
foo = function () {
    console.log(2);
}

下面這段代碼，在低版本的瀏覽器中，函數提高不會被條件判斷所控制，輸出2；可是在高版本的瀏覽器中會報錯，因此應該儘量避免在塊內部聲明函數

foo(); //低版本：2  //高版本： Uncaught TypeError: foo is not a function
 
var a = true;
 
if(a){
    function foo () { console.log(1); }
}else{
    function foo () { console.log(2); }
}

2.ES6的塊級做用域綁定

2.1 let聲明

• let聲明不會被提高
• 禁止同一做用域的重複聲明
• 塊級做用域內有效

2.2 const 聲明

• 聲明的值是常量，一旦被設定後不可更改和從新賦值。
• 必須初始化。
• 塊級做用域內有效

用const聲明對象

const person = {
    name: 'changchang'
}
//能夠修改對象屬性的值
person.name = 'zhangchangchang';

//拋出語法錯誤
person = {name: 'es6'}

2.3 循環中的塊做用域綁定

for (let i = 0; i < 10; i++){
    process(items[i]);
}
// i在這裏不可訪問，拋出錯誤
console.log(i);

2.4 循環中的函數

var funcs = [];

for (var i = 0; i < 10; i++){
    funcs.push(function() {
        console.log(i);
    })
}

funcs.forEach((ele)=>{
    ele(); //輸出10次數字10
})

//循環離的每次迭代同時共享着變量i，循環內部建立的函數所有保留了相對變量的引用。循環結束時變量i的值爲10，因此forEach時每次都會輸出10。
//用forEach來console.log(ele)得出ƒ (){console.log(i)},而此時i=10，因此輸出10次10

循環中的當即執行函數（IIFE）

var funcs = [];

for (var i = 0; i < 10; i++){
    funcs.push((function(value) {
        return function(){
            console.log(value);
        }
    }(i))); //把當前的i存放到形參value裏
}

funcs.forEach((ele)=>{
    ele(); //輸出0 1 2...
})

//若是console.log(ele),得出ƒ (){console.log(value);}

循環中的let聲明

var funcs = [];

for (let i = 0; i < 10; i++){
    funcs.push(function() {
        console.log(i);
    })
}

funcs.forEach((ele)=>{
    ele(); //輸出0 1 2 ...
})

//let在每次迭代循環都會建立一個新變量

對於for-in合for-of也是同樣的

var funcs = [];
var object = {a: true, b:true, c: true};

for (let key in object){
    funcs.push(function(){
        console.log(key);
    });
}

funcs.forEach((ele)=>{
    ele(); //輸出a b c ...
})

循環中的const聲明

// 報錯
for (const i = 0; i < 10; i++){
    ...
}

var object = {a: true, b:true, c: true};
// 能夠正常輸出，由於每次迭代都會建立一個新綁定
for (const key in object){
    console.log(key);
}

參考文章：
《深刻理解ES6》
https://blog.csdn.net/qq_3971...