前言

關(guān)于call和apply，以前也思考良久，很多時(shí)候都以為記住了，但是，我太難了。今天我特地寫下筆記，希望可以完全掌握這個(gè)東西，也希望可以幫助到任何想對(duì)學(xué)習(xí)這個(gè)東西的同學(xué)。

一.apply函數(shù)定義與理解，先從apply函數(shù)出發(fā)

在MDN上，apply的定義是：

“apply()方法調(diào)用一個(gè)具有給定this值的函數(shù)，以及作為一個(gè)數(shù)組（或類似數(shù)組對(duì)象）提供的參數(shù)?！?/p>

我的理解是：apply的前面有個(gè)含有this的對(duì)象，設(shè)為A，apply()的參數(shù)里，也含有一個(gè)含有this的對(duì)象設(shè)為B。則A.apply(B)，表示A代碼執(zhí)行調(diào)用了B，B代碼照常執(zhí)行，執(zhí)行后的結(jié)果作為apply的參數(shù)，然后apply把這個(gè)結(jié)果所指代表示的this替換掉A本身的this，接著執(zhí)行A代碼。

比如：

var aa = {
  _name:111,
  _age:222,
  _f:function(){
   console.log(this)
   console.log(this._name)
  }
 }
 var cc = {
  _name:0,
  _age:0,
  _f:function(){
   console.log(this)
   console.log(this._name)
  }
 }
 cc._f.apply(aa)//此時(shí)aa表示的this就是aa本身
 cc._f.apply(aa._f)//此時(shí)aa._f表示的this就是aa._f本身
 
 /**
  * 此時(shí)aa._f()表示的this，就是執(zhí)行后的結(jié)果本身。aa._f()執(zhí)行后，沒有返回值，所以應(yīng)該是undefined，而undefined作為call和apply的參數(shù)時(shí)，call和apply前面的方法 cc._f 的this會(huì)替換成全局對(duì)象window。
  * 參考MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply 的參數(shù)說明
  */
 cc._f.apply(aa._f())

執(zhí)行結(jié)果：

1.參數(shù)為aa

這兩行的打印的都是來自 cc._f 方法內(nèi)的那兩句console 。aa的時(shí)候算是初始化，里面的 aa._f 方法沒有執(zhí)行。

2.參數(shù)為aa.f

這兩行的打印的都是來自 cc._f 方法內(nèi)的那兩句console 。aa.f 的時(shí)候應(yīng)該也算是初始化，或者是整個(gè)函數(shù)當(dāng)參數(shù)傳但是不執(zhí)行這個(gè)參數(shù)，即 aa._f 方法沒有執(zhí)行。

3.參數(shù)為aa.f()

這四行的打印，前面兩行來自 aa._f() 方法執(zhí)行打印的；后面兩行是來自cc._f()方法打印的。

后兩行解析：aa._f()執(zhí)行后，沒有返回值，所以是undefined，在apply執(zhí)行解析后，cc._f()的this變成的window，所以打印了window。window里面沒有_name這個(gè)屬性，所以u(píng)ndefined。

 二.apply與call的區(qū)分

1.apply()

A.apply(B, [1,2,3]) 后面的參數(shù)是arguments對(duì)象或類似數(shù)組的對(duì)象，它會(huì)被自動(dòng)解析為A的參數(shù)；

對(duì)于A.apply(B) / A.call(B) , 簡單講，B先執(zhí)行，執(zhí)行后根據(jù)結(jié)果去執(zhí)行A。這個(gè)時(shí)候，用A去執(zhí)行B的內(nèi)容代碼，然后再執(zhí)行自己的代碼。

比如：

var f1 = function(a,b){
  console.log(a+b)
 }
 var f2 = function(a,b,c){
  console.log(a,b,c)
 }
 f2.apply(f1,[1,2])//1 2 undefined

先執(zhí)行f1，f1執(zhí)行后（f1是f1，不是f1()執(zhí)行方法，所以console.log(a+b)這行代碼并沒有執(zhí)行，相當(dāng)于，初始化了代碼f1），由于沒有返回值，所以結(jié)果是undefined，f2執(zhí)行的時(shí)候this指向window；參數(shù)中的 ” [1,2] “，解析后變成 f2 的參數(shù) “ 1,2，undefined ”，執(zhí)行f2方法后，打印出1,2，undefined三個(gè)值

2.call()

A.call(B, 1,2,3) 后面的參數(shù)都是獨(dú)立的參數(shù)對(duì)象，它們會(huì)被自動(dòng)解析為A的參數(shù)；

比如：　

var f1 = function(a,b){
  console.log(a+b)
 }
 var f2 = function(a,b,c){
  console.log(a,b,c)
 }
 f2.call(f1,[1,2])//[1,2] undefined undefined
 f2.call(f1,1,2)//1 2 undefined

參數(shù)中的 ” [1,2] “，因?yàn)閭魅肓艘粋€(gè)數(shù)組，相當(dāng)于只傳入了第一個(gè)參數(shù)，b和c參數(shù)沒有傳。解析后變成 f2 的參數(shù) “ [1,2]，undefined ，undefined ”，執(zhí)行f2方法后，打印出 [1,2]，undefined ，undefined 三個(gè)值。

三.apply與call帶來的便利

1. push();

push參數(shù)是類似(a,b,c,d,e)如此傳輸?shù)?，如果在一個(gè)數(shù)組的基礎(chǔ)上進(jìn)行傳輸另一個(gè)數(shù)組的內(nèi)容，可以如下：

//apply用法
 var arr = new Array(1,2,3)
 var arr1 = new Array(11,21,31)
 Array.prototype.push.apply(arr,arr1)
 console.log(arr)//[1, 2, 3, 11, 21, 31]
 
 //call用法
 var arr = new Array(1,2,3)
 var arr1 = new Array(11,21,31)
 Array.prototype.push.call(arr,arr1[0],arr1[1],arr1[2])
 console.log(arr)//[1, 2, 3, 11, 21, 31]

2. 數(shù)組利用Math求最大和最小值

apply和call的第一個(gè)參數(shù)，如果是null或者undefined，則apply或call前面的函數(shù)會(huì)把this指向window

//apply的用法
 var _maxNum = Math.max.apply(null,[1,3,2,4,5])
 console.log(_maxNum)//5
 var _minNum = Math.min.apply(null,[1,3,2,4,5])
 console.log(_minNum)//1
 
 //call的用法
 var _maxNum = Math.max.call(null,1,3,2,4,5)
 console.log(_maxNum)//5
 var _minNum = Math.min.call(null,1,3,2,4,5)
 console.log(_minNum)//1

 四.總結(jié)

簡而言之，apply和call函數(shù)的第一個(gè)參數(shù)都是用來替換this指向的對(duì)象；apply的第二個(gè)參數(shù)使用arguments或者類似數(shù)組的參數(shù)進(jìn)行傳參，call的第二個(gè)或以上的參數(shù)，使用獨(dú)立單位，一個(gè)一個(gè)進(jìn)行傳參；執(zhí)行順序是apply或call的第一個(gè)參數(shù)先執(zhí)行得到結(jié)果，然后執(zhí)行apply或call前面的函數(shù)，執(zhí)行的時(shí)候用已經(jīng)執(zhí)行的結(jié)果所指代的this去執(zhí)行。apply和call的使用除了參數(shù)上的使用方式不同外，功能是一模一樣的。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論