为您解惑：JavaScript中的apply()方法和call()方法使用介绍...........

前言：apply()和call()的真正用处是能够扩充函数赖以运行的作用域。

（1）、每个函数都包含两个非继承而来的方法：apply()和call()。
（2）、他们的用途相同，都是在特定的作用域中调用函数。
（3）、接收参数方面不同：

            apply()接收两个参数，一个是函数运行的作用域(this)，另一个是参数数组。
            call()方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来。

1、方法定义：

call方法:
语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

apply方法：
语法：apply([thisObj[,argArray]])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

2、常用实例

例1：

<span style="font-size:14px;">function add(a,b)  
    {  
        alert(a+b);  
    }  
    function sub(a,b)  
    {  
        alert(a-b);  
    }  
add.call(sub,3,1);   //  运行结果为：alert(4);</span>

释：应该是将add执行的上下文由window切换为sub，即this指向是从window变为sub

注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

例2：

<span style="font-size:14px;">  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来使用了。     
    animal.showName.call(cat,",")或者animal.showName.call(cat);  //输入结果为"Cat"    
   //animal.showName.apply(cat,[])或者animal.showName.apply(cat); </span>

释：animal.showName.call(cat,",")这个是说 cat 已经继承了animal的方法了，虽然cat木有showName这个方法，但是通过call，已经把参数都传给了cat，cat直接调用继承到的showName()方法即可。

例3（实现继承）：

<span style="font-size:14px;">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</span>

例4（实现多继承）

<span style="font-size:14px;">  function Class10()  
    {  
        this.showSub = function(a,b)  
        {  
            alert(a-b);  
        }  
    }  
      
    function Class11()  
    {  
        this.showAdd = function(a,b)  
        {  
            alert(a+b);  
        }  
    }  
      
    function Class2()  
    {  
        Class10.call(this);  
        Class11.call(this);  
    }  
var   aaa= new Class2();
aaa.showSub(1,2)   // -1
</span>

释：以上使用两个 call 就实现多重继承了；当然，js的继承还有其他方法，例如使用原型链，这个不属于本文的范畴，只是在此说明call 的用法。说了call ，当然还有 apply，这两个方法基本上是一个意思，区别在于 call 的第二个参数可以是任意类型，而apply的第二个参数必须是数组。

更多实例如下：

例1-1（call的第一个参数为对象）

<pre name="code" class="javascript"><span style="font-size:14px;">window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
　　console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName.call(window); //  等价于HelloName();  因为其函数都是在全局对象下。
HelloName.call(myObject);

//运行结果为：
Hello diz song glad to meet you!
Hello my Object glad to meet you!</span>

例2-2

<span style="font-size:14px;">function sum(num1, num2) {
return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30 </span>

分析：

在例1-1中，我们发现apply()和call()的真正用武之地是能够扩充函数赖以运行的作用域，如果我们想用传统的方法实现，请见下面的代码：

<span style="font-size:14px;">window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you!</span>

注：我们发现，要想让HelloName()函数的作用域在对象myObject上，我们需要动态创建myObject的HelloName属性，此属性作为指针指向HelloName()函数，这样，当我们调用myObject.HelloName()时，函数内部的this变量就指向myObjecct，也就可以调用该对象的内部其他公共属性了。

在例2-2中，我们可以看到call()和apply()函数的真正运用之处，在实际项目中，还需要根据实际灵活加以处理！一个小问题：再看一看函数中定义函数时，this变量的情况：

<span style="color:#000000;">function temp1() {
console.log(this); //Object {}
function temp2() {
console.log(this); //Window
}
temp2();
}
var Obj = {};
temp1.call(Obj); </span>

执行结果与下面的相同：

function temp1() {
console.log(this);
temp2();
}
function temp2() {
console.log(this);
}
var Obj = {};
temp1.call(Obj); 

注：函数中定义函数时，子函数的this知识window；

PS：大家有什么建议可以留言呦！