Javascript中的apply與call詳解

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/chinahuyong/article/details/41696089

Javascript中的apply與call詳解

　　

　　JavaScript中有一個call和apply方法，其作用基本相同，但也有略微的差別。

　一、方法定義

　　1、call 方法

　　文法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])

　　參數 thisObj 可選項。将被用作目前對象的對象。 arg1, arg2, , argN 可選項。将被傳遞方法參數序列。

　　說明 

　　call 方法可以用來代替另一個對象調用一個方法。call 方法可将一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。 

　　如果沒有提供 thisObj 參數，那麼 Global 對象被用作thisObj。說明白一點其實就是更改對象的内部指針，即改變對象的this指向的内容。這在面向對象的js程式設計過程中有時是很有用的。

　　2、apply方法 

　　文法：apply([thisObj[,argArray]]) 

　　定義：應用某一對象的一個方法，用另一個對象替換目前對象。 

　　說明： 

　　如果 argArray 不是一個有效的數組或者不是 arguments 對象，那麼将導緻一個 TypeError。 

　　如果沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象将被用作 thisObj， 并且無法被傳遞任何參數。

　　二、常用執行個體

　　執行個體1：call應用執行個體

　　引用網上一個代碼段，運作後自然就明白其道理。　　

<input type="text" id="myText"   value="input text">

<script>
   function Obj(){this.value="對象！";}
   var value="global 變量";
   function Fun1(){alert(this.value);}

   window.Fun1();   //global 變量
   Fun1.call(window);  //global 變量
   Fun1.call(document.getElementById('myText'));  //input text
   Fun1.call(new Obj());   //對象！
   window.Fun1(); //global 變量
</script>      

　　call函數和apply方法的第一個參數都是要傳入給目前對象的對象，及函數内部的this。後面的參數都是傳遞給目前對象的參數。

　　運作如下代碼：　　

<script>

  var func=new function(){this.a="func"}
  var myfunc=function(x){
       var a="myfunc";
       alert(this.a);
       alert(x);
   }
   myfunc.call(func,"var");
</script>      

　　可見分别彈出了func和var。先調用func函數，用this.a=”func”替換myfunc中的this.a ; 然後将”var”傳遞給方法myfunc的參數x可見分别彈出了func和var。

　　對于apply和call兩者在作用上是相同的，但兩者在參數上有差別的。

　　第一個參數意義都一樣。第二個參數：apply傳入的是一個參數數組，也就是将多個參數組合成為一個數組傳入，而call則作為call的參數傳入（從第二個參數開始）。

　　如 func.call(func1,var1,var2,var3)  對應的apply寫法為：func.apply(func1,[var1,var2,var3])，同時使用apply的好處是可以直接将目前函數的arguments對象作為apply的第二個參數傳入。 　　

　　執行個體2：繼承的示範

// 繼承的示範

function base() {
    this.member = " dnnsun_Member";
    this.method = function() {
        window.alert(this.member);
    }
}
function extend() {
    base.call(this);
    window.alert(member);
    window.alert(this.method);
}      

　　上面的例子可以看出，通過call之後，extend可以繼承到base的方法和屬性。

　　順便提一下，在javascript架構prototype裡就使用apply來建立一個定義類的模式，其實作代碼如下：　　

var Class = {

create: function () {
    return function () {
      this.initialize.apply(this, arguments);
    }
  }
}      

　　解析：從代碼看,該對象僅包含一個方法：Create，其傳回一個函數，即類。但這也同時是類的構造函數，其中調用initialize，而這個方法是在類建立時定義的初始化函數。通過如此途徑，就可以實作prototype中的類建立模式

　　示例：　　

var vehicle=Class.create();

vehicle.prototype={
    initialize:function(type){
        this.type=type;
    },
    showSelf:function(){
        alert("this vehicle is "+ this.type);
    }
}
var moto=new vehicle("Moto");
moto.showSelf();      

　　運作結果為：this vehicle is Moto　　

　執行個體3：　　

function add(a, b)

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

　　輸出結果為：4

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

　執行個體4：　　

function Animal() {

this.name = 'Animal';
  this.showName = function () {
    alert(this.name);
  }
}
function Cat() {
  this.name = 'Cat';
}
var animal = new Animal();
var cat = new Cat();
//通過call或apply方法，将原本屬于Animal對象的showName()方法交給對象cat來使用了。  
//輸入結果為"Cat"  
animal.showName.call(cat, ',');
//animal.showName.apply(cat,[]);      

　　輸出結果為：cat

　　call 的意思是把 animal 的方法放到cat上執行，原來cat是沒有showName() 方法，現在是把animal 的showName()方法放到 cat上來執行，是以this.name 應該是 Cat。　　

　執行個體5：實作繼承　　　

function Animal(name) {

this.name = name;
  this.showName = function () {
    alert(this.name);
  }
}
function Cat(name) {
  Animal.call(this, name);
}
var cat = new Cat('Black Cat');
cat.showName();      

　　輸出結果為：Black Cat

　　Animal.call(this) 的意思就是使用 Animal對象代替this對象，那麼 Cat中不就有Animal的所有屬性和方法了嗎，Cat對象就能夠直接調用Animal的方法以及屬性了。　　

　執行個體6：實作多重繼承　　　

var s1 = function(name){

this.name = name;
}

var s2 = function(sex){
  this.sex = sex;
}

var s3 = function(age){
  this.age = age;
}

var Student = function(name,sex,age,score){
  s1.call(this,name);
  s2.call(this,sex);
  s3.call(this,age);
  this.score = score;
}

Student.prototype.construction = Student;
var s = new Student('jack','male','12','100');
console.log(s.name); //輸出:jack
console.log(s.sex);  //輸出:male 
console.log(s.age);  //輸出:12
console.log(s.score);//輸出:100      

　　這樣我們就可以根據各個不同的功能子產品分不同的程式員獨立開發，最後合并起來，實作了多重繼承。