1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

(function() {
 
  //Object对象的toString方法的引用
  var _toString = Object.prototype.toString;
 
  //属性拷贝
  function extend(destination, source) {
    for (var property in source)
      destination[property] = source[property];
    return destination;
  }
 
  //调用object的inspect(如果定义了)或toString方法，返回一个对象的字符串表示
  function inspect(object) {
    try {
      if (isUndefined(object)) return 'undefined';
      if (object === null) return 'null';
      return object.inspect ? object.inspect() : String(object);
    } catch (e) {
      if (e instanceof RangeError) return '...';
      throw e;
    }
  }
 
  function toJSON(object) {
    var type = typeof object;
    switch (type) {
      case 'undefined':
      case 'function':
      case 'unknown': return;
      case 'boolean': return object.toString();
    }
 
    if (object === null) return 'null';
    if (object.toJSON) return object.toJSON();
    if (isElement(object)) return;
 
    var results = [];
	//递归调用
    for (var property in object) {
      var value = toJSON(object[property]);
      if (!isUndefined(value))
        results.push(property.toJSON() + ': ' + value);
    }
 
    return '{' + results.join(', ') + '}';
  }
 
  //将一个对象转化为hash码
  function toQueryString(object) {
    return $H(object).toQueryString();
  }
 
  function toHTML(object) {
    return object && object.toHTML ? object.toHTML() : String.interpret(object);
  }
 
  //得到一个对象的所有属性名称
  function keys(object) {
    var results = [];
    for (var property in object)
      results.push(property);
    return results;
  }
 
 //得到一个对象的所有属性值
  function values(object) {
    var results = [];
    for (var property in object)
      results.push(object[property]);
    return results;
  }
 
 //克隆一个对象，返回新的对象
  function clone(object) {
    return extend({ }, object);
  }
 
  //判断一个对象是否是Element
  function isElement(object) {
    return !!(object && object.nodeType == 1);
  }
 
//判断一个对象是否是数组
  function isArray(object) {
    return _toString.call(object) == "[object Array]";
  }
 
//判断一个对象是否是Hash
  function isHash(object) {
    return object instanceof Hash;
  }
 
  function isFunction(object) {
    return typeof object === "function";
  }
 
  function isString(object) {
    return _toString.call(object) == "[object String]";
  }
 
  function isNumber(object) {
    return _toString.call(object) == "[object Number]";
  }
 
  function isUndefined(object) {
    return typeof object === "undefined";
  }
 
  extend(Object, {
    extend:        extend,
    inspect:       inspect,
    toJSON:        toJSON,
    toQueryString: toQueryString,
    toHTML:        toHTML,
    keys:          keys,
    values:        values,
    clone:         clone,
    isElement:     isElement,
    isArray:       isArray,
    isHash:        isHash,
    isFunction:    isFunction,
    isString:      isString,
    isNumber:      isNumber,
    isUndefined:   isUndefined
  });
})();

给一个对象增加一些属性和方法可以在其原型上增加，但是Prototype却并没有这么做，而是采用了现在广为流行的extend继承方式，jQuery和ExtJs也都采用了这种方式。
在上面代码中，定义了一个闭包，闭包内包括一些函数，为了将这些函数或是成为方法赋给Object对象，Prototype采用了extend机制。所谓extend，无外乎就是讲一个对象的属性和方法拷贝到另一个对象上去，这样另一个对象也就有了相同的属性和方法。

上面的代码中有对javascript各种对象类型的判断，其判断方式值得学习。
判断一个对象是否是函数，用typeof object === “function”，为什么不用“==”？因为“===”是全等运算符，其比较的是两个对象的值和类型，只有当两个对象的值和类型都相同时才是相等。需要注意到，在判断一个对象是否undefined时候，也是用到了“===”，如：typeof object === “undefined”
判断一个对象是字符串或是数字或是数组，采用了Object.prototype.toString.call()的方法，直接判断一个对象的字符串形式是否和目标对象（字符串或是数字或是数组）的字符串形式是否相同。

