再见了

yiyiyicz

按照EH规定，此贴由于涉嫌刷分、盖楼、剽窃，所以删掉
不过我没有见过这样的规定

再见了，曾经帮助我的，和曾经在一起讨论的
有关资料的检索线索还在

yiyiyicz

Javascript 面向对象编程---封装

yiyiyicz

Javascript 面向对象编程---构造函数的继承

yiyiyicz

Javascript 面向对象编程---非构造函数的继承

yiyiyicz

JavaScript继承详解 <1>

yiyiyicz

JavaScript继承详解 <2>

yiyiyicz

JavaScript继承详解 <3>

yiyiyicz

JavaScript继承详解 <4>

yiyiyicz

JavaScript继承详解 <5>

yiyiyicz

JavaScript继承详解 <6>

在本章中，我们将分析Prototypejs中关于JavaScript继承的实现。
Prototypejs是最早的JavaScript类库，可以说是JavaScript类库的鼻祖。 我在几年前接触的第一个JavaScript类库就是这位，因此Prototypejs有着广泛的群众基础。

不过当年Prototypejs中的关于继承的实现相当的简单，源代码就寥寥几行，我们来看下。
早期Prototypejs中继承的实现

1.         var Class = {
   
2.             // Class.create仅仅返回另外一个函数，此函数执行时将调用原型方法initialize
   
3.             create: function() {
   
4.                 return function() {
   
5.                     this.initialize.apply(this, arguments);
   
6.                 }
   
7.             }
   
8.         };
   
9.         
   
10.         // 对象的扩展
    
11.         Object.extend = function(destination, source) {
    
12.             for (var property in source) {
    
13.                 destination[property] = source[property];
    
14.             }
    
15.             return destination;
    
16.         };
    
17.         

复制代码

调用方式：

1.         var Person = Class.create();
   
2.         Person.prototype = {
   
3.             initialize: function(name) {
   
4.                 this.name = name;
   
5.             },
   
6.             getName: function(prefix) {
   
7.                 return prefix + this.name;
   
8.             }
   
9.         };
   
10. 
    
11.         var Employee = Class.create();
    
12.         Employee.prototype = Object.extend(new Person(), {
    
13.             initialize: function(name, employeeID) {
    
14.                 this.name = name;
    
15.                 this.employeeID = employeeID;
    
16.             },
    
17.             getName: function() {
    
18.                 return "Employee name: " + this.name;
    
19.             }
    
20.         });
    
21. 
    
22. 
    
23.         var zhang = new Employee("ZhangSan", "1234");
    
24.         console.log(zhang.getName());   // "Employee name: ZhangSan"
    

复制代码

很原始的感觉对吧，在子类函数中没有提供调用父类函数的途径。

Prototypejs 1.6以后的继承实现 首先来看下调用方式：

1.         // 通过Class.create创建一个新类
   
2.         var Person = Class.create({
   
3.             // initialize是构造函数
   
4.             initialize: function(name) {
   
5.                 this.name = name;
   
6.             },
   
7.             getName: function(prefix) {
   
8.                 return prefix + this.name;
   
9.             }
   
10.         });
    
11.         
    
12.         // Class.create的第一个参数是要继承的父类
    
13.         var Employee = Class.create(Person, {
    
14.             // 通过将子类函数的第一个参数设为$super来引用父类的同名函数
    
15.             // 比较有创意，不过内部实现应该比较复杂，至少要用一个闭包来设置$super的上下文this指向当前对象
    
16.             initialize: function($super, name, employeeID) {
    
17.                 $super(name);
    
18.                 this.employeeID = employeeID;
    
19.             },
    
20.             getName: function($super) {
    
21.                 return $super("Employee name: ");
    
22.             }
    
23.         });
    
24. 
    
25. 
    
26.         var zhang = new Employee("ZhangSan", "1234");
    
27.         console.log(zhang.getName());   // "Employee name: ZhangSan"
    

复制代码

这里我们将Prototypejs 1.6.0.3中继承实现单独取出来， 那些不想引用整个prototype库而只想使用prototype式继承的朋友， 可以直接把下面代码拷贝出来保存为JS文件就行了。

1.         var Prototype = {
   
2.             emptyFunction: function() { }
   
3.         };
   
4. 
   
5.         var Class = {
   
6.             create: function() {
   
7.                 var parent = null, properties = $A(arguments);
   
8.                 if (Object.isFunction(properties[0]))
   
9.                     parent = properties.shift();
   
10. 
    
11.                 function klass() {
    
12.                     this.initialize.apply(this, arguments);
    
13.                 }
    
14. 
    
15.                 Object.extend(klass, Class.Methods);
    
16.                 klass.superclass = parent;
    
17.                 klass.subclasses = [];
    
18. 
    
19.                 if (parent) {
    
20.                     var subclass = function() { };
    
21.                     subclass.prototype = parent.prototype;
    
22.                     klass.prototype = new subclass;
    
23.                     parent.subclasses.push(klass);
    
24.                 }
    
25. 
    
26.                 for (var i = 0; i < properties.length; i++)
    
27.                     klass.addMethods(properties[i]);
    
28. 
    
29.                 if (!klass.prototype.initialize)
    
30.                     klass.prototype.initialize = Prototype.emptyFunction;
    
31. 
    
32.                 klass.prototype.constructor = klass;
    
33. 
    
34.                 return klass;
    
35.             }
    
36.         };
    
