JavaScript中apply与call的用法意义及区别说明_javascript技巧

apply和call,它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数的方式有所区别:
Function.prototype.apply(thisArg,argArray);
Function.prototype.call(thisArg[,arg1[,arg2…]]);
从函数原型可以看到,第一个参数都被取名为thisArg,即所有函数内部的this指针都会被赋值为thisArg,这就实现了将函数作为另外一个对象的方法运行的目的。两个方法除了thisArg参数,都是为Function对象传递的参数。下面的代码说明了apply和call方法的工作方式:

复制代码 代码如下:

//定义一个函数func1,具有属性p和方法A
function func1(){
this.p="func1-";
this.A=function(arg){
alert(this.p+arg);
}
}
//定义一个函数func2,具有属性p和方法B
function func2(){
this.p="func2-";
this.B=function(arg){
alert(this.p+arg);
}
}
var obj1=new func1();
var obj2=new func2();
obj1.A("byA"); //显示func1-byA
obj2.B("byB"); //显示func2-byB
obj1.A.apply(obj2,["byA"]); //显示func2-byA,其中[“byA”]是仅有一个元素的数组,下同
obj2.B.apply(obj1,["byB"]); //显示func1-byB
obj1.A.call(obj2,"byA"); //显示func2-byA
obj2.B.call(obj1,"byB"); //显示func1-byB

可以看出,obj1的方法A被绑定到obj2运行后,整个函数A的运行环境就转移到了obj2,即this指针指向了obj2。同样obj2的函数B也可以绑定到obj1对象去运行。代码的最后4行显示了apply和call函数参数形式的区别。

与arguments的length属性不同,函数对象还有一个属性length,它表示函数定义时所指定参数的个数,而非调用时实际传递的参数个数。例如下面的代码将显示2:

复制代码 代码如下:

function sum(a,b){ return a+b;}

下面来看看JS手册中对call的解释:

call 方法
调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

说明白一点其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

引用网上一个代码段,运行后自然就明白其道理。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

call函数和apply方法的第一个参数都是要传入给当前对象的对象,及函数内部的this。后面的参数都是传递给当前对象的参数。
运行如下代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。

对于apply和call两者在作用上是相同的,但两者在参数上有区别的。
对于第一个参数意义都一样,但对第二个参数:
apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])

同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入

javascript apply用法 补充
funObj.apply([thisObj[,argArray]])
应用某一对象的一个方法,用另一个对象替换当前对象。
functionObj的方法执行时,函数中的this对象会被thisObj替换掉。
thisObj 可选项。将被用作当前对象的对象。
argArray 可选项。将被传递给该函数的参数数组。

复制代码 代码如下:

//apply在对象继承方面的应用,不使用prototype,隐式的将父对象属性赋给了子对象
function par(name)
{
this.parname=name;
}
function child(chname,parname){
this.chname=chname;
par.apply(this,new Array(parname));
};
var o=new child("john","Mr john");
alert(o.parname+";"+o.chname);
//apply可以在通用的方法调用方面进行使用
window.onunload=function()
{
alert("unload event is fired!");
}
function sayBye(name,toName)
{
alert(name+" says bye to "+toName);
}
function sayEndBiz(name,toName,content)
{
alert(name+" ends his talk about "+content +" with "+toName);
}
function addTo(args,func)
{
var oldHandler=window.onunload||function(){};
window.onunload=function()
{
func.apply(window,args);
oldHandler.apply(window, args);
}
}
addTo(new Array("John","everyone"),sayBye);
addTo(new Array("John","everyone","deveopment strategy of the company"),sayEndBiz)

时间: 2024-09-22 19:05:15

JavaScript中apply与call的用法意义及区别说明_javascript技巧的相关文章

关于JavaScript中apply与call的用法意义及区别

JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 先来看看JS手册中对call的解释: call 方法调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 参数thisObj可选项.将被用作当前对象的对象. arg1, arg2,  , argN可选项.将被传递方法参数序列. 说明call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从

javascript中apply和call方法的作用及区别说明_javascript技巧

一.call和apply的说明 1.call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同. 2.语法:foo.call(this, arg1,arg2,arg3) == foo.apply(this,

Javascript中函数名.length属性用法分析(对比arguments.length)_javascript技巧

本文实例分析了Javascript中函数名.length属性用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

JavaScript中判断函数是new还是()调用的区别说明_javascript技巧

方式1 复制代码 代码如下: function Person(n,a){ this.name = n; this.age = a; if(this instanceof Person){ alert('new调用'); }else{ alert('函数调用'); } } var p = new Person('jack',30); // --> new调用 Person(); // --> 函数调用 方式2 复制代码 代码如下: function Person(n,a){ this.name

javascript中apply、call和bind的使用区别_基础知识

在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的. 2.第一个参数都是this要指向的对象. 3.都可以利用后续参数传参. 那么他们的区别在哪里的,先看一个例子. var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " ,

JavaScript中iframe实现局部刷新的几种方法汇总_javascript技巧

Iframe是一种嵌入网页的框架形式,Web页面可以通过更改嵌入的部分,达到部分内容刷新. Iframe的用法与普通的标签元素DIV类似,可以指定在页面中嵌入的位置.颜色.界面布局等 一.iframe实现局部刷新方法一 <script type="text/javascript"> $(function(){ $("#a1").click(function(){ var name= $(this).attr("name"); $(&q

Javascript中3种实现继承的方法和代码实例_javascript技巧

继承是我们在实现面向对象编程的时候很重要的一个手段.虽然我们讲不能过度继承,多利用组合代替继承,但是继承总是免不了的.这里要讨论的就是Javascript中的继承机制. Javascript中实际上是没有继承的概念的,但是我们可以通过一些手段来模仿实现它.这种继承实际上把一个对象复制到另外一个对象内部.你需要注意的是所有的本地类和宿主类是不能作为基类被继承的,主要是为了安全方面的考虑. Javascript中的继承大约有三类:1.对象冒充:2.原型继承:3.二者的混合. 一.对象冒充 其实对象冒

javascript中获取元素标签中间的内容的实现方法_javascript技巧

使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示. 通过javascript进行动态的修改,修改的方法有两种: 1. 一种是使用html的每个标记的innerHTML属性,使用此属性,只要为它提供一个有意义的html代码片段,那么html解释器就可以将其中的内容进行解释,并显示在页面上,使用这种方式比较简单,每次修改前不需要先把原来的内容清除掉,而可以直接进行

javascript中的变量是传值还是传址的?_javascript技巧

这个标题念起来有点拗口,但却是理解数据结构的关键.标题中的4个术语,对应的英文分别是:shallow copy(注意,不是shadow copy).deep copy.pass by value.pass by reference(或pass by address).传址和传引用是一回事. 一门编程语言的核心是数据结构,粗略来讲,可以把数据结构分成不可变类型(immutable)和可变类型(mutable).为什么这么分呢?这涉及到内存分配问题.对于不可变类型,只要分配有限的内存空间即可,而对于