在闭包定义一些方法，然后在用extend方法将这些方法拷贝到Object对象，这样的话Object对象里就有了一些我们想要的方法了，这有点类似AOP的思想，往一个对象里注入我们想要的属性或方法。

看了上面的代码，让我想起来之前看到的一些类似的代码,下面这段代码来自于ExtJs的Ext.js文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

        isArray: function(v){
            return Object.prototype.toString.apply(v) === '[object Array]';
        },
 
        isObject: function(v){
            return v && typeof v == "object";
        },
 
        isPrimitive: function(v){
            var t = typeof v;
            return t == 'string' || t == 'number' || t == 'boolean';
        },
 
        isFunction: function(v){
            return typeof v == "function";
        },

您可能也喜欢：
prototype.js 源码之Prototype	JavaScript prototype学习笔记	extjs换肤	用ExtJs制作登陆界面	Ext读取xml文件生成动态表格和表单(续)
无觅

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

var Prototype = {
  Version: '1.6.1',
 
  Browser: (function(){
    var ua = navigator.userAgent;
	//opera浏览器为window定义了一个window.opera的属性，可以通过它来判断浏览器是否为opera。
    var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
    return {
   //而ie浏览器是通过对attachEvent这个私有的事件绑定方法的判断来实现的，由于opera也支持attachEvent，
    //所以又进行了!isOpera的判断
      IE:             !!window.attachEvent && !isOpera,
      Opera:          isOpera,
      WebKit:         ua.indexOf('AppleWebKit/') > -1,
      Gecko:          ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1,
      MobileSafari:   /Apple.*Mobile.*Safari/.test(ua)
    }
  })(),
 
  BrowserFeatures: {
  	//判断浏览器是否支持w3c提供的元素选择器
    XPath: !!document.evaluate,
	//是否支持w3c提供的元素css模式查找功能
    SelectorsAPI: !!document.querySelector,
	//元素是否可以扩展
     ElementExtensions: (function() {
	 //构造函数为element和HTMLElement,ie隐藏了HTMLElement这个类，不能通过代码访问
      var constructor = window.Element || window.HTMLElement;
	  //检查当前浏览器是否支持对元素的原型的扩展
      return !!(constructor && constructor.prototype);
    })(),
    //是否支持特定的元素扩展
    SpecificElementExtensions: (function() {
     //ie6和ie7不可访问HTMLDivElement，ie8和标准浏览器可以对这个类进行扩展，它继承自HTMLElement
      if (typeof window.HTMLDivElement !== 'undefined')
        return true;
 
      var div = document.createElement('div');
      var form = document.createElement('form');
      var isSupported = false;
 
	  //检查是否支持__proto__属性,firefox,safari,chrome提供了对prototype对象的访问
      if (div['__proto__'] && (div['__proto__'] !== form['__proto__'])) {
        isSupported = true;
      }
 
	  //释放创建出来的临时元素
      div = form = null;
 
      return isSupported;
    })()
  },
 
  //匹配script标签的内容的正则字符串
  ScriptFragment: ']*>([\\S\\s]*?)<\/script>',
  //json过滤
  JSONFilter: /^\/\*-secure-([\s\S]*)\*\/\s*$/,
  //空函数
  emptyFunction: function() { },
  K: function(x) { return x }
};

关于源码的分析网上有很多，上面代码的分析就基本上来自于这篇文章【prototype.js 源码学习笔记（一）】
这一部分内容主要应该就是浏览器判断和prototype版本号的体现。关于浏览器的判断可以参考我之前写过的一篇文章：【JavaScript判断浏览器类型及版本】，这篇文章里列出了各种浏览器的特征及其userAgent，根据userAgent就可以区分出不同的浏览器。
CSS最佳实践就有一点说用特性判断而非浏览器判断，以下就一些特性来区分不同的浏览器。在Prototype的源码中，是通过浏览器各自具有的特性来判断浏览器的类型的。

