prototype.js是一个设计的非常优雅且很有实用价值的js基础类库,其源码非常值得研究。研究它的源码不仅能提升个人水平,而且对你打下坚实的js基础也很有帮助。因本人技术水平有限,该解读仅供参考。


  1. 定义全局对象Prototype,包括属性版本号,属性版本号的定义有利于版本号的检测
  2. 9 var Prototype = {
  3. 10 Version: '1.5.0',
  4. 11 BrowserFeatures: {
  5. 12 XPath: !!document.evaluate
  6. 13 },
  7. 14
  8. 15 ScriptFragment: '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)',
  9. 16 emptyFunction: function() {},
  10. 17 K: function(x) { return x }
  11. 18 };

evaluate() 方法用来计算一个 XPath 表达式。

ScriptFragment是正则表达式,用于捕获字符串中的<script>标记及其中的内容

emptyFunction:是一个空函数,在后面经常会有用到

K:返回参数自身的函数,后面会有应用


  1. 20 var Class = {
  2. 21 create: function() {
  3. 22 return function() {
  4. 23 this.initialize.apply(this, arguments);
  5. 24 }
  6. 25 }
  7. 26 };

用字面量的方法定义一个Class类,可以用来创建类。使用此模式创建的类能够实现构造函数。注意,这里的Class是大写,所以不是js的保留字,也不是构造函数。

creat()方法:属性 create 是一个方法,返回一个构造函数。

一般使用如下:

  1. var X = Class.create();

返回的构造函数会执行名为 initialize 的方法,此时的initialize方法还没有定义。


  1. 28 var Abstract = new Object();//表示命名空间或者抽象类的东西
  2. 29
  3. 30 Object.extend = function(destination, source) {
  4. 31 for (var property in source) {
  5. 32 destination[property] = source[property];//将source的所有属性复制到destination
  6. 33 }
  7. 34 return destination;
  8. 35 };

Abstract 的定义更多是为了保持命名空间清晰的考虑,也就是说,我们可以给 Abstract 这个对象实例添加新的对象定义。 Object其实是一个函数,他没有任何成员,所以是一个空类,所以Abstract也就没有任何成员。

通过一个静态函数Object.extend(destination, source)实现了js中的继承。

  1. var a = new ObjectA(), b = new ObjectB();
  2. var c = a.extend(b);

此时 c 对象同时拥有 a 和 b 对象的属性和方法。但是与多重继承不同的是,c instanceof ObjectB 将返回false


  1. 37 Object.extend(Object, {
  2. 38 inspect: function(object) {// 一个静态方法, 传入一个对象, 返回对象的字符串表示
  3. 39 try {
  4. 40 if (object === undefined) return 'undefined'; // 处理undefined情况
  5. 41 if (object === null) return 'null'; // 处理null情况
  6. 42 return object.inspect ? object.inspect() :
  7. 43 object.toString();
  8. 44 } catch (e) {
  9. 45 if (e instanceof RangeError) return '...';// 处理异常情况
  10. 46 throw e;
  11. 47 }
  12. 48 },
  13. 49 keys: function(object) { // 一个静态方法, 传入一个对象, 返回该对象中所有的属性, 构成数组返回
  14. 50 var keys = [];//定义空数组,用来保存数据
  15. 51 for (var property in object)
  16. 52 keys.push(property); // 将每个属性压入到一个数组中
  17. 53 return keys;
  18. 54 },
  19. 55
  20. 56 values: function(object) {//同上
  21. 57 var values = [];
  22. 58 for (var property in object)
  23. 59 values.push(object[property]);
  24. 60 return values;
  25. 61 },
  26. 62
  27. 63 clone: function(object) { // 一个静态方法, 传入一个对象, 克隆一个新对象并返回
  28. 64 return Object.extend({}, object);
  29. 65 }
  30. 66 });

PrototypeObject类进行的扩展主要是通过静态函数Object.extend实现扩展。inspect主要是将对象转换为字符串做的一个检查,用到了try…catch语句。三目运算符中,如果对象定义了inspect方法(true), 则调用该方法返回(object.inspect()), 否则返回对象的toString()值。


  1. Function.prototype.bind = function() {
  2. var __method = this, args = $A(arguments), object = args.shift();
  3. return function() {
  4. return __method.apply(object, args.concat($A(arguments)));
  5. }
  6. }

将函数绑定到某个对象运行,可在绑定的时候添加参数,例如:

  1. var obj1={p:"obj1"};
  2. var obj2={
  3. p:"obj2",
  4. method:function(args){
  5. alert(args+this.p);
  6. }
  7. }
  8. obj2.method("this is ");//显示“this is obj2”;
  9. obj2.method.bind(obj1,"now this is ");//显示“now this is obj1”;

  1. Function.prototype.bindAsEventListener = function(object) {
  2. var __method = this, args = $A(arguments), object = args.shift();
  3. return function(event) {
  4. return __method.apply(object, [( event || window.event)].concat(args).concat($A(arguments)));
  5. }
  6. }

bind一样,不过这个方法一般用做html控件对象的事件处理。所以要传递event对象
假设有节点node1,则:

  1. node1.onclick=function(){
  2. clickHandler.bindAsEventListener(this)(event||window.event);
  3. }

所有的数字类型都是Number类的实例,下面就是给Number类定义一些方法:

  1. Object.extend(Number.prototype, {
  2. /*
  3. 将数字转换为颜色的形式
  4. */
  5. toColorPart: function() {
  6. var digits = this.toString(16);
  7. if (this < 16) return '0' + digits;
  8. return digits;
  9. },
  10. succ: function() {
  11. return this + 1;
  12. },
  13. times: function(iterator) {
  14. $R(0, this, true).each(iterator);
  15. return this;
  16. }
  17. });

prototype.js 源码解读(01)的更多相关文章

  1. prototype.js 源码解读(02)

    如果你想研究一些比较大型的js框架的源码的话,本人建议你从其最初的版本开始研读,因为最初的版本东西少,易于研究,而后的版本基本都是在其基础上不断扩充罢了,所以,接下来我不准备完全解读prototype ...

  2. js便签笔记(10) - 分享:json2.js源码解读笔记

    1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...

  3. js便签笔记(10) - 分享:json.js源码解读笔记

    1. 如何理解“json” 首先应该意识到,json是一种数据转换格式,既然是个“格式”,就是个抽象的东西.它不是js对象,也不是字符串,它只是一种格式,一种规定而已. 这个格式规定了如何将js对象转 ...

  4. fastclick.js源码解读分析

    阅读优秀的js插件和库源码,可以加深我们对web开发的理解和提高js能力,本人能力有限,只能粗略读懂一些小型插件,这里带来对fastclick源码的解读,望各位大神不吝指教~! fastclick诞生 ...

  5. json2.js源码解读记录

    相关内容:json详细用法.js语法.unicode.正则   json特点--最简单.最小巧的经典js库.   json作者:道克拉斯.克劳福德(Douglas Crockford)--js大牛 出 ...

  6. require.js 源码解读——配置默认上下文

    首先,我们先来简单说一下,require.js的原理: 1.载入模块
 2.通过模块名解析出模块信息,以及计算出URL
 3.通过创建SCRIPT的形式把模块加载到页面中.
 4.判断被加载的脚本,如 ...

  7. 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

    关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...

  8. Golang 源码解读 01、深入解析 strings.Builder、strings.Join

    strings.Builder 源码解析. 存在意义. 实现原理. 常用方法. 写入方法. 扩容方法. String() 方法. 禁止复制. 线程不安全. io.Writer 接口. 代码. stri ...

  9. 前端编译原理 parser.js源码解读

    前面已经介绍了一个jison的使用,在正常开发中其实已经够用下,下面主要是看了下parser.js代码解读下,作为一些了解. 下面以最简单的文法产生的parser做一些代码注释 下面是一些注释,标示了 ...

随机推荐

  1. 开源免费天气预报接口API以及全国全部地区代码!!(国家气象局提供)

    国家气象局提供的天气预报接口 接口地址: http://www.weather.com.cn/data/sk/101010100.html http://www.weather.com.cn/data ...

  2. C++之枚举

    1. 声明枚举类型格式 enum Day{ Mon,Tue=5,Wed};//Mon=0;Tue=5;Wed=6 enumDay1{Mon1,Tue1,Wed1};//Mon1=0;Tue1=1;We ...

  3. 基于AFNetworking3.0网络封装

    概述 对于开发人员来说,学习网络层知识是必备的,任何一款App的开发,都需要到网络请求接口.很多朋友都还在使用原生的NSURLConnection一行一行地写,代码到处是,这样维护起来更困难了. 对于 ...

  4. python np.linspace

    该函数的形式为: linspace(start, stop, num=50, endpoint=True, retstep=False, dtype=None) 作用为:在规定的时间内,返回固定间隔的 ...

  5. css3 盒模型

    0,前言 在css2.1 之前,我们都熟知的两种盒模型,一种是w3c标准盒模型,另外一种是怪异模式下的盒模型.在css3之前我们一直使用的是标准盒模型,但是标准盒模型的宽度总是需要小心的去使用,稍有不 ...

  6. 浅谈Mamcached集成web项目

    1.资源文件配置 config.properties 添加 #memcached服务器地址 memchchedIP=192.168.1.8 2.编写工具类 MemUtils package cn.co ...

  7. Windows I/O模型、同步/异步、阻塞/非阻塞

    转载自:http://www.cppblog.com/tx7do/articles/5954.html 同步 所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回.按照这个定义,其实 ...

  8. mvc5 + ef6 + autofac搭建项目(repository+uow)(一)

    直奔主题了,不那么啰嗦. 整体框架的参考来源是  O# 的框架,在此感谢锋哥一直以来的开源,让我们有的学 如下图: (图一) 一下分三个步骤说明,分别为 dbContext,repository,uo ...

  9. AutoResetEvent 详解

    AutoResetEvent 允许线程通过发信号互相通信.通常,此通信涉及线程需要独占访问的资源. 线程通过调用 AutoResetEvent 上的 WaitOne 来等待信号.如果 AutoRese ...

  10. 需要 了解 j2ee 框架

    只要你是用java来做WEB应用,绝对少不了使用j2ee框架,目前流行的有 l\5qa_{z   Y(/VW&K&:   )zt*am;   1)struts   2)spring   ...