深入理解JS的apply()、call()

blacker2018發表於2018-07-02
JSAPP

主要解決以下幾個問題:

1.apply和call的區別在哪裡

2.什麼情況下用apply,什麼情況下用call

3.apply的其他巧妙用法（一般在什麼情況下可以使用apply）

我首先從網上查到關於apply和call的定義,然後用示例來解釋這兩個方法的意思和如何去用.

apply:方法能劫持另外一個物件的方法，繼承另外一個物件的屬性.

Function.apply(obj,args)方法能接收兩個引數
obj：這個物件將代替Function類裡this物件
args：這個是陣列，它將作為引數傳給Function（args-->arguments）

call:和apply的意思一樣,只不過是引數列表不一樣.

Function.call(obj,[param1[,param2[,…[,paramN]]]]) obj：這個物件將代替Function類裡this物件
params：這個是一個引數列表

1.apply示例:

/*定義一個人類*/   
function Person(name,age) {   
    this.name=name; 
    this.age=age;   
}   
 /*定義一個學生類*/   
functionStudent(name,age,grade) {   
    Person.apply(this,arguments); 
    this.grade=grade;   
}   
//建立一個學生類   
var student=new Student("qian",21,"一年級");   
//測試   
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);   
//大家可以看到測試結果name:qian age:21 grade:一年級   
//學生類裡面我沒有給name和age屬性賦值啊,
//為什麼又存在這兩個屬性的值呢,這個就是apply的神奇之處。
複製程式碼

分析: Person.apply(this,arguments);

this:在建立物件在這個時候代表的是student

arguments:是一個陣列,也就是[“qian”,”21”,”一年級”];

也就是通俗一點講就是:用student去執行Person這個類裡面的內容,在Person這個類裡面存在this.name等之類的語句,這樣就將屬性建立到了student物件裡面

2.call示例

在Student函式裡面可以將apply中修改成如下:

Person.call(this,name,age);

這樣就ok了

3.什麼情況下用apply,什麼情況下用call

在給物件引數的情況下,如果引數的形式是陣列的時候,比如apply示例裡面傳遞了引數arguments,這個引數是陣列型別,並且在呼叫Person的時候引數的列表是對應一致的(也就是Person和Student的引數列表前兩位是一致的) 就可以採用 apply , 如果我的Person的引數列表是這樣的(age,name),而Student的引數列表是(name,age,grade),這樣就可以用call來實現了,也就是直接指定引數列表對應值的位置(Person.call(this,age,name,grade));

4.apply的一些其他巧妙用法（敲黑板、劃重點）

細心的人可能已經察覺到,在我呼叫apply方法的時候,第一個引數是物件(this), 第二個引數是一個陣列集合,

在呼叫Person的時候,他需要的不是一個陣列,但是為什麼他給我一個陣列我仍然可以將陣列解析為一個一個的引數,

這個就是apply的一個巧妙的用處,可以將一個陣列預設的轉換為一個引數列表([param1,param2,param3]轉換為 param1,param2,param3) 這個如果讓我們用程式來實現將陣列的每一個項,來裝換為引數的列表,可能都得費一會功夫,藉助apply的這點特性,所以就有了以下高效率的方法:

a) Math.max 可以實現得到陣列中最大的一項

因為Math.max 引數裡面不支援Math.max([param1,param2]) 也就是陣列

但是它支援Math.max(param1,param2,param3…),所以可以根據剛才apply的那個特點來解決 var max=Math.max.apply(null,array),這樣輕易的可以得到一個陣列中最大的一項 (apply會將一個陣列裝換為一個引數接一個引數的傳遞給方法)

這塊在呼叫的時候第一個引數給了一個null,這個是因為沒有物件去呼叫這個方法,我只需要用這個方法幫我運算,得到返回的結果就行,.所以直接傳遞了一個null過去

b) Math.min 可以實現得到陣列中最小的一項

同樣和 max是一個思想 var min=Math.min.apply(null,array);

c) Array.prototype.push 可以實現兩個陣列合並

同樣push方法沒有提供push一個陣列,但是它提供了push(param1,param,…paramN)所以同樣也可以通過apply來裝換一下這個陣列,即:

vararr1=new Array("1","2","3");   
vararr2=new Array("4","5","6");   
Array.prototype.push.apply(arr1,arr2);   
複製程式碼

也可以這樣理解,arr1呼叫了push方法,引數是通過apply將陣列裝換為引數列表的集合.

通常在什麼情況下,可以使用apply類似Math.min等之類的特殊用法:

一般在目標函式只需要n個引數列表,而不接收一個陣列的形式（[param1[,param2[,…[,paramN]]]]）,可以通過apply的方式巧妙地解決這個問題!

5.總結:

一開始我對apply 非常的不懂,最後多看了幾遍,自己多敲了幾遍程式碼,才明白了中間的道理,所以,不管做什麼事情,只要自己肯動腦子,肯動手敲程式碼,這樣一個技術就會掌握…

還有比如第四部分得內容,巧妙的解決了實實在在存在的問題,這個肯定不是一個初學者能想到的解決方案(這個也不是我自己想的),沒有對程式設計有一定認識的不會想到這個的,還是一句話,多積累,多學習,提升自己的能力和對程式設計思想的理解能力才是最關鍵!

原文連結： Js apply()使用詳解

相關文章