类之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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
Sep 30 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
详解React的回调渲染模式
2020/09/10 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
Django DRF路由与扩展功能的实现
2020/06/03 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
高一自我鉴定
2013/12/17 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
日语系毕业求职信
2014/07/27 职场文书
民事赔偿协议书
2014/11/02 职场文书
党小组评议意见
2015/06/02 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL