javascript的继承方式总结

Posted 2020-09-04

实现继承大致可分为两类
1.基于构造器工作模式
2.基于对象工作模式
----------------------
A 是否使用原型
B 是否执行属性拷贝
C 两者都有（原型属性拷贝）
1.原型链法 Children。prototype = new Parent()
所属模式 1、A

 1 function Shape() {
 2     this.name="Shape";
 3     this.toString = function() {
 4         return this.name;
 5     };
 6 }
 7 function TwoDShape() {
 8     this.name = ‘2D shape‘;
 9 }
10 function Triangle(side, height) {
11     this.name = ‘Triangle‘;
12     this.side = side;
13     this.height = height;
14     this.getArea = function() {
15         return this.side *this.height /2;
16     };
17 }
18 //用构造器Shape()(通过new操作符)另建了一个新的对象，然后用它覆盖TwoDShape构造器的prototype属性。Triangle也一样。
19 TwoDShape.prototype = new Shape ();
20 Triangle.prototype =new TwoDShape ();
21 //对对象prototype属性进行完全替换时，可能会对对象的constructor属性产生一定副作用。因此，对对象constructor属性进行重置是个很好的习惯
22 TwoDShape.prototype.constructor = TwoDShape;
23 Triangle.prototype.constructor = Triangle;
24 
25 var my  = new Triangle(5,10);
26 my.getArea(); //25
27 my.toString  //‘Triangle‘

2.仅从原型继承法 Child.prototype = Parent.prototype;
所属模式 1 B

 1 function Shape() {
 2     Shape.prototype.name = ‘shape‘;
 3     Shape.prototype.toString = function() {
 4         return this.name;
 5     }
 6 }
 7 function TwoDShape () {}
 8 TwoDShape.prototype =Shape.prototype;
 9 TwoDShape.prototype.constructor = TwoDShape;//必须在扩展之前完成继承
10 TwoDShape.prototype.name = ‘2D shape‘; 
11 function Triangle(side, height) {
12     this.side = side;
13     this.height =height
14 }
15 Triangle.prototype = TwoDShape.prototype;
16 Triangle.prototype.constructor = Triangle;
17 Triangle.prototype.name = ‘Triangle‘;
18 Triangle.prototype.getArea = function (argument) {
19     return this.side * this.height /2;
20 }
21 var my = new Triangle(5,10);
22 my.getArea();//25
23 my.toString(); //‘Triangle‘
24 //缺点 子对象  的修改会影响 父对象
25 var s = new Shape();
26 s.name; //‘Triangle‘

3.临时构造器  new F()

所属模式 1 C 

不同于第一种方式，她只会继承于parent的原型属性

1 function extend (Child, Parent){
2     var F = function (){};
3     F.prototype = Parent.prototype;
4     Child.prototype = new F();
5     Child.prototype.constructor = Child;
6     Child.uber = Parent.prototype; // 通过uber可以访问父对象
7 }

4.原型属性拷贝法
所属模式 1 C

1 function extend2 (Child,Parent) {
2     var p = Parent.prototype;
3     var c = Child.prototype;
4     for( var i in p ){
5         c[i] = p [i]
6     }
7     c.uber = p;
8 }

上面4中都是基于构造器的工作模式，下面几种是基于对象的工作模式
5.全属性拷贝法(浅属性拷贝法)
所属模式 2 B

1 function extendCopy(p){
2     var c = {};
3     for (var i in p){
4         c[i] = p[i];
5     }
6     c.uber = p;
7     return c;
8 }

6.深拷贝法
所属模式 2 B

 1 function deepCopy(p,c) {
 2     c =  c || {};
 3     for(var i in p){
 4         if(p.hasOwnProperty(i)){
 5             if (typeof p[i] ===‘object‘){
 6                 c[i] = Array.isArray(p[i] ? [] : ?);
 7                 deepCopy[p[i],c[i]]
 8             }else{
 9                 c[i] = p[i]
10             }
11         }    
12     }
13     return c;
14 }

7.原型继承法
所属模式 2 A

1 function object(o) {
2     function F() {}
3     F.prototype = o;
4     return new F()
5 }

8.扩展与增强模式
所属模式 2 C 方式 5 7 的混合

 1 function objectPlus(o,stuff){ //对象o用来继承 对象stuff用于拷贝方法与属性 
 2     var n ;
 3     function F() {}
 4     F.prototype = o;
 5     n.uber =o;
 6     for (var i in stuff) {
 7         n[i] = stuff[i];
 8     }
 9     return n;
10 }

9.多重继承法
所属模式 2 B
按照父对象出现的顺序依次对他们执行属性全拷贝

 1 function multi() {
 2     var n = {},stuff,j = 0,len=arguments.length;
 3     for(j= 0; j< len; j++) {
 4         stuff = arguments[j];
 5         for(var i in stuff){
 6             n[i] = stuff[i];
 7         }
 8     }
 9     return n ;
10 }

10.寄生继承法 

所属模式 2 A

 1 function parasite(victim) { //父对象victim
 2     var that = object(victim); 
 3     that.more = 1;
 4     return that;
 5 }
 6 //例子
 7 var Parent = {
 8     name :‘parent‘,
 9     num:10
10 }
11 function Son(m){
12     var that = new Object(Parent);
13     that.name=‘son‘;
14     that.getRun = function () {
15         return that.name + ‘runs‘ + this.m +‘m‘ ;
16     }
17 }
18 var t = Son(200);
19 t.getRun() //son runs 200m
20 t.num //10

11.构造器借用法
所属模式 基于构造器

1 function Parent(id) {
2     this.id = id;
3 }
4 function Son(){
5     Parent.apply(this,arguments);
6 }
7 var t = new Son(100);
8 t.id //100

12.构造器借用与属性拷贝法
所属模式 基于构造器 原型链 属性拷贝

1 function Child() {
2     Parent.appply(this,arguments);
3 }
4 extend2(Child, Parent);