首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

JS: call跟apply 区别

2012-11-22 
JS: call和apply 区别JS: call和apply 区别?JS在线测试?http://runjs.cn/?call方法:?语法:call([thisObj[,

JS: call和apply 区别

JS: call和apply 区别

?

JS在线测试?http://runjs.cn/

?

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

apply方法:?
语法:apply([thisObj[,argArray]])?
定义:应用某一对象的一个方法,用另一个对象替换当前对象。?
说明:?
如果?argArray?不是一个有效的数组或者不是?arguments?对象,那么将导致一个?TypeError。?
如果没有提供?argArray?和?thisObj?任何一个参数,那么?Global?对象将被用作?thisObj, 并且无法被传递任何参数。?

?

1)无疑关于call,最简单的解释就是:把隐藏的第一个参数显示化。因为通常一个函数(Function)的调用,会有一个额外的隐藏参数,就是函数(Function)所属的对象(如果没有所特指,则为global(如window)对象),在函数内你可用this关键字访问之。

从call的构造式 -- call(thisArg[,arg1,arg2…] ]);可看出

call(apply)方法可将一个函数的对象上下文(Function Context)从初始的上下文改变为由 thisObj 指定的新对象,这就是利用call(apply)的最大优势。说到此,我们不妨提提所谓的Function Context到底是为何物。先看看下面FunctionContextDemo:vvar changed={ item:"banana", act: "eating" };

var original={        item: "chair", act: "sitting in", ask: function(){  return "who's been "+this.act+" my "+this.item; }};alert("Original : " + original.ask());alert("Not so simple,that have been changed to: " + original.ask.call(changed));

?解析上述代码:

?

最初存在2个对象changed和original,changed即就是一个数组,分别有item和act属性,而original除了具有和changed一样的item和act属性,还具有一个ask函数(询问到底是谁坐在椅子上),故当调用original.ask()时,可以看到意料中的结果:who's been sitting in my chair.而仔细往下看,当我们调用original.ask.call(changed)时,你觉得会出现什么的结果呢?在此,是利用了call把original的方法(函数)ask给与changed对象来执行,原来changed是没有ask方法(函数),如此绑定之后,函数的对象上下文(Function Context)即就是changed对象,故在方法(函数)ask里所调用的this就应该是changed对象,则可推知original.ask.call(changed)的结应该是:who's been eating my banana.

通过FunctionContextdemo例子可看出如果我们需要在编程过程中需要替换函数的对象上下文(Function Context),call就是不错的选择。

你可以试着把FunctionContextdemo例子修改如下,再看看是什么结果:

?

var changed={ item:"banana", act: "eating" };var original={item: "chair",act: "sitting in"};function ask(){   return "who's been "+this.act+" my "+this.item;}alert("Original : " + ask.call(original));alert("changed: " + ask.call(changed));

?

?2)javascript如何利用call来模拟面向对象中的继承的,而且可以实现多重继承

?

// 多重继承function base1() {        this.member = " base1_Member";        this.showSelf = function() {        window.alert(this.member);    }}function base2() {    this.person = " base2_Member";    this.act = " is dancing happily";    this.showAction = function() {        window.alert(this.person + this.act);    }}function extend() {    base1.call(this);    base2.call(this);}window.onload=function(){   var demo = new extend();   demo.showSelf();   demo.showAction();}

?但仔细深入看看,这样的继承是有问题的,直接在类函数体里面定义成员方法,将导致每个实例都有副本,重复占用了内存。

?

最为优雅简洁的方式应该算是基于原型(prototype)继承。

3)接下来我们再次来看看javascript框架prototype里是如何利用apply来创建一个定义类的模式:

?

var Class = {  create: function() {x    return function() {      this.initialize.apply(this, arguments);    }  }};

?解析:

?

从代码看,该对象仅包含一个方法:Create,其返回一个函数,即类。但这也同时是类的构造函数,其中调用initialize,而这个方法是在类创建时定义的初始化函数,如此就可以实现prototype中的类创建模式.目的是规定如此一个类创建模式,让类的初始化函数名一定是initialize(),而this.initialize.apply(this, arguments);(令人有些费解)则是保证initialize一定会在类的实例创建后调用,既方便管理又体现Object-Oriented的思想。

注意: 里边的this其实是同一对象,即相当于类本身调用自己的构造函数来创建Class对象! 因为apply方法的第二个参数本身要求是一个数组,所以传递给该函数的参数也传递给类的initialize方法,如果直接写为 this.initialize(arguments); 则所有的参数是作为一个数组传递给了initialize构造函数。

var vehicle=Class.create();vehicle.prototype={    initialize:function(type){        this.type=type;    }    showSelf:function(){        alert("this vehicle is "+ this.type);    }}var moto=new vehicle("Moto");moto.showSelf();

?4) 活用apply(javascript框架prototype的事件绑定):

?

Function.prototype.bind = function() {  var __method = this;   var args = $A(arguments);   var object = args.shift();  return function() {     // 调用函数的apply方法执行函数, 其中的object为目标对象, args为bind方法中的参数列表(除了第一个参数以外的参数构成的数组)    return __method.apply(object, args.concat($A(arguments)));// 事实上, 这里的$A(arguments)一定是一个空数组  }}

?代码解析:

该bind用途在于将某个函数绑定到特定的函数去执行,

a) var __method = this;这首先把Function Context重新赋值到一个本地变量,使得在Closure(这是一个javascript的特性,可解释为"闭包")中都能访问到,如此在下边就可以方便获取了。它实质就是bind方法的调用者, 是一个函数对象。

b) var args = $A(arguments);这里因为arguments本就是一个类数组的对象,通过$A(arguments)将传入到bind方法的参数都转化为array.

c) var object = args.shift();通过截取args的第一个参数获取Target Object(目标对象),此时args为除了第一个参数以外的参数构成的数组(array)

d) 这是最关键的一步,返回一个新的函数对象(不带有任何的参数的函数),在此通过apply把__method(bind方法的调用者)绑定到Target Object(目标对象),并给与除了Target Object(目标对象)之外的所有参数构成的数组args.concat($A(arguments)),最终Target Object(目标对象)就可执行__method了。

如此费劲周折的绑定某一个函数所换来的优势是,从此你不需要顾及Function Context的混乱所带来的额外顾虑。

原文:http://blog.163.com/bobo0218bo@126/blog/static/3329139320071115111153224/

?

?

?

?

热点排行