JS中的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、常用实例

a、

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 对象的引用。

 

b、

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,[]);

 call 的意思是把 animal 的方法放到cat上执行，原来cat是没有showName() 方法，现在是把animal 的showName()方法放到 cat上来执行，所以this.name 应该是 Cat

 

c、实现继承

 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();

 Animal.call(this) 的意思就是使用 Animal对象代替this对象，那么 Cat中不就有Animal的所有属性和方法了吗，Cat对象就能够直接调用Animal的方法以及属性了.

 

d、多重继承

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);
}

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

 

例子来源：http://xiaofeizm55333.iteye.com/blog/80913

http://www.iteye.com/topic/599108   及回复..

评论

28 楼 huchao007 2017-03-03  

TryRelax 写道

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
以前我的理解太浅薄了，以为就是一个意思，其实一个句号一个意思，体现在方向不同。第一个借用别人的函数，第二个借用别人的上下文环境。

还有这个说的也很赞，这就是所说的借用别人的上下文环境

菜花码农 写道

function add(a,b)
{
    alert(a+b);
}
function sub(a,b)
{
    alert(a-b);
}

add.call(sub,3,1);
个人理解call和apply的作用就是切换函数的对象上下文。

“这个例子中的意思就是用 add 来替换 sub“，应该是将add执行的上下文由window切换为sub，即this指向是从window变为sub，仅此而已，并非add替换sub。这个例子很难说明什么。

正解

27 楼 huchao007 2017-03-03  

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call

26 楼 huchao007 2017-03-03  

 

看这篇文章，讲的很明白啦

25 楼 arjun 2016-09-23  

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

这样或许更能体现出call的含义，首先 add.call(sub,3,1)执行的是 add方法， 然后，add执行的时候，this已经变成了 sub这个方法本身，所有this(a,b)这一句弹出了2

24 楼 qq594848450 2016-09-12  

楼主这些例子我也没搞懂原理，直到看了6楼和23楼的"切换上下文"的解释才恍然大悟，楼主确实表达得有点偏差了。

23 楼 TryRelax 2016-09-06  

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
以前我的理解太浅薄了，以为就是一个意思，其实一个句号一个意思，体现在方向不同。第一个借用别人的函数，第二个借用别人的上下文环境。

还有这个说的也很赞，这就是所说的借用别人的上下文环境

菜花码农 写道

function add(a,b)
{
    alert(a+b);
}
function sub(a,b)
{
    alert(a-b);
}

add.call(sub,3,1);
个人理解call和apply的作用就是切换函数的对象上下文。

“这个例子中的意思就是用 add 来替换 sub“，应该是将add执行的上下文由window切换为sub，即this指向是从window变为sub，仅此而已，并非add替换sub。这个例子很难说明什么。

22 楼 liujinyong1986 2016-08-07  

你讲的很不清楚甚至有点问题，call和apply函数这么理解，他用括号的第一个参数来代替this的指向，这么理解就简单了，像你说的什么函数代替之类的，按照你的理解第一个输出就不应该是4而是2

21 楼 我很无耻 2016-06-28  

感觉你好像说错了呢

add.call(sub,3,1);
//这个是修改add方法里面的this指向，也就是修改add当前函数的上下文，举这个例子完全没有任何意义。
animal.showName.call(cat,",");
// 而这个方法同理，但是有点意义了，同样是修改animal(函数)对象下的showName方法中的this指向，它指向了cat，也就是说showName方法中this.Name其实是指向了cat函数中的属性name，也就是Cat

20 楼 zzzhang 2016-06-28  

,感谢分享。受益很多。

19 楼 我自狂饮空度日 2016-03-17  

有些地方理解不对

18 楼 菜花码农 2015-05-21  

1.function Animal(){   
2.    this.name = "Animal";   
3.    this.showName = function(){   
4.        alert(this.name);   
5.    }   
6.}   
7. 
8.function Cat(){   
9.    this.name = "Cat";   
10.}   
11.  
12.var animal = new Animal();   
13.var cat = new Cat();   
14.   
15.//通过call或apply方法，将原本属于Animal对象的showName()方法交给对象cat来使用了。   
16.//输入结果为"Cat"   
17.animal.showName.call(cat,",");   
18.//animal.showName.apply(cat,[]); 

call 的意思是把 animal 的方法放到cat上执行，原来cat是没有showName() 方法，现在是把animal 的showName()方法放到 cat上来执行，所以this.name 应该是 Cat。

