前端开发 HTML5 CSS3 HTML CSS JavaScript jQuery Bootstrap

js里面call和apply的区别及用法举例

JavaScript HTML我帮您 1年前  0次浏览
call 方法:

调用一个对象的一个方法,以另一个对象替换当前对象。

call(>>>>)
参数

thisObj

可选项。将被用作当前对象的对象。

arg1, arg2, , argN

可选项。将被传递方法参数序列。
说明

call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

应用于: Function 对象

简单的列子(函数调用):
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)
复杂点的例子
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);

注意,call 的意思是把 c1 的方法放到c2上执行,原来c2是没有showNam() 方法,现在是把c1 的showNam()方法放到 c2 上来执行,所以this.name 应该是 class2,执行的结果就是:alert("class2");
实现继承

function Class1()
{
this.showTxt = function(txt)
{
alert(txt);
}
}
function Class2()
{
Class1.call(this);
}
var c2 = new Class2();
c2.showTxt("cc");

这样 Class2 就继承Class1了,Class1.call(this) 的 意思就是使用 Class1 对象代替this对象,那么 Class2 中不就有Class1 的所有属性和方法了吗,c2 对象就能够直接调用Class1 的方法以及属性了,执行结果就是:alert("cc");
对的,就是这样,这就是 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);
}
很简单,使用两个 call 就实现多重继承了
当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法
说了call ,当然还有 apply,这两个方法基本上是一个意思
区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组



apply 方法:

应用某一对象的一个方法,用另一个对象替换当前对象。

apply(>)
参数

thisObj

可选项。将被用作当前对象的对象。

argArray

可选项。将被传递给该函数的参数数组。
说明

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。

如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

应用于: Function 对象


apply第一个参数为null

我们来看几行代码瞬间清晰了

function func(age)
{
alert("年龄:"+age+"\n姓名:"+this.name);
}

func(20);

结果为:"年龄:20" 姓名:""

var obj={name:'html580'};//构造一个对象;

func.apply(obj,<20>);//使用apply调用;

结果为:"年龄:20" 姓名: html580

此时func中的this就是obj对象;而

var obj={name:'lsc'};//构造一个对象;
func.apply(null,<20>);//使用apply调用;

结果为:"年龄:20" 姓名: ""

和普通调用没有任何的区别;普通调用中的this代表的是window对象;这里也代表window对象;


发表评论