被討論難了的this關鍵字

this關鍵字

this是個經常使用的關鍵字,它被自動生成在函數做用域裏.並表明函數執行環境的上下文.
若是在開發中,不瞭解this綁定在那個對象上,會很容易出現bug.

this綁定的規則

默認綁定

當函數獨立使用,(沒有對象屬性的引用進行調用).
this會默認綁定在全局對象或undefined.

var log = function () {
    console.log(this)
}
log() //window

使用嚴格模式
"use strict";
var log = function () {
    console.log(this)
}
log() //undefined

隱形綁定

當函數被某個對象的屬性引用後調用.
this會綁定在該對象上.

var obj = {
    log: function () {
        console.log(this);
    }
}
obj.log() //obj

顯性綁定

當函數調用時,指定函數的this綁定對象.
涉及的方法有call、apply和bind.

var log = function () {
    console.log(this)
}
var target = {}

var bindLog = log.bind(target)
bindLog() //target
log.call(target) //target
log.apply(target) //target

顯性綁定的優先級比隱形綁定高

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

var visibleObj = {
    name: 'visible'
}

var hideObj = {
    name: 'hide',
    log: log
}

hideObj.log.call(visibleObj) //visible

new綁定

當實例一個構造函數時.
構造函數的this會綁定在實例上.

function construct(tag) {
    this.tag = tag;
}

var instance = new construct('instance')
console.log(instance.tag) //instance