“call 的意思是把 animal 的方法放到cat上执行”这个应该是animal.showName调用时候，将animal中的this对象转变为cat，alert(this.name);这时候的this是cat，因此this.name==cat.name,所以输出是Cat

17 楼 菜花码农 2015-05-21  

function add(a,b)
{
    alert(a+b);
}
function sub(a,b)
{
    alert(a-b);
}

add.call(sub,3,1);
个人理解call和apply的作用就是切换函数的对象上下文。

“这个例子中的意思就是用 add 来替换 sub“，应该是将add执行的上下文由window切换为sub，即this指向是从window变为sub，仅此而已，并非add替换sub。这个例子很难说明什么。

16 楼 菜花码农 2015-05-21  

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();

这个段代码解释存在误区，首先执行var cat = new Cat("Black Cat");进入function Cat(name){ 
     Animal.call(this, name); 
}
这时候的this为Cat{}对象，并非Animal，再接执行function Animal(name){   
     this.name = name;   
     this.showName = function(){   
         alert(this.name);   
     }   
}
此时的this对象绑定为Cat{},因此是Cat对象获得了两个属性为：Cat{name:"Black Cat",showName:function(){   
         alert(this.name);   
     }}，回到var cat=Cat{name:"Black Cat",showName:function(){   
         alert(this.name);   
     }}最后才是cat.showName();

15 楼 ae6623 2015-04-24  

lar429608598 写道

ae6623 写道

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

楼主，最后一个双继承不知道什么意思，暂时还不理解你为什么不说继承，而是一直在谈，谁把谁的方法交给了谁，感觉很难懂啊，继承就一下子清晰了。

很遗憾的说，你理解的完全都是错的。。
add.call(sub,3,1); 你要这么理解：
还是调用的add(3, 1); 但是，在add这个函数执行的时候，当前的上下文this已经不是add对象的了，而是sub对象的。

跟this没啥关系啊，其实就是call方法前面的东西(add)都交给后面(sub)了，就像兄弟，接过这把枪。

add.call(sub,3,1) // sub 已经接过了add方法

14 楼 siegezhang 2015-04-21  

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

这个这样理解会更好一点：

将this的值绑定为sub，而add函数中的alert(a+b)执行与this无关，故还是与原来的不绑定保持一致。

13 楼 qq_21706873 2015-03-14  

                                                   

12 楼 whx0820 2015-01-28  

wyx177694333 写道

shileigong 写道

...
这个段中不太明白这个的意思
animal.showName.call(cat,","); 

这样写为什么不行呢？
animal.call(cat,",").showName(); 

貌似你理解错了，animal 是没有call方法的，如果存在这种写法大概是这样的：

function Animal(){    
    this.name = "Animal";    
    this.showName = function(){    
        alert(this.name);    
    }
    // [color=red]添加了call方法[/color]
    this.call = function (o){
        var temp_name = this.name;
        this.name = o.name;
        o.showName = this.showName;
        this.name = temp_name;
        return o;
    };  
}    

function Cat(){    
    this.name = "Cat";    
}

var animal = new Animal();    
var cat = new Cat();    
 
animal.call(cat,",").showName();

call()方法是Function对象的方法，animal是个变量，所以没有call()方法.这样理解对么？

11 楼 wohenni0931 2015-01-01  

按照自己的理解能力来讲，实例a真心没什么用，还有种乱指路的感觉。其他的很容易理解，顶一个！

10 楼 dolphin_gjh 2014-12-04  

很不错，学习了。

9 楼 wyx177694333 2014-09-28  

shileigong 写道

...
这个段中不太明白这个的意思
animal.showName.call(cat,","); 

这样写为什么不行呢？
animal.call(cat,",").showName(); 

貌似你理解错了，animal 是没有call方法的，如果存在这种写法大概是这样的：

function Animal(){    
    this.name = "Animal";    
    this.showName = function(){    
        alert(this.name);    
    }
    // [color=red]添加了call方法[/color]
    this.call = function (o){
        var temp_name = this.name;
        this.name = o.name;
        o.showName = this.showName;
        this.name = temp_name;
        return o;
    };  
}    

function Cat(){    
    this.name = "Cat";    
}

var animal = new Animal();    
var cat = new Cat();    
 
animal.call(cat,",").showName();