javascript中apply()和call()方法使用笔记

时间：2014-04-24 编辑：简简单单来源：一聚教程网

call()和apply()的第一个参数都是要调用的函数的对象，在函数体内这一参数是关键字this的值。

call()的剩余参数是传递给要调用的函数的值。

结构如下：call([thisObj[,arg1[, arg2[, [,.argN]]]]])

call()方法第一个参数与apply()方法相同，但传递给函数的参数必须列举出来

代码如下	复制代码

例1：

代码如下

复制代码

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); //huo .call(this);
HelloName.call(myObject);

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

例2：

代码如下	复制代码
function sum(num1, num2) { return num1 + num2; } console.log(sum.call(window, 10, 10)); //20 console.log(sum.apply(window,[10,20])); //30

当然可能还用在其他方面，不过我还不太明白其作用。正宗的解释是 call 方法调用一个对象的一个方法，以另一个对象替换当前对象。 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 网上有一段例子，很好的解释了这个：

代码如下	复制代码

至于apply的用法则跟call差不多，只不过里面的参数改为了数组。并且它还可以使用arguments声明来调用：

代码如下	复制代码

通过这样子的书写前提就是超类中的参数顺序与子类中的参数顺序完全一致时才适用

如果还不明白看完下面原作者列出的代码可以解释如下，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]这样。呵。

总结

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

上一个： ueditor百度编辑器配置和事件监听
下一个： wordrpess中Ssmay主题升级方法图解

推荐专题

最新下载

热门教程

javascript中apply()和call()方法使用笔记

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程