javascript 函数的方法call()和apply()
javascript 函数的方法call()和apply()
上文提到,函数也是javascript的对象,那么同样也有自己的方法。现在就来简单介绍一下call()方法和apply()方法。
本文主要参考:xiaofeizm55333童鞋的javaScript 中 call 函数的用法说明
call()和apply()的第一个参数都是要调用的函数的对象,在函数体内这一参数是关键字this的值。
call()的剩余参数是传递给要调用的函数的值。
结构如下:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
看完下面原作者列出的代码可以解释如下,call()方法就是要用thisObj里的属性或参数,调用call()方法前面的那个对象(函数)的方法
说的通俗一些就是
call()方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
[cc lang='javascript']
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
[/cc]
即add代替sub来接受3和1这两个参数,其等同于add(3,1)
更为复杂些的代码反而更容易理解,让我们看一下这个东西是怎么运行的吧
[cc lang='javascript']
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);
[/cc]
call 的意思是把 c1 的方法放到c2上执行,原来c2是没有showNam() 方法,现在是把c1 的showNam()方法放到 c2 上来执行,所以this.name 应该是 class2,执行的结果就是 :alert("class2");
我倒感觉这句可以这么理解一下,c1执行showName方法,只不过其中的this被对象c2给代替了
call()还可以实现继承,继续看原贴的代码,
[cc lang='javascript']
function Class1()
{
this.showTxt = function(txt)
{
alert(txt);
}
}
function Class2()
{
Class1.call(this);
}
var c2 = new Class2();
c2.showTxt("cc");
[/cc]
Class2里面调用了Class1的call()方法,这里的this已经是c2了。那么就相当于c1.showText.call(c2,'cc');和上面解释相同,不重复了。
call()还可以实现多继承
[cc lang='javascript']
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 c2 = new Class2();
c2.showAdd(1,2);
c2.showSub(2,1);
[/cc]
两个call()方法就实现了多重继承。呵。
apply()方法与call()方法完全一样,只是apply()方法后面要调用的参数要以数组形式给出即:[0,1]这样。呵。
====华丽的分隔线====
《JavaScript语言精粹》书中对 apply 方法有着更好理解的概括,现摘录如下:
因为 JavaScript 是一门函数式的面向对象编程语言,所以函数可以拥有方法(函数也是对象,当然可以有方法)。
apply 方法让我们构建一个参数数组并用其去调用函数。它也允许我们选择 this 的值。
apply 方法接收两个参数。第一个是将被绑定给 this 的值。第二个就是参数数组。
本文主要参考:xiaofeizm55333童鞋的javaScript 中 call 函数的用法说明
call()和apply()的第一个参数都是要调用的函数的对象,在函数体内这一参数是关键字this的值。
call()的剩余参数是传递给要调用的函数的值。
结构如下:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
看完下面原作者列出的代码可以解释如下,call()方法就是要用thisObj里的属性或参数,调用call()方法前面的那个对象(函数)的方法
说的通俗一些就是
call()方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
[cc lang='javascript']
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
[/cc]
即add代替sub来接受3和1这两个参数,其等同于add(3,1)
更为复杂些的代码反而更容易理解,让我们看一下这个东西是怎么运行的吧
[cc lang='javascript']
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);
[/cc]
call 的意思是把 c1 的方法放到c2上执行,原来c2是没有showNam() 方法,现在是把c1 的showNam()方法放到 c2 上来执行,所以this.name 应该是 class2,执行的结果就是 :alert("class2");
我倒感觉这句可以这么理解一下,c1执行showName方法,只不过其中的this被对象c2给代替了
call()还可以实现继承,继续看原贴的代码,
[cc lang='javascript']
function Class1()
{
this.showTxt = function(txt)
{
alert(txt);
}
}
function Class2()
{
Class1.call(this);
}
var c2 = new Class2();
c2.showTxt("cc");
[/cc]
Class2里面调用了Class1的call()方法,这里的this已经是c2了。那么就相当于c1.showText.call(c2,'cc');和上面解释相同,不重复了。
call()还可以实现多继承
[cc lang='javascript']
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 c2 = new Class2();
c2.showAdd(1,2);
c2.showSub(2,1);
[/cc]
两个call()方法就实现了多重继承。呵。
apply()方法与call()方法完全一样,只是apply()方法后面要调用的参数要以数组形式给出即:[0,1]这样。呵。
====华丽的分隔线====
《JavaScript语言精粹》书中对 apply 方法有着更好理解的概括,现摘录如下:
因为 JavaScript 是一门函数式的面向对象编程语言,所以函数可以拥有方法(函数也是对象,当然可以有方法)。
apply 方法让我们构建一个参数数组并用其去调用函数。它也允许我们选择 this 的值。
apply 方法接收两个参数。第一个是将被绑定给 this 的值。第二个就是参数数组。
design_ss- 帖子数 : 122
积分 : 373
威望 : 0
注册日期 : 11-12-28
您在这个论坛的权限:
您不能在这个论坛回复主题
10/09/13, 06:50 am 由 design_ss
» javascript 函数的方法call()和apply()
09/09/13, 05:10 am 由 design_ss
» JS中typeof与instanceof的区别
08/08/13, 11:10 am 由 design_ss
» JS中的构造函数解析
08/08/13, 09:44 am 由 design_ss
» js对象属性方法大总结
08/08/13, 08:46 am 由 design_ss
» js中的值类型和引用类型小结 文字说明与实例
08/08/13, 06:35 am 由 design_ss
» CSS3中轻松实现渐变效果
05/07/13, 09:48 am 由 design_ss
» jQUery 常用实例
03/07/13, 09:56 am 由 design_ss
» mask_layer 遮照
03/07/13, 08:18 am 由 design_ss