ES6（一）—— 做用域

時間 2020-11-16

標籤 bash 數據結構閉包函數學習 this spa code 對象 blog 欄目 JavaScript 简体版

原文原文鏈接

告別拖延症，今天開始更新ES6-ES10經常使用的全部新特性，僅做爲學習筆記，勿噴。bash

對象	類型
global/window	全局做用域
function	函數做用域（局部做用域）
{}	塊狀做用域（if語句，for語句）
this	動態做用域

var abc = 1234
abcd = 2345

delete abc //false
console.log(abc) //1234
delete abcd //true
console.log(abcd) //abcd is not defined

// abc是一個全局對象，可是abcd不是全局變量，而是做爲window對象的屬性存在的，
// 可是由於window是全局對象，因此看上去它也具有全局屬性，擁有全局做用域

案例二：spa

function test(){
    ab = 45
}
test()

console.log(ab) //45
//在函數內部沒有使用var定義的變量，都掛載在window上，不是全局變量，可是擁有全局做用域

函數做用域

在函數內部定義的變量，擁有函數做用域/局部做用域code

function test(){
    var a = 3
    return a + 4
}
console.log(test()) // 7 
console.log(a) //a is not defined

如何讓a在函數做用域中，可是某些值共享?對象

return
閉包

塊級做用域(ES6新增)

ES5blog

// ES5
function test(){
    var a = 3
    if (a === 3) {
        var b = 4
        console.log('abc')
    } else {
        console.log('abcd')
    }
    console.log(b)  // 4
    return a + 4
}

//在if的塊中沒法造成壁壘，在{}中定義的變量在外界仍是可使用的
//ES6將{}中的東西進行了獨立

function test () {
    var a = 3
    function test2 () {
        var b = 4
        return a + b
    }
    return test2
}

/* test裏面的變量對test2是共享的，a的值是能夠取到的。
根據函數的做用域鏈：
執行test2中的函數，首先定義b，而後return中找a，沒有找到就去上一個函數中找，找到了a
若是在test中找不到a，最後會一直找到window
*/

ES6

function test(){
    var a = 3
    if (a === 3) {
        let b = 4
        console.log('abc')
    } else {
        console.log('abcd')
    }
    console.log(b)  // b is not defined
    return a + 4
}

// 若是想要使用塊狀做用域，可是此時不能用var，由於var有一個變量提高機制。
// 但凡看到了var，就會提高到當前做用域最頂層，因此只能使用let,const

動態做用域

this 是很是特殊的關鍵詞標識符，在每一個函數的做用域中被自動建立。
只能在執行階段才能決定變量的做用域。

window.a = 3
function test () {
    console.log(this.a)
}
test()  // 3
test.bind({ a:100 })()  // 100

// 由於this是一個動態指向，不是固定指向。因此咱們稱這個爲動態做用域。
// bind是讓函數動態綁定到一個對象上去，這個時候this指向對象自己，因此會致使同一個函數有不一樣的效果。

詞法做用域

js採用詞法（靜態）做用域，所以開啓動態做用域請藉助bind,with,eval等。
bash採用的是動態做用域

靜態做用域	動態做用域
變量的做用域是在定義時決定而不是執行時決定，通常經過靜態分析就能肯定。	只能在執行階段才能決定變量的做用域。

// 通過驗證，js默認採用靜態做用域
// a 在foo調用的時候沒有在當前函數做用域中找到，因此按照書寫代碼順序往外層找，就是var a = 2，而不是取bar函數裏面找
function foo() {
    console.log(a)  // 2
}

function bar() {
    var a = 3
    foo()
}

var a = 2
bar()