JavaScript 函數做用域、執行環境(this)、call、apply、bind 的用法

什麼是函數的做用域

函數做用域：在 JavaScript 中，做用域爲可訪問變量，對象，函數的集合。JavaScript 函數做用域: 做用域在函數內修改。

this 與函數又有什麼關係呢？

this對象是在運行時基於函數的執行環境綁定的。好比：在全局函數中，this 等同於 window 或者 global，而當函數被做爲方法調用時，this 等於那個對象。特別須要注意的是在執行諸如:setInterval、setTimeout 等函數的回調時，此時的 this 實際上是指向全局 window 的，由於相似這樣的方法實際上是 window 的屬性方法。因此咱們常常會看到相似下面的代碼：

var a = {
    age: 21,
    addAge: function() {
        var that = this
        setInterval(function() {
            that.age += 1
        }, 1000)
    }

那咱們想改變函數執行時綁定的 this 怎麼辦呢？

call、apply、bind 能夠用來幹這個事情，哈哈~

call、apply 的用法：

每一個函數都有兩個非繼承而來的方法： apply ( ) 和 call ( )。這兩個方法的用途都是在特定的做用域中調用函數，實際上就是用來設置函數體內的 this對象 的值。兩個方法的做用是相同的，惟一的區別是接收參數的方式不同。兩個方法的第一個參數是接收一個對象或者 null，區別是 apply 接收兩個參數，第二個參數能夠是 數組或者類數組的對象（arguments）這樣。ES6 的 Set 實例也能夠。call 方法就比較厲害了，它接收多個參數，除第一個對象參數外，其他的參數要一個一個列出來。

function sum(num1, num2) {
    return num1 + num2
}
sum.apply(this, [1, 2]) // 3
sum.call(this, 1, 2) // 3

其實，call 和 apply 方法的強大在於，能擴充函數運行的運用域：

var color = 'yellow'
var obj = {
    color: 'blue'
}
function checkColor () {
    console.log(this.color)
}
checkColor() // yellow
checkColor.call(this) // yellow
checkColor.call(window) // yellow，此處 this === window
checkColor.call(obj) // blue

那 bind 能夠用來乾點啥好事兒呢？

ES 5 爲函數定義了一個 bind 方法。這個方法會建立一個函數的實例，實例執行時的 this 值會被綁定到傳給 bind ( ) 函數的值。舉個🌰：

var color = 'yellow'
var obj = {
    color: 'blue'
}
function checkColor () {
    console.log(this.color)
}
checkColor.bind(obj)() // blue

它的實現原理也比較簡單，相似於下面這樣：

function bind(fn, context) {
    return function() {
        return fn.apply(context, arguments)
    }
}