• opera浏览器为window定义了一个window.opera的属性，可以通过它来判断浏览器是否为opera。
• ie浏览器是通过对attachEvent这个私有的事件绑定方法的判断来实现的，由于opera也支持attachEvent，所以又进行了!isOpera的判断。
• 后面的几个浏览器判断是根据各个浏览器的userAgent来判断的，firefox用的是gecko,safari用的是webkit，chrome则是在webkit和gecko基础上开发的。safari和 chrome可以通过浏览器信息查找到字符串”KHTML”，firefox和chrome可以查找到字符串”gecko”,所以可以通过”gecko”,”KHTML”这几个字符串来区分它们。

Object.prototype.toString.call(window.opera) == ‘[object Opera]‘
该代码的意思是把Object的toString放到window.opera对象上使用，看其toString方法的结果是否等于’[object Opera]‘，关于call 方法的使用，可以参考这篇文章:【JavaScript 中的 call与apply】

XPath: !!document.evaluate
!!用来判断某对象是否有某一方法，上例子中如果浏览器不支持document.evaluate方法，那么document.evaluate就会为undefined，而对undefine取反就为false，再一次取反从其结果就知道该对象是否支持某一方法。这样的判断方式比起if else语句，真是要精简巧妙许多！

window.Element || window.HTMLElement
Element除了ie6和ie7其他浏览器都支持（包括ie8），但一个诡异的问题就出了，因为HTMLElement是继承自Element(参考这里：http://www.cnblogs.com/LongWay/archive/2008/10/08/1305952.html)，按常理来说支持访问Element就应该也支持对HTMLElement的访问，但是ie8访问HTMLElement却返回”undefined”。我在ie8下alert window.Element 和window.HTMLElement，其结果都为undefined

在DOM标准中，每个HTML元素都是继承自HTMLElement。在IE中将HTMLElement这个类隐藏了，咱们不能直接访问到这个类。除了ie而外的浏览器都能够访问到HTMLElement这个类。

参考文档：
document.evaluate方法的参考见这里http://liudaoru.javaeye.com/blog/129748
SelectorsAPI属性参考资料http://blog.darkthread.net/blogs/darkthreadtw/archive/2008/04/16/document-queryselector-in-ie8.aspx
ElementExtensions是检查浏览器是否可以访问Element或者HTMLElement类，参考这里：http://www.cnblogs.com/LongWay/archive/2008/10/08/1305952.html

您可能也喜欢：
JavaScript prototype学习笔记	prototype.js 源码之扩展Object	模仿QQ空间的警告提示栏	DOM 事件模型	Ajax 中的utils.js工具
无觅

//———————————————————
// 理解原型、构造、继承的示例
//———————————————————
function MyObject() {
this.v1 = ‘abc’;
}

function MyObject2() {
this.v2 = ‘def’;
}
MyObject2.prototype = new MyObject();

var obj1 = new MyObject();
var obj2 = new MyObject2();

alert(obj1.v1 + ” ” + obj2.v2 + ” ” + obj2.v1);

由alert可知道MyObject2具有了MyObject对象的属性

1). new()关键字的形式化代码
我们先来看“obj1 = new MyObject()”这行代码中的这个new关键字。
new关键字用于产生一个实例，但这个实例应当是从一个“原型的模板”复制过来的。这个用来作模板的原型对象，就是用“构造器
函数的prototype属性”所指向的那个对象。对于JavaScript“内置对象的构造器”来说，它指向内部的一个原型。

每一个函数，无论它是否用作构造器，都会有一个独一无二的原型对象。缺省时JavaScript用它构造出一个“空的初始对象实例(不是null)”。然而如果你给函数的这个prototype赋一个新的对象，那么构造过程将用这个新对象作为“模板”。

