前端小夥伴如何應對面試中的 call() 和 apply()

【call() 和 apply() 的基本做用】

改變對象的執行上下文--改變（this）

什麼是執行上下文？
咱們在寫一個方法的時候，老是會用到一個關鍵字this，而this的指向就是咱們這裏所說的執行上下文（執行環境），

首先，this指向的永遠是調用該方法的對象，如何證實this的指向就是當前對象呢？看下面這段代碼：

function func () {
    this.a = 1;
    console.log(this.a);
}
func();  // 1

代碼中方法執行後控制檯輸出1，因爲func是全局對象window下的一個方法，那麼調用該方法的對象就應該是全局對象window，因此this理論上指向的對象就應該是window

若是理論成立，而this.a==1，也就是說變量a是一個全局變量。在控制檯上直接輸入a或window.a後回車，會發現輸出了1，因此在func這個方法中，this的指向就是window

換個方式來驗證下：

var person = {
    name: 'xiao ming',
    age: 18,
    who: function () {
        console.log( 'my name is ' + this.name + ' , ' + this.age + ' years old' );
        console.log( person === this);
    }
}

person.who();
// my name is xiao ming , 18 years old
// true

上面這段代碼中who方法是person對象的一個屬性，被person對象調用，因此this的指向也就是person
那麼在知道什麼是執行上下文之後，就能夠比較好的理解改變執行上下文的含義了，舉個不恰當的栗子：

小明有一個炒菜的鏟子，小明的室友小剛今天忽然想本身作菜吃，可是小剛沒有鏟子。小剛又不想爲了作個菜單獨買把鏟子，因而就借用了小明的鏟子，這樣既達到了目的，又節省了開支，一箭雙鵰

改變執行上下文也是同樣，A對象有一個方法，而B對象由於某種不可言說的狀況也須要用到同樣的方法，那麼這時候咱們是單獨爲B擴展個方法呢，仍是借用一下A的方法呢？固然是借用A的啦，既完成了需求，又減小了內存的佔用

---

【call()與apply()異同】

基本使用

call()

function.call(obj[,arg1[, arg2[, [,.argN]]]]])

調用call的對象必須是個函數function，call的第一個參數將會是function改變上下文後指向的對象，也就是上面例子裏的小剛，若是不傳，將會默認是全局對象window，第二個參數開始能夠接收任意個參數，這些參數將會做爲function的參數傳入function，調用call的方法會當即執行

apply()

function.apply(obj[,argArray])

與call方法的使用基本一致，可是隻接收兩個參數，其中第二個參數必須是一個數組或者類數組，這也是這兩個方法很重要的一個區別

異同

• 相同點

都可以改變方法的執行上下文（執行環境），將一個對象的方法交給另外一個對象來執行，而且是當即執行

• 不一樣點

call方法從第二個參數開始能夠接收任意個參數，每一個參數會映射到相應位置的func的參數上，能夠經過參數名調用，可是若是將全部的參數做爲數組傳入，它們會做爲一個總體映射到func對應的第一個參數上，以後參數都爲空

function func (a,b,c) {}
func.call(obj, 1,2,3)
// function接收到的參數其實是 1,2,3
func.call(obj, [1,2,3])
// function接收到的參數其實是 [1,2,3],undefined,undefined

apply方法最多隻有兩個參數，第二個參數接收數組或者類數組，可是都會被轉換成類數組傳入func中，而且會被映射到func對應的參數上

func.apply(obj, [1,2,3])
// function接收到的參數其實是 1,2,3

func.apply(obj, {
    0: 1,
    1: 2,
    2: 3,
    length: 3
})
// function接收到的參數其實是 1,2,3

• 兩個方法該如何選擇？

簡單的說，根據你要傳入的參數來作選擇，不須要傳參或者只有1個參數的時候，用apply，當要傳入多個對象時，用call，或者，若是須要傳入的參數已是一個數組或者類數組了，就用apply，若是仍是單獨的須要逐個傳入的，能夠考慮使用call（若是你不嫌麻煩的話 ）

【對象繼承】

因爲能夠改變this的指向，因此也就能夠實現對象的繼承

function superClass () {
    this.a = 1;
    this.print = function () {
        console.log(this.a);
    }
}

function subClass () {
    superClass.call(this);
    this.print();
}

subClass();
// 1

subClass經過call方法，繼承了superClass的print方法和a變量，同時subClass還能夠擴展本身的其餘方法

本文借鑑了一些其餘小夥伴的栗子，簡單作了概括總結及梳理