javascript 中对象的继承〔转贴〕


Posted in Javascript onJanuary 22, 2007

1、关于javascript的apply和call函数
prototype.js中用了大量的apply和call函数,不注意会造成理解偏差。
官方解释:应用某一对象的一个方法,用另一个对象替换当前对象。
apply与call的区别是第二个参数不同。apply是  数组或者arguments 对象。而call是逗号隔开的任何类型。

apply,call方法最让人混淆的地方也是apply,call的特色。但最好不要滥用。
能改变调用函数的对象。如下例,函数中用到this关键字,这时候this代表的是apply,call函数的第一个参数。

<script src="prototype1.3.1.js"></script>
<input type="text" id="myText"  value="input text">
<script>
   function Obj(){
       this.value="对象!";
   }
   var value="global 变量";
   function Fun1(){
       alert(this.value);
   }
   window.Fun1();
   Fun1.apply(window); 
   Fun1.apply($('myText')); 
   Fun1.apply(new Obj()); 
</script>

2、关于闭包 
prototype.js在Class.create,bind等中用到javascript的闭包特色。但整体上prototype.js对于强大的闭包特性用的不多。大家可以参阅我翻译的篇文章了解闭包。
3、让我比较反感的两个方法
(1)
var Class = {
  create: function() {
    return function() { 
      this.initialize.apply(this, arguments);
    }
  }
}
很讨厌用别的语言的风格来写javascript。用这个方法构造自定义类  并没有觉得有多方便,减少代码行数,只会让人难理解,多定义一个initialize方法。
其实讨厌这条有些牵强,不过修改Object的原型对象就有点过分了。
(2)Object.prototype.extend
  先不过你取个extend的名字会让熟悉java的人引起的歧义。修改Object的prototype就说不过去了。不知道作者是怎么考虑的。当你for in循环对象是,麻烦就来了。可能有人会问你for in干吗。 我一个项目中既用了DWR,也用了prototype.js,dwr返回的javascript对象都多了个exetend属性,还得特殊处理。
  以前我比较过dojo和prototype.js中继承的实现,现在我明白个道理。对于javascript这种没有静态类型检查,语法宽松的语言来讲,如果你选择了某个js类库,那你也必须适应作者写javascript的风格。prototype.js的作者对extend的使用炉火纯青,如果我们不当它只是个属性拷贝的函数的话,多读读prototype.js的代码是好的。
4、关于函数的绑定
  类库提供了Function.prototype.bind  Function.prototype.bindAsEventListener两个方法。首先我们从概念上解释一个这两个方法。
任何一个函数都可以调用这两个方法;参数的是javascript对象或网页上元素对象;返回类型是个函数对象。
本来我就是个函数,返回还是函数,到这两个函数有什么不同呢。看实现代码,关键还是apply\call函数的代码。其实这里只是转化了一下方法调用的对象。

<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="asf" value=1> Test
<script>
    var CheckboxWatcher = 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 + ')');
       }
    };
new CheckboxWatcher('myChk','message!!!!');
//$('myChk').onclick=function(){};
</script>
这是 https://compdoc2cn.dev.java.net/ 上举的例子,个人感觉没什么意思,反而让我对bind,bindAsEventListener有些反感。(javascript就是这样,明明大家都知道的语法,但写出来的代码差别确很大)
看下面代码:

<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
function Class(){
    this.name="class";
}
Class.prototype.getName=function(){
    alert(this.name);
}
var obj=new Class();
//$('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之间只是返回函数的参数不同)
这两个方法也可以用在对象之间的方法重用,实现类似继承方法的概念。看以下代码,其实是比较无聊的。

<script src="prototype1.3.1.js"></script>
<script>
function Class1(name){
    this.name=name;
}
Class1.prototype.getName=function(){
    alert(this.name);
}
function Class2(name){
    this.name=name;

this.getName=Class1.prototype.getName.bind(this);
}
var obj1=new Class2("yql");
obj1.getName();
var obj2=new Object();
obj2.name="zkj";
obj2.fun=Class1.prototype.getName.bind(obj2);
obj2.fun();
</script>

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

5、关于事件的注册 

<script src="prototype1.3.1.js"></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
Event.observe(myChk, 'click', showMessage, false);
//$('myChk').onclick=showMessage;
//$('myChk').onclick=showMessage.bind();
$('myChk').onclick=showMessage.bind($('myChk'));
function showMessage() {
      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代码中。

function associateObjWithEvent(obj, methodName){
    return (function(e){
        e = e||window.event;
        return obj[methodName](e, this);
    });
}
function DhtmlObject(elementId){
    var el = 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){
    ... // doOnClick method body.
}
DhtmlObject.prototype.doMouseOver = function(event, element){
    ... // doMouseOver method body.
}
DhtmlObject.prototype.doMouseOut = function(event, element){
    ... // doMouseOut method body.
}

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

Javascript 相关文章推荐
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
小程序实现多列选择器
Feb 15 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
利用javascript中的call实现继承
Jan 22 #Javascript
Javascript里使用Dom操作Xml
Jan 22 #Javascript
幻宇的层模拟窗口效果-提供演示和下载
Jan 20 #Javascript
写的htc的数据表格
Jan 20 #Javascript
共享自己写一个框架DreamScript
Jan 20 #Javascript
javascript读取RSS数据
Jan 20 #Javascript
一个多次搜索+多次传值的解决方案
Jan 20 #Javascript
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
PHP goto语句用法实例
2019/08/06 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
关于axios返回空对象的问题解决
2017/04/04 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
Vue的Class与Style绑定的方法
2017/09/01 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
Python守护线程用法实例
2017/06/23 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Python if语句知识点用法总结
2018/06/10 Python
python3实现磁盘空间监控
2018/06/21 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
python sort、sort_index方法代码实例
2019/03/28 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
我们的节日端午节活动总结
2015/02/11 职场文书
如何正确理解python装饰器
2021/06/15 Python
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js