新手理解 apply 和 call
本文僅適合新手, 我是說很新的那種, 旨在和大家共同瞭解js的call和apply方法. 筆者水平有限, 文中不免會有疏漏, 大神請輕噴.
開始說正事
apply 和 call 都是 JS 函式物件的原型方法, 因此我們可以在任何的函式呼叫這兩個方法, 主要作用就是使得物件能夠借用到本來不屬於他的方法(就是物件的本領). 有點懵逼是不是? 下邊我們來舉個栗子.
狗急跳牆
假設我們有一隻喵星人:
const cat = {
// 它的名字叫 cat
name: 'cat',
// 它可以跑
run() {
console.log(`${this.name} can run`)
},
// 還可以跳(包括跳牆是可以的)
jump() {
console.log(`${this.name} can jump`)
}
}
複製程式碼
同時, 它還有一個小夥伴汪星人:
const dog = {
// 汪星人叫 dog
name: 'dog',
// 會跑
run() {
console.log(`${this.name} can run`)
},
// 還會吠
bark() {
console.log(`${this.name} bark loudly`)
},
// 馬戲團的:dog:, 還會做算數
count(a, b) {
console.log(`${a} + ${b} = ${a + b}`)
}
}
複製程式碼
不難發現, 貓狗各有所長. 貓咪可以跳牆, 但是 :dog::dog: 可以吠叫. 假如, 現在的情況提別緊急, 緊急到了什麼地步呢. 大家都要到牆頭上才能保證安全. 這個時候貓咪直接
cat.jump() 複製程式碼
成功翻上牆頭.
然而, 現在 :dog::dog: 就尷尬了. 跳上牆頭??? 不會
就一個 bark() 喊半天也沒有用呀!!!
這個時候 apply 就派上用場了. 我們執行
cat.jump.apply(dog) 複製程式碼
bark()
這時候貓咪不樂意了, 它也想吠叫, 但是沒有這個本領. 這時候:dog::dog:也大方的借出了自己的 bark 本領給了貓咪.
dog.bark.apply(cat) 複製程式碼
兩隻小可愛歡快的在牆頭上叫起來 ^_^.
apply方法的原理
apply方法可以當作是一種方法的借調: 也就是說把某個方法引用到不包含它的某個物件上. 方法（函式）是用來被物件呼叫才能夠執行的, 而apply恰恰指向了呼叫當前方法的物件. 初學者可能會誤認為apply是對向繼承了之前引用的方法. 然而, 這裡不太建議這樣理解. 我們可以再次利用狗狗物件呼叫jump方法, 得到的結果如下圖所示:
狗狗, 並沒有學會 jump 的本領, 它只是在緊急時刻借用了貓咪的跳牆方法.
需要引數
我們知道我們的 :dog::dog: 來自馬戲團, 具備了算數的能力. 不信試試?
dog.count(1, 2) 複製程式碼
簡直了不得, 有木有? 然而, 喵星人現在也想要去馬戲團. 可是它不會算數, 就需要從汪星人那裡借來 count 本領. 那麼就尷尬了.
既然要算加法, 就需要把兩個加數給人家嘛. 怎麼給呢? 只需要把 count 方法需要的引數拼接到一個數組裡就可以啦. 就像醬紫.
