this 決策演算法 - 什麼是 this

  1. this 決策演算法
    1. 特別的 arrow function

this 決策演算法

所有 function 中的 this 都可以透過這個流程圖決定 this 是什麼。

由這個圖

this 是一種 runtime 才有的產物。

特別的 arrow function

arrow function 用 Function.prototype.bind 理解是最適合不過的了。
arrow function 的 由宣告時 function scope 使用的 this 決定的。

var obj = {
    arrow: () => console.log(this),
    fn: function() { console.log(this) },
    fnObj: new Function('console.log(this)'),
    fnObjBind: new Function('console.log(this)').bind(this),
    fnObjBindNull: new Function('"use strict"; console.log(this)').bind(undefined)
}

console.log('global obj.fn()', obj.fn())
 // {arrow: ƒ, fn: ƒ, fnObj: ƒ, fnObjBind: ƒ}

console.log('global obj.fnObj()', obj.fnObj())
// {arrow: ƒ, fn: ƒ, fnObj: ƒ, fnObjBind: ƒ}

console.log('global obj.arrow()', obj.arrow())
// Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

console.log('global obj.fnObjBind()', obj.fnObjBind())
// Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

function AAA() {
    // 直接執行 this 還是 global，但是如果指定成其它的，就可以改變這裡的 this ≠ global
    var obj = {
        arrow: () => console.log(this),
        fn: function() { console.log(this) },
        fnObj: new Function('console.log(this)'),
        fnObjBind: new Function('console.log(this)').bind(this),
        fnObjBindNull: new Function('"use strict"; console.log(this)').bind(undefined)
    }
    console.log('AAA obj.fn()', obj.fn())
    {arrow: ƒ, fn: ƒ, fnObj: ƒ, fnObjBind: ƒ, fnObjBindNull: ƒ}
    console.log('AAA obj.fnObj()', obj.fnObj())
    #document (https://dwatow.github.io/)
    console.log('AAA obj.arrow()', obj.arrow())
    #document (https://dwatow.github.io/)
    console.log('AAA obj.fnObjBind()', obj.fnObjBind())
    undefined
}

const AAAdocument = AAA.bind(document) // 改變「呼叫 function 的 function scope 的」 this 指定成 document (隨決定的)
AAAdocument();
發表於