javascript 中对象的继承〔转贴〕_Javascript教程-查字典教程网
javascript 中对象的继承〔转贴〕
javascript 中对象的继承〔转贴〕
发布时间:2016-12-30 来源:查字典编辑
摘要:1、关于javascript的apply和call函数prototype.js中用了大量的apply和call函数,不注意会造成理解偏差。官...

1、关于javascript的apply和call函数

prototype.js中用了大量的apply和call函数,不注意会造成理解偏差。

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

apply与call的区别是第二个参数不同。apply是数组或者arguments对象。而call是逗号隔开的任何类型。

apply,call方法最让人混淆的地方也是apply,call的特色。但最好不要滥用。

能改变调用函数的对象。如下例,函数中用到this关键字,这时候this代表的是apply,call函数的第一个参数。

<scriptsrc="prototype1.3.1.js"></script>

<inputtype="text"id="myText"value="inputtext">

<script>

functionObj(){

this.value="对象!";

}

varvalue="global变量";

functionFun1(){

alert(this.value);

}

window.Fun1();

Fun1.apply(window);

Fun1.apply($('myText'));

Fun1.apply(newObj());

</script>

2、关于闭包

prototype.js在Class.create,bind等中用到javascript的闭包特色。但整体上prototype.js对于强大的闭包特性用的不多。大家可以参阅我翻译的篇文章了解闭包。

3、让我比较反感的两个方法

(1)

varClass={

create:function(){

returnfunction(){

this.initialize.apply(this,arguments);

}

}

}

很讨厌用别的语言的风格来写javascript。用这个方法构造自定义类并没有觉得有多方便,减少代码行数,只会让人难理解,多定义一个initialize方法。

其实讨厌这条有些牵强,不过修改Object的原型对象就有点过分了。

(2)Object.prototype.extend

先不过你取个extend的名字会让熟悉java的人引起的歧义。修改Object的prototype就说不过去了。不知道作者是怎么考虑的。当你forin循环对象是,麻烦就来了。可能有人会问你forin干吗。我一个项目中既用了DWR,也用了prototype.js,dwr返回的javascript对象都多了个exetend属性,还得特殊处理。

以前我比较过dojo和prototype.js中继承的实现,现在我明白个道理。对于javascript这种没有静态类型检查,语法宽松的语言来讲,如果你选择了某个js类库,那你也必须适应作者写javascript的风格。prototype.js的作者对extend的使用炉火纯青,如果我们不当它只是个属性拷贝的函数的话,多读读prototype.js的代码是好的。

4、关于函数的绑定

类库提供了Function.prototype.bindFunction.prototype.bindAsEventListener两个方法。首先我们从概念上解释一个这两个方法。

任何一个函数都可以调用这两个方法;参数的是javascript对象或网页上元素对象;返回类型是个函数对象。

本来我就是个函数,返回还是函数,到这两个函数有什么不同呢。看实现代码,关键还是applycall函数的代码。其实这里只是转化了一下方法调用的对象。

<scriptsrc="prototype1.3.1.js"></script>

<inputtype=checkboxid=myChkname="asf"value=1>Test

<script>

varCheckboxWatcher=Class.create();

CheckboxWatcher.prototype={

initialize:function(chkBox,message){

this.chkBox=$(chkBox);

this.message=message;

this.chkBox.onclick=this.showMessage.bindAsEventListener(this);

},

showMessage:function(evt){

alert(this.message+'('+evt.type+')');

}

};

newCheckboxWatcher('myChk','message!!!!');

//$('myChk').onclick=function(){};

</script>

这是https://compdoc2cn.dev.java.net/上举的例子,个人感觉没什么意思,反而让我对bind,bindAsEventListener有些反感。(javascript就是这样,明明大家都知道的语法,但写出来的代码差别确很大)

看下面代码:

<scriptsrc="prototype1.3.1.js"></script>

<inputtype=checkboxid=myChkname="chk"value=1>Test

<script>

functionClass(){

this.name="class";

}

Class.prototype.getName=function(){

alert(this.name);

}

varobj=newClass();

//$('myChk').onclick=obj.getName;

$('myChk').onclick=obj.getName.bind(obj);

//$('myChk').onclick=obj.getName.bind($('myChk'));

</script>

从上面代码可以看出bind/bindAsEventListener只是包装了一下apply/call方法,改变方法的调用对象。如例子,你可以把obj.getName方法转化成任何对象调用,并且把方法让表单元素触发。(bind和bindAsEventListener之间只是返回函数的参数不同)

这两个方法也可以用在对象之间的方法重用,实现类似继承方法的概念。看以下代码,其实是比较无聊的。

<scriptsrc="prototype1.3.1.js"></script>

<script>

functionClass1(name){

this.name=name;

}

Class1.prototype.getName=function(){

alert(this.name);

}

functionClass2(name){

this.name=name;

this.getName=Class1.prototype.getName.bind(this);

}

varobj1=newClass2("yql");

obj1.getName();

varobj2=newObject();

obj2.name="zkj";

obj2.fun=Class1.prototype.getName.bind(obj2);

obj2.fun();

</script>

我从来没读过prototype.js的扩展项目代码,也不知道bind..的最佳实践,一起挖掘吧。但你绝对不要把bind/bindAsEventListener从绑定的词义上来理解,可能会让你更加迷惑。从apply/call理解本质。应用某一对象的一个方法,用另一个对象替换当前对象。

5、关于事件的注册

<scriptsrc="prototype1.3.1.js"></script>

<inputtype=checkboxid=myChkname="chk"value=1>Test

<script>

Event.observe(myChk,'click',showMessage,false);

//$('myChk').onclick=showMessage;

//$('myChk').onclick=showMessage.bind();

$('myChk').onclick=showMessage.bind($('myChk'));

functionshowMessage(){

alert(this.value);

}

</script>

执行上面代码,你就能明白Event.observe与bind/bindAsEventListener之间的区别:

(1)显然Event.observe有限制,只能处理简单的函数,并函数中不能有this之类的东西。

(2)Event.observe内部用到addEventListener/attachEvent。能把多个函数加到一个触发事件(window.onload)。bind是覆盖。

6、关于事件监听最佳实践

很显然prototype.js提供的事件注册方法不是很完善。那看看dojo的时间注册吧(中文版),更加复杂,估计很多人像我一样,对于dojo暂时持观望态度。

如果你看过的前篇关于闭包的介绍,可能见过以下代码。

看以下代码前我想表述一个观点,任何网页中元素,浏览器都会为你创建一个对象(见)。(我觉得)这些对象与你建立javascript对象区别是它们有事件监听,会响应鼠标键盘的事件。如果你用了以下代码,那么把事件监听代码很好的转化到你的javascript代码中。

functionassociateObjWithEvent(obj,methodName){

return(function(e){

e=e||window.event;

returnobj[methodName](e,this);

});

}

functionDhtmlObject(elementId){

varel=getElementWithId(elementId);

if(el){

el.onclick=associateObjWithEvent(this,"doOnClick");

el.onmouseover=associateObjWithEvent(this,"doMouseOver");

el.onmouseout=associateObjWithEvent(this,"doMouseOut");

}

}

DhtmlObject.prototype.doOnClick=function(event,element){

...//doOnClickmethodbody.

}

DhtmlObject.prototype.doMouseOver=function(event,element){

...//doMouseOvermethodbody.

}

DhtmlObject.prototype.doMouseOut=function(event,element){

...//doMouseOutmethodbody.

}

有时间我想用以上思想实现一个网页浮动框拖拉的代码(其实已经有很多了),待续........

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类