簡述JS中 appy 和 call 的詳細用法

標籤：apply   通過   code   images   nts   回顧   note   思想   copy   

Apply 和 Call 兩個老生常言的方法，使用過程的一些細節還是有很大的異同，具體使用方式可以參照下面例子詳細回顧一下。

區別和詳解：js中call()和apply()的用法

 

1、關於call()和apply()的疑點：

• apply和call的區別在哪裡
• 什麼情況下用apply,什麼情況下用call
• apply的其他巧妙用法（一般在什麼情況下可以使用apply）

2、文法和參數分析：

apply和call都能繼承另外一個對象的方法和屬性；
Function.apply(obj,args)方法能接收兩個參數
obj：這個對象將代替Function類裡this對象
args：這個是數組，它將作為參數傳給Function（args-->arguments）

call:和apply的意思一樣,只不過是參數列表不一樣.
Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj：這個對象將代替Function類裡this對象
params：這個是一個參數列表

3、call()和apply()樣本展示：

/*定義一個Person類*/ function Person(name,age) {      this.name=name;      this.age=age;}  /*定義一個學生類*/  function Student(name,age,grade) {     //Person.apply(this,arguments);//特點：this指代student對象，只接收2個參數，arguments為隱式類數組對象，用來接收傳入的參數；      Person.call(this,name,age);//特點：this指代student對象，可以接收任意多個參數      this.grade=grade;  }  var student =new Student("zhangsan",22,"二年級");//方法Student()也是object的一個執行個體 //測試  alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);//學生類裡面我沒有給name和age屬性賦值啊,為什麼又存在這兩個屬性的值呢,這個就是apply的神奇之處.

結果：

name:zhangsanage:22grade:"二年級"

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

this:在建立對象在這個時候代表的是student

arguments:是一個數組,也就是[“zhangsan”,”21”,”一年級”];

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

4、 什麼情況下用apply,什麼情況下用call

使用apply的情況：在給對象參數的情況下,如果參數的形式是數組的時候,比如apply樣本裡面傳遞了參數arguments,這個參數是數群組類型。

使用call的情況： 如果我的Person的參數列表是這樣的(age,name),而Student的參數列表是(name,age,grade),這樣就可以用call來實現了,也就是直接指定參數列表對應值的位置(Person.call(this,age,name,grade));

5、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來裝換一下這個數組,即:

　　

6、call的其他重要用法：文法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]說明 ：call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的物件內容從初始的上下文改變為由 thisObj 指定的新對象。  如果沒有提供 thisObj 參數，那麼 Global 對象被用作 thisObj。 6.1、直接用A對象方法來替換B對象

function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1); 

　　分析：這個例子中的意思就是用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以運行結果為：alert(4); // 注意：js 中的函數其實是對象，函數名是對 Function 對象的引用。

　　 6.2、直接用B對象來執行A對象的方法

function Class1() { this.name = "class1"; this.showNam = function() { alert(this.name); } } function Class2() { this.name = "class2"; } var c1 = new Class1(); var c2 = new Class2(); c1.showNam.call(c2); 

　　分析：注意，call 的意思是把 c1 的方法放到c2上執行，原來c2是沒有showNam() 方法，現在是把c1 的showNam()方法放到 c2 上來執行，所以this.name 應該是 class2，執行的結果就是 ：alert（"class2"）;可以讓a對象來執行b對象的方法。　　 6.3、可以用 call 來實現繼承 

function Class1() { this.showTxt = function(txt) { alert(txt); } } function Class2() { Class1.call(this); } var c2 = new Class2(); c2.showTxt("cc"); 

　　分析： 即我沒有的方法或屬性，通過call繼承，我就擁有了你的方法和屬性，可以進行相關的操作了。這樣 Class2 就繼承Class1了，Class1.call(this) 的 意思就是使用 Class1 對象代替this對象，那麼 Class2 中不就有Class1 的所有屬性和方法了嗎，c2 對象就能夠直接調用Class1 的方法以及屬性了，執行結果就是：alert（“cc”）; 

簡述JS中 appy 和 call 的詳細用法