call與apply方法的異同

相信不少前端小夥伴們在寫代碼的時候應該都用過 call() 和 apply() 這兩個方法，應該也對這兩個方法有個基本的瞭解。但確定也有些小夥伴對它們不是很熟悉，那此次就來探究一下這兩個方法
【基本做用】

想要深刻了解 call() 和 apply() 這兩個方法，那麼必需要先知道他們的基本做用：

改變對象的執行上下文
什麼是執行上下文？

咱們在寫一個方法的時候，老是會用到一個關鍵字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方法的使用基本一致，可是隻接收兩個參數，其中第二個參數必須是一個數組或者類數組，這也是這兩個方法很重要的一個區別

數組與類數組小科普

數組咱們都知道是什麼，它的特徵都有哪些呢？

    能夠經過角標調用，如 array[0]
    具備長度屬性length
    能夠經過 for 循環和forEach方法進行遍歷

類數組顧名思義，具有的特徵應該與數組基本相同，那麼能夠知道，一個形以下面這個對象的對象就是一個類數組

var arrayLike = { 0: 'item1', 1: 'item2', 2: 'item3', length: 3 }

類數組arrayLike能夠經過角標進行調用，具備length屬性，同時也能夠經過 for 循環進行遍歷

咱們常用的獲取dom節點的方法返回的就是一個類數組，在一個方法中使用 arguments關鍵字獲取到的該方法的全部參數也是一個類數組

可是類數組卻不能經過forEach進行遍歷，由於forEach是數組原型鏈上的方法，類數組畢竟不是數組，因此沒法使用

那麼如何才能讓類數組可以使用forEach呢？小夥伴們能夠在看完本篇後本身思考一下哦
異同

相同點

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

不一樣點

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個參數的時候，用call，當要傳入多個對象時，用apply

或者，若是須要傳入的參數已是一個數組或者類數組了，就用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還能夠擴展本身的其餘方法