瞭解this 怒推面試官一波

基本知識

this在JavaScript中屬於常常使用的一個對象。在定義中，在Javascript中this老是指向調用它所在方法的對象，誰發起了調用,this將指向誰。

下面將描述一些案例，帶領你們瞭解this。

全局狀況下的this

function test () {
    console.log(this)
}
test()

直接輸出了window對象，由於JS在查找的時候，發現this的指向是undefined，那麼在JS會將this指向到window上。

"use strict"
function test () {
    console.log(this)
}
test()

嚴格模式下，JS是不會將this指向到window上,因此輸出是undefined。

調用狀況下的this

var obj = {
    name:'hero'
}
function test () {
    console.log(this)
}
obj.test = test
obj.test()

這個代碼很好的展現了，由誰調用,this就會被指向調用方所在對象。

如今咱們來思考一下，這種狀況。

var obj = {
    name:'hero',
    proxy:{
        name:'proxy hero'
    }
}
function test () {
    console.log(this)
}
obj.proxy.test = test
console.log('obj.proxy.test')
obj.proxy.test()

var _p = obj.proxy
console.log('_p.test')
_p.test()

這裏並無發生大家預想的

obj.proxy.test
{name: "hero", proxy: {name: "proxy hero", test: ƒ}}
 _p.test
{name: "proxy hero", test: ƒ}

而是

obj.proxy.test
{name: "proxy hero", test: ƒ}
 _p.test
{name: "proxy hero", test: ƒ}

這個例子代表了，this的綁定只受到最近的成員影響。因此，此時的this被綁定在proxy上。

call,apply,bind的this

var obj = {
    name:'hero',
    test (postString) {
        console.log(this,postString)
    }
}
var obj2 = {name:'super hero'}
obj.test.call(obj2,'call')
obj.test.apply(obj2,['apply'])

call,apply的機制是同樣的，都是直接修改了內部this的指向。惟一的區別是call傳入參數是挨個傳入，apply是傳入一整個參數數組。

var obj = {
    name:'hero',
    test (postString) {
        console.log(this,postString)
    }
}
var obj2 = {name:'super hero'}
obj.test.bind(obj2)('bind')

bind的機制與其餘兩個是不同的，通俗的來講，就是bind設置以後，是蓄勢待發。須要正常的執行，才能運行。這在react中常常使用。

在ES6提案中，你還可使用這種方式進行bind。

// 函數綁定運算符是並排的兩個冒號（::）
var k = obj2::obj.test
k('::bind')

這個提案，如今暫時只有babel支持。

參考資料

https://developer.mozilla.org...