建構函式顯式返回 this 在 new 運算及 call 方法中的比較

zhaiduting發表於2020-06-07
函式

雖然建構函式並沒有顯式返回this，但是new運算的結果會自動拿到this

function D1(){}
var d1= new D1

function D2(){
    return this
}
var d2= new D2

上面這段程式碼中建構函式D2的return this看起來有點多餘了。在new運算中的確是多餘的，但是在call函式中就未必了。

function C1(){
    this.log= function(){
        console.log(`C1 ${this.name}`)
    }
}
function C2(){
    this.log= function(){
        console.log(`C2 ${this.name}`)
    }
    return this            //顯式返回this
}
function C3(){
    this.log= function(){
        console.log(`C3 ${this.name}`)
    }
    this.name= 'Tom'       //再加個屬性
    return this            //顯式返回this
}

var obj

obj= {name: 'Jack'}
C3.call(obj).log()        //鏈式輸出Tom（屬性覆寫）

obj= {name: 'Jack'}
C2.call(obj).log()        //鏈式輸出Jack

obj= {name: 'Jack'}
C1.call(obj).log()        //報錯，call的結果是undefined

上面這段程式碼的最後一行會報錯，這是因為建構函式C1並沒有返回this，因此C1.call(obj)執行後call()的返回值為undefined，顯然undefined.log()會報錯。

為了避免報錯，可以象下面這樣採用分步走的寫法

obj= {name: 'Jack'}
C1.call(obj)
obj.log()                //兩步輸出Jack

顯然，分步走的寫法沒有一步到位來得痛快。為了在call()方法呼叫之後繼續進行鏈式呼叫，就有必要在建構函式的末尾顯式宣告return this了。可見在建構函式的末尾顯式返回this物件並不是畫蛇添足的寫法。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章