js 關于apply和call的理解使用-有解無憂

　　關于call和apply，以前也思考良久，很多時候都以為記住了，但是，我太難了，今天我特地寫下筆記，希望可以完全掌握這個東西，也希望可以幫助到任何想對學習這個東西的同學，

一.apply函式定義與理解，先從apply函式出發

　　在MDN上，apply的定義是：

　　　　“apply()方法呼叫一個具有給定this值的函數，以及作為一個陣列（或類似陣列物件）提供的引數，”

　　我的理解是：apply的前面有個含有this的物件，設為A，apply()的引數里，也含有一個含有this的物件設為B，則A.apply(B)，表示A代碼執行呼叫了B，B代碼照常執行，執行后的結果作為apply的引數，然后apply把這個結果所指代表示的this替換掉A本身的this，接著執行A代碼，

　　比如：

 1     var aa = {
 2         _name:111,
 3         _age:222,
 4         _f:function(){
 5             console.log(this)
 6             console.log(this._name)
 7         }
 8     }
 9     var cc = {
10         _name:0,
11         _age:0,
12         _f:function(){
13             console.log(this)
14             console.log(this._name)
15         }
16     }
17     cc._f.apply(aa)//此時aa表示的this就是aa本身
18     cc._f.apply(aa._f)//此時aa._f表示的this就是aa._f本身
19     
20     /**
21      * 此時aa._f()表示的this，就是執行后的結果本身，aa._f()執行后，沒有回傳值，所以應該是undefined，而undefined作為call和apply的引數時，call和apply前面的方法 cc._f 的this會替換成全域物件window，
22      * 參考MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/apply 的引數說明
23      */
24     cc._f.apply(aa._f())

執行結果：

　　1.引數為aa

　　這兩行的列印的都是來自 cc._f 方法內的那兩句console ，aa的時候算是初始化，里面的 aa._f 方法沒有執行，

　　2.引數為aa.f

　　這兩行的列印的都是來自 cc._f 方法內的那兩句console ，aa.f 的時候應該也算是初始化，或者是整個函式當引數傳但是不執行這個引數，即 aa._f 方法沒有執行，

　　3.引數為aa.f()

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

　　后兩行決議：aa._f()執行后，沒有回傳值，所以是undefined，在apply執行決議后，cc._f()的this變成的window，所以列印了window，window里面沒有_name這個屬性，所以undefined，

二.apply與call的區分

　　1.apply()

　　　　A.apply(B, [1,2,3]) 后面的引數是arguments物件或類似陣列的物件，它會被自動決議為A的引數；

　　　　對于A.apply(B) / A.call(B) , 簡單講，B先執行，執行后根據結果去執行A，這個時候，用A去執行B的內容代碼，然后再執行自己的代碼，

　　比如：

    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

　　先執行f1，f1執行后（f1是f1，不是f1()執行方法，所以console.log(a+b)這行代碼并沒有執行，相當于，初始化了代碼f1），由于沒有回傳值，所以結果是undefined，f2執行的時候this指向window；引數中的 ” [1,2] “，決議后變成 f2 的引數 “ 1,2，undefined ”，執行f2方法后，列印出1,2，undefined三個值

　　2.call()

　　　　A.call(B, 1,2,3) 后面的引數都是獨立的引數物件，它們會被自動決議為A的引數；

　　比如：　

    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

　　引數中的 ” [1,2] “，因為傳入了一個陣列，相當于只傳入了第一個引數，b和c引數沒有傳，決議后變成 f2 的引數 “ [1,2]，undefined ，undefined ”，執行f2方法后，列印出 [1,2]，undefined ，undefined 三個值，

三.apply與call帶來的便利

　　1. push();

　　push引數是類似(a,b,c,d,e)如此傳輸的，如果在一個陣列的基礎上進行傳輸另一個陣列的內容，可以如下：

    //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. 陣列利用Math求最大和最小值

　　apply和call的第一個引數，如果是null或者undefined，則apply或call前面的函式會把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

四.總結

　　簡而言之，apply和call函式的第一個引數都是用來替換this指向的物件；apply的第二個引數使用arguments或者類似陣列的引數進行傳參，call的第二個或以上的引數，使用獨立單位，一個一個進行傳參；執行順序是apply或call的第一個引數先執行得到結果，然后執行apply或call前面的函式，執行的時候用已經執行的結果所指代的this去執行，apply和call的使用除了引數上的使用方式不同外，功能是一模一樣的，

　　以上內容純屬個人理解，有誤勿噴請指出！謝謝！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/168262.html

標籤：JavaScript

上一篇：Promise簡單使用，需要在ES6以上

下一篇：H5 移動端鍵盤遮擋焦點元素解決方案