js中call、bind和apply的區別

類似之處：

1. 若是你要傳遞的參數很少，則能夠使用fn.call(thisObj, arg1, arg2 ...)
2. 若是你要傳遞的參數不少，則能夠用數組將參數整理好調用fn.apply(thisObj, [arg1, arg2 ...])
3. 若是你想生成一個新的函數長期綁定某個函數給某個對象使用，則能夠使用const newFn = fn.bind(thisObj); newFn(arg1, arg2...)

call語法

• fun.call(thisArg, arg1, arg2, ...)
• thisArg: 在fun函數運行時指定的this值。須要注意的是，指定的this值並不必定是該函數執行時真正的this值，若是這個函數處於非嚴格模式下，則指定爲null和undefined的this值會自動指向全局對象(瀏覽器中就是window對象)，同時值爲原始值(數字，字符串，布爾值)的this會指向該原始值的自動包裝對象。
• arg1, arg2, ... 指定的參數列表

apply語法

• fun.apply(thisArg, [argsArray])
• thisArg 在 fun 函數運行時指定的 this 值。須要注意的是，指定的 this 值並不必定是該函數執行時真正的 this 值，若是這個函數處於非嚴格模式下，則指定爲 null 或 undefined 時會自動指向全局對象（瀏覽器中就是window對象），同時值爲原始值（數字，字符串，布爾值）的 this 會指向該原始值的自動包裝對象。
• argsArray 一個數組或者類數組對象，其中的數組元素將做爲單獨的參數傳給 fun 函數。若是該參數的值爲null 或 undefined，則表示不須要傳入任何參數。從ECMAScript 5 開始能夠使用類數組對象。

bind語法

• fun.bind(thisArg[, arg1[, arg2[, ...]]])
• thisArg 當綁定函數被調用時，該參數會做爲原函數運行時的 this 指向。當使用new 操做符調用綁定函數時，該參數無效。
• arg1, arg2, ... 當綁定函數被調用時，這些參數將置於實參以前傳遞給被綁定的方法。

// 有隻貓叫小黑，小黑會吃魚
const cat = {
    name: '小黑',
    eatFish(...args) {
        console.log('this指向=>', this);
        console.log('...args', args);
        console.log(this.name + '吃魚');
    },
}
// 有隻狗叫大毛，大毛會吃骨頭
const dog = {
    name: '大毛',
    eatBone(...args) {
        console.log('this指向=>', this);
        console.log('...args', args);
        console.log(this.name + '吃骨頭');
    },
}

console.log('=================== call =========================');
// 有一天大毛想吃魚了，但是它不知道怎麼吃。怎麼辦？小黑說我吃的時候餵你吃
cat.eatFish.call(dog, '汪汪汪', 'call')
// 大毛爲了表示感謝，決定下次吃骨頭的時候也喂小黑吃
dog.eatBone.call(cat, '喵喵喵', 'call')

console.log('=================== apply =========================');
cat.eatFish.apply(dog, ['汪汪汪', 'apply'])
dog.eatBone.apply(cat, ['喵喵喵', 'apply'])

console.log('=================== bind =========================');
// 有一天他們以爲每次吃的時候再喂太麻煩了。乾脆直接教對方怎麼吃
const test1 = cat.eatFish.bind(dog, '汪汪汪', 'bind')
const test2 = dog.eatBone.bind(cat, '喵喵喵', 'bind')
test1()
test2()

總結

1. 當咱們使用一個函數須要改變this指向的時候纔會用到call`apply`bind
2. 若是你要傳遞的參數很少，則能夠使用fn.call(thisObj, arg1, arg2 ...)
3. 若是你要傳遞的參數不少，則能夠用數組將參數整理好調用fn.apply(thisObj, [arg1, arg2 ...])
4. 若是你想生成一個新的函數長期綁定某個函數給某個對象使用，則能夠使用const newFn = fn.bind(thisObj); newFn(arg1, arg2...)