一文幫你解決this指向問題

昨天，同僚遇到了一個問題。讓幫查一下，最後發現是this指向問題。是以，決定寫一下this指向的文章。幫助同僚的同時，也能讓大家借鑒下。this綁定共分為四種情況，構造函數、強綁定、隐式綁定和預設綁定四種。

預設綁定

首先，我們從最簡單的預設綁定說起。預設綁定是指this的預設行為, 當在某個函數中直接使用this時，由于函數内并非對象，是以this不是代表函數，而是代表全局window，嚴格模式下則是undefined。

// 預設綁定示例
function defaultThis() {
    console.log(this);  //此時輸出window/undefined
}

defaultThis();
           

隐式綁定

其次，說下我們最常用的this指向情況（隐式綁定）。這裡我們首先要強調一下this英文本意"這",放在計算機裡他就是代指前面的對象。在人類世界這樣的好處是，使對話更讓簡潔且不影響傳達本意，而在計算機中，this則可以減少複雜變量的編寫成本，而且書寫也更加美觀。是以這裡的this通常指向對象。

// 隐式綁定示例
const Yaoshen = {
    name: 'yaoshen',
    age:  '24',
    height: '187',
    dog: {
        name: '歡歡',
        sex: '女'
    },

    selfIntroduction: () => {
        console.log(this.name); //這裡輸出'yaoshen'
    }
}
           

硬綁定

然後，硬綁定是在隐式綁定基礎上，修改了this的指向。這裡之是以叫硬綁定是因為它的優先級要高于前兩種。實作硬綁定的方法有三種，分别是call、bind、apply。雖然這三種在文法上略有差别，但是本質上都通過傳入的第一個參數修改了this指向。

// 硬綁定示例
const Yaoshen = {
    name: 'yaoshen',
    age:  '24',
    height: '187',
    dog: {
        name: '歡歡',
        sex: '女'
    },

    selfIntroduction: () => {
        console.log(this.name);
    }
}

const mars = {
    name: 'mars'
}

Yaoshe.selfIntroduction.call(mars); //這裡輸出'mars'
           

構造函數

// 構造函數綁定示例
function myConstructor(name, sex) {
    return {
        name,
        sex
        selfIntroduction: () => {
            console.log(this.name);
        }
    }
}

const tiantian = new myConstructor('tiantian', '女');
const mars = {
    name: 'mars',
    sex: '男'
}

tiantian.selfIntroduction.call(mars); //這裡輸出'mars'
           

結束語