37. 
    
38.         Class.Methods = {
    
39.             addMethods: function(source) {
    
40.                 var ancestor = this.superclass && this.superclass.prototype;
    
41.                 var properties = Object.keys(source);
    
42. 
    
43.                 if (!Object.keys({ toString: true }).length)
    
44.                     properties.push("toString", "valueOf");
    
45. 
    
46.                 for (var i = 0, length = properties.length; i < length; i++) {
    
47.                     var property = properties[i], value = source[property];
    
48.                     if (ancestor && Object.isFunction(value) && value.argumentNames().first() == "$super") {
    
49.                         var method = value;
    
50.                         value = (function(m) {
    
51.                             return function() { return ancestor[m].apply(this, arguments) };
    
52.                         })(property).wrap(method);
    
53. 
    
54.                         value.valueOf = method.valueOf.bind(method);
    
55.                         value.toString = method.toString.bind(method);
    
56.                     }
    
57.                     this.prototype[property] = value;
    
58.                 }
    
59. 
    
60.                 return this;
    
61.             }
    
62.         };
    
63. 
    
64.         Object.extend = function(destination, source) {
    
65.             for (var property in source)
    
66.                 destination[property] = source[property];
    
67.             return destination;
    
68.         };
    
69. 
    
70.         function $A(iterable) {
    
71.             if (!iterable) return [];
    
72.             if (iterable.toArray) return iterable.toArray();
    
73.             var length = iterable.length || 0, results = new Array(length);
    
74.             while (length--) results[length] = iterable[length];
    
75.             return results;
    
76.         }
    
77. 
    
78.         Object.extend(Object, {
    
79.             keys: function(object) {
    
80.                 var keys = [];
    
81.                 for (var property in object)
    
82.                     keys.push(property);
    
83.                 return keys;
    
84.             },
    
85.             isFunction: function(object) {
    
86.                 return typeof object == "function";
    
87.             },
    
88.             isUndefined: function(object) {
    
89.                 return typeof object == "undefined";
    
90.             }
    
91.         });
    
92. 
    
93.         Object.extend(Function.prototype, {
    
94.             argumentNames: function() {
    
95.                 var names = this.toString().match(/^[\s\(]*function[^(]*\(([^\)]*)\)/)[1].replace(/\s+/g, '').split(',');
    
96.                 return names.length == 1 && !names[0] ? [] : names;
    
97.             },
    
98.             bind: function() {
    
99.                 if (arguments.length < 2 && Object.isUndefined(arguments[0])) return this;
    
100.                 var __method = this, args = $A(arguments), object = args.shift();
     
101.                 return function() {
     
102.                     return __method.apply(object, args.concat($A(arguments)));
     
103.                 }
     
104.             },
     
105.             wrap: function(wrapper) {
     
106.                 var __method = this;
     
107.                 return function() {
     
108.                     return wrapper.apply(this, [__method.bind(this)].concat($A(arguments)));
     
109.                 }
     
110.             }
     
111.         });
     
112. 
     
113.         Object.extend(Array.prototype, {
     
114.             first: function() {
     
115.                 return this[0];
     
116.             }
     
117.         });
     
118.         

复制代码

首先，我们需要先解释下Prototypejs中一些方法的定义。
&#10026;  argumentNames: 获取函数的参数数组

1.                 function init($super, name, employeeID) {
   
2.                 }
   
3.                 console.log(init.argumentNames().join(",")); // "$super,name,employeeID"
   

复制代码

&#10026;  bind: 绑定函数的上下文this到一个新的对象（一般是函数的第一个参数）

1.                 var name = "window";
   
2.                 var p = {
   
3.                     name: "Lisi",
   
4.                     getName: function() {
   
5.                         return this.name;
   
6.                     }
   
7.                 };
   
8. 
   
9.                 console.log(p.getName());   // "Lisi"
   
10.                 console.log(p.getName.bind(window)());  // "window"
    

复制代码

&#10026;  wrap: 把当前调用函数作为包裹器wrapper函数的第一个参数

1.                 var name = "window";
   
2.                 var p = {
   
3.                     name: "Lisi",
   
4.                     getName: function() {
   
5.                         return this.name;
   
6.                     }
   
7.                 };
   
8. 
   
9.                 function wrapper(originalFn) {
   
10.                     return "Hello: " + originalFn();
    
11.                 }
    
12. 
    
13.                 console.log(p.getName());   // "Lisi"
    
14.                 console.log(p.getName.bind(window)());  // "window"
    
15.                 console.log(p.getName.wrap(wrapper)()); // "Hello: window"
    
16.                 console.log(p.getName.wrap(wrapper).bind(p)()); // "Hello: Lisi"
    

复制代码

有一点绕口，对吧。这里要注意的是wrap和bind调用返回的都是函数，把握住这个原则，就很容易看清本质了。

后接18楼

http://www.cnblogs.com/sanshi/archive/2009/07/08/1519036.html