新手理解 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`)
    },
    // 馬戲團的🐶, 還會作算數
    count(a, b) {
        console.log(`${a} + ${b} = ${a + b}`)
    }
}
複製代碼

不難發現, 貓狗各有所長. 貓咪能夠跳牆, 可是 🐶🐶 能夠吠叫. 假如, 如今的狀況提別緊急, 緊急到了什麼地步呢. 你們都要到牆頭上才能保證安全. 這個時候貓咪直接

cat.jump()
複製代碼

成功翻上牆頭.

然而, 如今 🐶🐶 就尷尬了. 跳上牆頭??? 不會

就一個 bark() 喊半天也沒有用呀!!!

這個時候 apply 就派上用場了. 咱們執行

cat.jump.apply(dog)
複製代碼

🐶🐶 也順利脫險啦. 跳上了牆頭, 狗狗歡快的 bark() 這時候貓咪不樂意了, 它也想吠叫, 可是沒有這個本領. 這時候🐶🐶也大方的借出了本身的 bark 本領給了貓咪.

dog.bark.apply(cat)
複製代碼

兩隻小可愛歡快的在牆頭上叫起來 ^_^.

apply方法的原理

apply方法能夠看成是一種方法的借調: 也就是說把某個方法引用到不包含它的某個對象上. 方法（函數）是用來被對象調用纔可以執行的, 而apply偏偏指向了調用當前方法的對象. 初學者可能會誤認爲apply是對向繼承了以前引用的方法. 然而, 這裏不太建議這樣理解. 咱們能夠再次利用狗狗對象調用jump方法, 獲得的結果以下圖所示:

狗狗, 並無學會 jump 的本領, 它只是在緊急時刻借用了貓咪的跳牆方法.

須要參數

咱們知道咱們的 🐶🐶 來自馬戲團, 具有了算數的能力. 不信試試?

dog.count(1, 2)
複製代碼

簡直了不起, 有木有? 然而, 喵星人如今也想要去馬戲團. 但是它不會算數, 就須要從汪星人那裏借來 count 本領. 那麼就尷尬了.

既然要算加法, 就須要把兩個加數給人家嘛. 怎麼給呢? 只須要把 count 方法須要的參數拼接到一個數組裏就能夠啦. 就像醬紫.

那麼 call 方法咧

其實 call 方法和 apply 方法用法幾乎徹底一致, 爲何是幾乎呢? 在傳遞參數的時候. 剛剛咱們用到的 apply 方法須要把算數的參數放到一個數組裏告訴 count 方法. 用 call 的時候就方便多了. 直接擼.

這個樣式兒. 簡直是舒服呀!