不得不學的js技巧之關鍵字this

碼個蛋發表於2016-09-23

JavaScript的初學者,很容易迷惑於函式中的this關鍵字,本文簡明扼要地說明了this的含義,包你讀後不再迷惑。

一句話解決疑問:函式中的this代表一個物件,具體是哪個物件取決於函式的呼叫方式。

好的,現在問題變成了這樣:函式有幾種呼叫方式?每種呼叫方式中this代表哪個物件?

呼叫方式一:直接呼叫

設有如下函式:

function setName(name) {
  this.name = name;

}複製程式碼

我們現在直接呼叫它:

setName('milter');複製程式碼

這時,函式setName中的this代表的是一個全域性物件,這個物件是程式碼的宿主環境提供的,比如在瀏覽器中是window物件,在node.js中是global物件,如果宿主環境中沒有提供這個全域性物件,那麼直接呼叫函式setName將會報錯!

呼叫方式二:new 呼叫

還以上面的setName函式為例,new 呼叫是指這樣: new setName('milter'); 本人之前的文章講過,對函式進行new 呼叫時,直譯器會建立一個新的物件,this就指向這個新的物件,函式最後也會返回這個新的物件。

呼叫方式三:引用呼叫

假設有這樣一個物件: var person = { } 我們將函式setName賦值給person的一個屬性,如下: person.setName = setName ; 此時,通過person.setName呼叫函式就是引用呼叫,如下:

person.setName('milter');複製程式碼

引用呼叫函式時,this指向引用所屬的物件,在上面的例子中,就是setName屬性所屬的物件person。

呼叫方式四:call和apply呼叫

先說call呼叫,接著上面的例子,如下:

setName.call(person,'milter');複製程式碼

call呼叫中,call的第一個引數就是this代表的物件,後面的引數代表傳給函式的引數,上面的例子中,this指向person物件,setName函式的引數是字串'milter'。 apply呼叫與call呼叫類似,第一個引數代表this物件,不同的是它用陣列包含傳給函式的引數。

呼叫方式五:bind呼叫

所謂bind呼叫,請看示例: var binded = setName.bind(person); binded('milter'); 在上面的binded呼叫中,this指向繫結的person物件。

好了,基本就這五種函式呼叫方式,如果有遺漏的,歡迎補充。

推薦閱讀:
寫給Android/Java開發者的JavaScript精解(1)
寫給Android/Java開發者的JavaScript精解(2)
寫給Android/Java開發者的JavaScript精解(3)
教你步步為營掌握JavaScript閉包

歡迎大家關注我的簡書

相關文章