为了清楚地解释这个过程，我用代码形式化地描述一下这个过程：
//———————————————————
// new()关键字的形式化代码
//———————————————————
function new(aFunction) { // 如果有参数args
var _this = aFunction.prototype.clone(); // 从prototype中复制一个对象
aFunction.call(_this); // 调用构造函数完成初始化, (如果有,)传入args
return _this; // 返回对象
}

所以我们看到以下两点：
- 构造函数(aFunction)本身只是对传入的this实例做“初始化”处理，而不是构造一个对象实例。

- 构造的过程实际发生在new()关键字/运算符的内部。而且，构造函数(aFunction)本身并不需要操作prototype，也不需要回传this。

2). 由用户代码维护的原型(prototype)链
接下来我们更深入的讨论原型链与构造过程的问题。这就是：
- 原型链是用户代码创建的，new()关键字并不协助维护原型链

//———————————————————
// JS中“原型链表”的关键代码
//———————————————————
// 1. 构造器
function Animal() {};
function Mammal() {};
function Canine() {};
function Dog() {};

// 2. 原型链表
Mammal.prototype = new Animal();
Canine.prototype = new Mammal();
Dog.prototype = new Canine();

// 3. 示例函数
function isAnimal(obj) {
return obj instanceof Animal;
}

var dog = new Dog();
document.writeln(isAnimal(dog));

可以看到，在JS的用户代码中，“原型链表”的构建方法是一行代码：
“当前类的构造器函数”.prototype = “直接父类的实例”

3). 原型实例是如何被构造过程使用的
父类的构造过程仅仅发生在为原型(prototype属性)赋值的那一行代码上。其后，无论有多少个new MyObject2()发生，
MyObject()这个构造器都不会被使用。——这也意味着：
- 构造过程中，原型模板是一次性生成的；对这个原型实例的使用是不断复 制，而并不再调用原型的构造器。

我们先来看看下面的代码：

程序运行的结果表明，构造函数的prototype上定义的方法确实可以通过对象直接调用到，而且代码是共享的。显然，把方法设置到prototype的 写法显得优雅多了，尽管调用形式没有变，但逻辑上却体现了方法与类的关系，相对前面的写法，更容易理解和组织代码。

在JavaScript中，prototype不但能让对象共享自己财富，而且prototype还有寻根问祖的天性，从而使得先辈们的遗产可以代代相 传。当从一个对象那里读取属性或调用方法时，如果该对象自身不存在这样的属性或方法，就会去自己关联的prototype对象那里寻找；如果 prototype没有，又会去prototype自己关联的前辈prototype那里寻找，直到找到或追溯过程结束为止。

在JavaScript内部，对象的属性和方法追溯机制是通过所谓的prototype链来实现的。当用new操作符构造对象时，也会同时将构造函数的 prototype对象指派给新创建的对象，成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的，尽管有些浏览器(如Firefox)可以 让我们访问这个内置原型对象，但并不建议这样做。内置的原型对象本身也是对象，也有自己关联的原型对象，这样就形成了所谓的原型链。

在原型链的最末端，就是Object构造函数prototype属性指向的那一个原型对象。这个原型对象是所有对象的最老祖先，这个老祖宗实现了诸如 toString等所有对象天生就该具有的方法。其他内置构造函数，如Function, Boolean, String, Date和RegExp等的prototype都是从这个老祖宗传承下来的，但他们各自又定义了自身的属性和方法，从而他们的子孙就表现出各自宗族的那些 特征。

这就是JavaScript特有的“原型继承”。

JavaScript中的继承

function Person(name){
this.name = name; //设置对象属性，每个对象各自一份属性数据
};
Person.prototype.SayHello = function() //给Person函数的prototype添加SayHello方法。
{
alert(“Hello, I’m ” + this.name);
}
var javachen = new Person(“javachen”); //创建javachen对象
var website = new Person(“website”); //创建website对象
javachen.SayHello(); //通过javachen对象直接调用到SayHello方法
website.SayHello(); //通过website对象直接调用到SayHello方法
alert(javachen.SayHello == website.SayHello); //因为两个对象是共享prototype的SayHello，所以显示：true

