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

Apply 和 Call 兩個老生常言的方法,使用過程的一些細節仍是有很大的異同,具體使用狀況能夠參照下面例子詳細回顧一下。

數組

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

 

一、關於call()和apply()的疑點:
  • apply和call的區別在哪裏
  • 什麼狀況下用apply,什麼狀況下用call
  • apply的其餘巧妙用法(通常在什麼狀況下可使用apply)

二、語法和參數分析:app

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:這個是一個參數列表post

三、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的神奇之處.
複製代碼

結果:this

name:zhangsan
age:22
grade:"二年級"

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

this:在建立對象在這個時候表明的是studentprototype

arguments:是一個數組,也就是[「zhangsan」,」21」,」一年級」];code

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

四、 什麼狀況下用apply,什麼狀況下用call

使用apply的狀況:在給對象參數的狀況下,若是參數的形式是數組的時候,好比apply示例裏面傳遞了參數arguments,這個參數是數組類型。

使用call的狀況: 若是個人Person的參數列表是這樣的(age,name),而Student的參數列表是(name,age,grade),這樣就能夠用call來實現了,也就是直接指定參數列表對應值的位置(Person.call(this,age,name,grade));

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

  

六、call的其餘重要用法:
語法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]
說明 :
call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。 
若是沒有提供 thisObj 參數,那麼 Global 對象被用做 thisObj。
6.一、直接用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.二、直接用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.三、能夠用 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」);
相關文章
相關標籤/搜索