首页 > 代码库 > javascript的继承方式总结
javascript的继承方式总结
实现继承大致可分为两类
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);
javascript的继承方式总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。