对象可以掩盖原型对象的那些属性和方法，一个构造函数原型对象也可以掩盖上层构造函数原型对象既有的属性和方法。这种掩盖其实只是在对象自己身上创建了新的属性和方法，只不过这些属性和方法与原型对象的那些同名而已。JavaScript就是用这简单的掩盖机制实现了对象的“多态”性，与静态对象语言的虚函数和重载(override)概念不谋而合。

JavaScript有多种方式模拟继承.
1. 利用function:

function superClass() {
this.bye = superBye;
this.hello = superHello;
}

function subClass() {
this.inheritFrom = superClass;
this.inheritFrom();
this.bye = subBye;
}

或者:

function subClass() {
superClass.call(this);
}

先定义subClass的inheritFrom方法, 再调用这个方法(方法名称并不重要), 或者直接使用FunctionObject 的call 方法将this做参数, 都可以模拟实现从superClass的继承. 注意调用superClass时的this指向. 这个方法就是在执行subClass的cunstructor function时, 先执行supperClass的cunstructor function.这个方法的缺点在于子类仅仅是在自己的构造函数中, 将this作为参数调用了父类的构造函数, 将构造函数赋予父类的所有域赋予子类. 所以, 任何父类在构造函数之外(通过prototype)定义的域, 子类都无法继承. 而且子类的构造函数一定要在定义自己的域之前调用父类的构造函数, 免得子类的定义被父类覆盖. 使用这种方法子类也尽量不要使用prototype来定义子类的域, 因为prototype的定义在子类new的之后就执行, 所以它一定会在调用父类构造函数前, 同样会有被父类的定义覆盖的危险.

2. 利用prototype:

function superClass() {
this.bye = superBye;
this.hello = superHello;
}

function subClass() {
this.bye = subBye;
}
subClass.prototype = new superClass();
subClass.prototype.constructor = superClass;

这里将一个superClass的实例设置成subclass的原型:protytype, 由于new superClass实例一定会调用父类prototype定义的所有域, 所以这种方法避免了上一种方法的一个问题, 父类可以通过prototype来描述域. 可以实现从superClass的继承. 而这个方法也有缺点, 由于子类的peototype已经是父类的实例(Object实例), 不能再被实例化, 所以new子类实例的时候, 父类的所有非基本数据类型(见JavaScript数据类型)都将是reference copy而非数据copy. 简单说就是所有的父类域在子类中虽然存在, 但看起来就像Java中的static域一样在子类间share.被一个子类改变, 所有子类都会改变.

注意这里的最后一句, 改变了子类prototype中的constructor属性. 它对子类使用没有影响, 仅仅是为了在调用instanceOf方法时它使得子类实例返回subClass.

3. Parasitic Inheritance (寄生继承)
function superClass() {
this.bye = superBye;
this.hello = superHello;
}

function subClass() {
this.base = new supperClass();
base.sayBye = subBye;
return base;
}

这种继承其实是一种扩展, 因为在调用instanceOf时, 子类会返回父类名称, 它的好处在于在构造函数继承的基础上解放了父类, 父类可以使用prototype定义自己的域, 但是子类仍然不建议使用prototype,以免被父类覆盖. 为了可以使子类的instanceof返回正确类型, 我们可以再改进一下:

function subClass() {
this.base = new supperClass();
for ( var key in this.base ) {
if ( !this[key] ) {
this[key] = this.base[key];
}
}

this.sayBye = subBye;
}

将所有的父类域拷贝给子类一份, 不再返回父类, instanceof子类实例时就可以返回正确类型.

您可能也喜欢：
prototype.js 源码之Prototype	javascript 弹出子窗口	Unobtrusive Javascript	JavaScript中isNaN函数	JavaScript验证Email
无觅