提示：创建一个html，拷贝下面的内容，可运行。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>JavaScript apply和call方法的区别</title>
<script type="text/javascript">
function andy(){
this.name=' ';
this.getName=function(){
return this.name;
}
}
function wade(){
this.name=' ';
this.setName=function(name){
this.name=name;
}
}
var andy=new andy();
var wade=new wade();
//wade对象借用andy的getName方法
function testApply(){
wade.setName('德文.韦德');
alert(andy.getName.apply(wade));
}
//andy对象调用wade的setName方法
function testCall(){
wade.setName.call(andy,'刘德华');
alert(andy.getName());
}
function A(){
this.arg1='';
this.arg2='';
this.setArg=function(val1,val2){
this.arg1=val1;
this.arg2=val2;
}
this.toString=function(){
alert( '本类的 arg1='+this.arg1+',arg2='+this.arg2);
}
}
function B(){
this.arg1='';
this.arg2='';
this.toString=function(){
alert( 'b类的 arg1='+this.arg1+',arg2='+this.arg2);
}
}
var a=new A();
var b=new B();
//给apply传参数(将所有参数依次方在一个数组中传递)
function testApplyArgs(){
a.setArg.apply(b,['第一个值','第二个值']);
b.toString();
}
//给call传参数(从第二个参数起,将所有参数依次传入)
function testCallArgs(){
a.setArg.call(b,'andy','wade');
a.toString.call(b);
}
</script>
</head>
<body>
<h1>剖析apply和call的区别与联系</h1>
<p>原理：动态变换运行时的上下文环境</p>
<p>两者的作用：借用别人的方法来调用,就像调用自己的一样.</p>
<input type="button" value="apply实例" οnclick="testApply();"/>
<input type="button" value="call实例" οnclick="testCall();"/>
<p>对照代码可知:</p>
<p>wade对象借用了andy的getName方法(wade对象中没有getName方法),andy的getName方法的上下文对象变为wade</p>
<p>而andy对象调用了wade的setName方法(andy对象中没有setName方法),wade的setName方法的上下文对象变为andy</p>
<p>相同点:两个方法产生的作用完全一样</p>
<p>不同点:方法传递的参数不同</p>
<p>即从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的</p>
<input type="button" value="apply传参" οnclick="testApplyArgs();"/>
<input type="button" value="call传参" οnclick="testCallArgs();"/>
</body>
</html>
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
