继承模式

模式1：默认模式
代码复用大家常用的默认模式，往往是有问题的，该模式使用Parent()的构造函数创建一个对象，并且将该对象赋值给Child()的原型。我们看一下代码：

1. function inherit(C, P) {
2.     C.prototype = new P();
3. }
5. function Parent(name) {
6.     this.name = name || 'Adam';
7. }
9. Parent.prototype.say = function () {
10.     return this.name;
11. };
13. function Child(name) {
14. }
16. inherit(Child, Parent);
18. var kid = new Child();
19. console.log(kid.say()); // "Adam"
21. var kiddo = new Child();
22. kiddo.name = "Patrick";
23. console.log(kiddo.say()); // "Patrick"
25. var s = new Child('Seth');
26. console.log(s.say()); // "Adam"

复制代码

缺点 1.同时继承了两个对象的属性,即添加到this的属性和原型的属性. 2.Child不能传进参数。

模式2：借用构造函数
该模式是Child借用Parent的构造函数进行apply，然后将child的this和参数传递给apply方法：

1. function Child(a,b,c,d){
2.     Parent.apply(this,arguments);
3. }
5. function Parent() {
6.     this.name = [1,2,3];
7. }
9. var parent = new Parent();
11. Parent.prototype.say = function () {
12.     return this.name;
13. };
15. //pattern 2
16. function Child_2() {
17.     Parent.apply(this, arguments);
18. }
20. //pattern1
21. function Child_1(){
23. }
25. Child_1.prototype = parent;
27. var kid_pattern1 = new Child_1();
28. var kid_pattern2 = new Child_2();
30. console.log(parent.hasOwnProperty("name"));//true
31. console.log(kid_pattern1.hasOwnProperty("name"));//false
32. console.log(kid_pattern2.hasOwnProperty("name"));//true
34. console.log(typeof kid_pattern1.say); // "function"
35. console.log(typeof kid_pattern2.say); // "undefined"
37. kid_pattern1.name.push("changeBYPattern1");
38. kid_pattern2.name.push("changeBYPattern2");
39. console.log(parent.name);//[1, 2, 3, "changeBYPattern1"]

复制代码

缺点 1.只继承了this对象上的属性,并没有继承到原型的属性(say()),
区别 1.模式2可以获得父对象中name属性的副本,而模式1获得的是父对象中name属性的引用

模式3：借用构造函数并设置原型
上述两个模式都有自己的缺点，那如何把两者的缺点去除呢，我们来尝试一下：

1. function Parent(name) {
2.     this.name = name || 'Adam';
3. }
5. Parent.prototype.say = function () {
6.     return this.name;
7. };
9. function Child(name) {
10.     Parent.apply(this, arguments);
11. }
13. Child.prototype = new Parent();
15. var kid = new Child("Patrick");
16. console.log(kid.name); // "Patrick"
17. console.log(typeof kid.say); // function
18. console.log(kid.say()); // Patrick
19. console.dir(kid);
20. delete kid.name;
21. console.log(kid.say()); // "Adam"

复制代码

缺点 1.Parent构造函数执行了两次，所以说，虽然程序可用，但是效率很低。

模式4：共享原型
共享原型是指Child和Parent使用同样的原型，代码如下：

1. function inherit(C, P) {
2.     C.prototype = P.prototype;
3. }
5. function Parent(name) {
6.     this.name = name || 'Adam';
7. }
9. Parent.prototype.say = function () {
10.     return this.name;
11. };
13. function Child(name) {
14. }
16. inherit(Child, Parent);
18. var kid = new Child('Patrick');
19. console.log(kid.name); // undefined
20. console.log(typeof kid.say); // function
21. kid.name = 'Patrick';
22. console.log(kid.say()); // Patrick
23. console.dir(kid);

复制代码

缺点 1.Child的参数没有正确接收到. 2.如果子对象修改了原型会影响到所有的祖先对象.

模式5：临时构造函数
首先借用构造函数，然后将Child的原型设置为该借用构造函数的实例，最后恢复Child原型的构造函数。代码如下：

1. var inherit = (function () {
2.     var F = function () {
3.     };
4.     return function (C, P) {
5.         F.prototype = P.prototype;
6.         C.prototype = new F();
7.         C.uber = P.prototype;//存储超类(super是保留的关键字)
8.         C.prototype.constructor = C;//重置构造函数,如果不重置,子对象的构造函数会指向Parent
9.     }
10. } ());
12. function Parent(name) {
13.     this.name = name || 'Adam';
14. }
16. Parent.prototype.say = function () {
17.     return this.name;
18. };
20. function Child(name) {
21. }
23. inherit(Child, Parent);
25. var kid = new Child("Patrick");
26. console.log(kid.name); // undefined
27. console.log(typeof kid.say); // function
28. kid.name = 'Patrick';
29. console.log(kid.say()); // Patrick
30. console.log(kid.constructor.name); // Child
31. console.log(kid.constructor === Parent); // false

复制代码

为了避免每次需要继承时都要创建一个代理构造函数可以使用闭包来储存,进行优化

1. var inherit = (function(){
2.     var F = function () {};
4.     return function(C,P){
5.         F.prototype = P.prototype;
6.         C.prototype = new F();
7.         C.uber = P.prototype;
8.         C.prototype.constructor = C;
9.     }
10. })()

复制代码

缺点 1.Child不能正常接收参数.
区别 1.和模式1的区别在于,子类对象只继承了原型对象上的成员,而没有继承到this对象的成员,这也正是我们所需要的.因为原型上的才是可复用的

模式6：klass

1. var klass = function (Parent, props) {
3.     var Child, F, i;
5.     Child = function () {
6.         if (Child.uber && Child.uber.hasOwnProperty("__construct")) {
7.             Child.uber.__construct.apply(this, arguments);
8.         }
9.         if (Child.prototype.hasOwnProperty("__construct")) {
10.             Child.prototype.__construct.apply(this, arguments);
11.         }
12.     };
14.     Parent = Parent || Object;
15.     F = function () {
16.     };
17.     F.prototype = Parent.prototype;
18.     Child.prototype = new F();
19.     Child.uber = Parent.prototype;
20.     Child.prototype.constructor = Child;
22.     for (i in props) {
23.         if (props.hasOwnProperty(i)) {
24.             Child.prototype[i] = props[i];
25.         }
26.     }
28.     // return the "class"
29.     return Child;
30. };
32. var Man = klass(null, {
33.     __construct: function (what) {
34.         console.log("Man's constructor");
35.         this.name = what;
36.     },
37.     getName: function () {
38.         return this.name;
39.     }
40. });
42. var first = new Man('Adam'); // logs "Man's constructor"
43. first.getName(); // "Adam"
45. var SuperMan = klass(Man, {
46.     __construct: function (what) {
47.         console.log("SuperMan's constructor");
48.     },
49.     getName: function () {
50.         var name = SuperMan.uber.getName.call(this);
51.         return "I am " + name;
52.     }
53. });
55. var clark = new SuperMan('Clark Kent');
56. clark.getName(); // "I am Clark Kent"
58. console.log(clark instanceof Man); // true
59. console.log(clark instanceof SuperMan); // true

复制代码

缺点 1.看起来十分混乱.