类之Prototype.js学习


Posted in Javascript onJune 13, 2007

Prototype.js作为javascript的成功的开源框架,封装了很多好用的功能,虽然官方没提供什么文档,不过在google上一搜,好多相关的文档,不过在学习使用的过程中还是碰到了一些问题,希望熟悉的朋友能多加指点,对于prototype.js学习我关注这么几点,同时针对每点也讲讲学习的结果和碰到的问题,^_^
   1、类的创建
     prototype.js已经封装好了,这个很简单。

var Person=Class.create();

 这样就创建了一个Person类,这个Person类必须提供initialize方法的实现:

Person.prototype={
                initialize:function(){
                }
     };

   对比java,Class.create相当于Class.forName(),initialize相当于构造器,和java的构造器一样,可以自定义为带参数性质的。
     可以看到在使用这样的方式定义class后,它和javascript原来的通过function方式来定义一个类就有明确的区分了,在这种情况下我们就可以用Class.create来定义类,用function来直接定义函数。
     类通常还涉及静态成员(static性质的)和实例成员(需要实例化才可调用)的定义。
     在javascript中这点也非常容易:
     静态成员:  

var Person={
               name:'person',
               getName:function(){return 'person'}
     };

实例成员: 

Person.prototype={
              childname:'child',
              eat:function()
     }

上面的Person.getName是可以直接这么调用的,但eat方法则需通过var person=new Person();person.eat();的方式来调用。
2、类的继承
     类的继承其实javascript本身就支持的,不过prototype提供了一种另外的方法。
     按照javascript的支持的实现:

var Student=Class.create();
     Student.prototype=new Person();

这样就实现了Student继承至Person。
     在使用prototype的情况下可以这么实现:

var Student=Class.create();
     Object.extend(Student.prototype,Person.prototype);
子类要增加方法时可使用  
Student.prototype.study=function(){};

Object.extend(Student.prototype,{
          study:function(){}
});

3、事件机制(对类方法执行的监听和观察)
     在事件机制上则碰到了一些疑惑,作为事件机制主要需要提供事件的定义,对于事件的监听以及对于事件的观察。
     在javascript中事件需要以on开头,也就是作为事件就需要采用onclick这样类似的命名:
     对上面的Student增加一个对外的事件,如:    

Student.prototype.study=function(){
            this.onstudy();
     }
     Student.prototype.onstudy=function(){};
这个onstudy就是交给相应的实例去实现的,例如实例采用这样的方式:  
function studyThis(){
         alert("study this");
     }
     var student=new Student();
     student.onstudy=studyThis();
对于事件通常都希望进行监听和观察,根据prototype提供的bindAsEventListener以及Observe,这么进行了尝试:
study.onstudy=watchStudy.bindAsEventListener(this);
     function watchStudy(event){
           alert("watch study");
     }

按照事件机制来说,在执行study的时候应该可以看到study this和watch study两个提示,但最后执行后只能看到watch study的提示,这是为什么呢?按照listener的概念的话,不应该覆盖原有方法的,不过我看了一下prototype.js的源代码,按照上面的编写方式确实会照成覆盖原方法。
     Observe是这么尝试的:
     Event.observe(study,'study',watchStudy,false);
     按照观察机制来说,应该在执行study的时候会看到两个提示,但最后执行后这行根本就没起到任何作用。
     这是为什么呢?

Javascript 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
js操作二级联动实现代码
Jul 27 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
玩转方法:call和apply
May 08 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
ajax请求data遇到的问题分析
Jan 18 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
JavaScript语法着色引擎(demo及打包文件下载)
Jun 13 #Javascript
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 #Javascript
Add Formatted Data to a Spreadsheet
Jun 12 #Javascript
excel操作之Add Data to a Spreadsheet Cell
Jun 12 #Javascript
List Installed Hot Fixes
Jun 12 #Javascript
List the UTC Time on a Computer
Jun 11 #Javascript
List the Codec Files on a Computer
Jun 11 #Javascript
You might like
php rsa加密解密使用详解
2015/01/14 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
python中pycurl库的用法实例
2014/09/30 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
有针对性的求职自荐信
2013/11/14 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
期末评语大全
2014/05/04 职场文书
公司辞职信模板
2015/05/13 职场文书
抢劫罪辩护词
2015/05/21 职场文书
汽车销售员工作总结
2015/08/12 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript