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);
时间: 2025-01-08 10:46:46

javascript的继承方式总结的相关文章

JavaScript中继承方式详解

继承一直是面向对象语言中的一个最为人津津乐道的概念,在JavaScript中,继承也是难点之一,下面我尽量用通俗的语言来介绍一下实现继承的几种方法. 原型链 ECMAScript 中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.这个基本思想说的一点也不基本,那么先说一个在之前博文中提到的概念,原型与实例的关系.我们知道:每一个实例里包含了原型对象中的方法和属性.这是因为任何一个对象都有一个内部属性[[prototype]]

DOM笔记(十三):JavaScript的继承方式

在Java.C++.C#等OO语言中,都支持两种继承方式:接口继承和实现继承.接口继承制继承方法签名,实现继承则继承实际的方法和属性.在SCMAScript中,由于函数没有签名,所以无法实现接口继承,只支持实现继承. 实现继承主要依靠原型链来实现. 一.原型链 原型链是利用原型让一个引用类型继承另一个引用类型的方法,在DOM笔记(十二):又谈原型对象中,描述了构造函数.实例和原型之间的关系: 每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而每个实例都包含一个指向原型对象的内部

JavaScript各种继承方式和优缺点

好久没写博客啦,嘻嘻,这个月是2017年的最后一个月啦,大家应该都开始忙着写年终总结了吧,嘻嘻,小颖今天给大家分享下Javascript中的几种继承方式以及他们的优缺点. 1.借助构造函数实现继承 原理:通过call()函数修改 this 指向,从而实现将父类属性挂载到子类实例中. function parent1() { this.name = 'parent1'; } function child1() { parent1.call(this); this.type = 'child1';

JavaScript各种继承方式(六):寄生组合继承

一 原理 用寄生继承来改造组合继承. function Fruit(name){ this.name = name; } Fruit.prototype.eat = function(){ console.log('eat'); } function Mango(name,level){ Fruit.call(this,name); this.level = level; } function create(obj){ let instance = Object.create(obj); //

JavaScript中的几种继承方式对比

转自:http://blog.csdn.net/kkkkkxiaofei/article/details/46474069 从'严格'意义上说,JavaScript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似Java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言. 为何需要利用JavaScript实现继承? 早期pc机器的性能确实不敢恭维,所有的压力全在服务器端,

Javascript中的几种继承方式

开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流. 为何需要利用javascript实现

Javascript中的几种继承方式比较

开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c#之类的强型语言的继承方式有很大的区别,因而默认它就是非主流的面向对象方式,甚至竟有很多书将其描述为'非完全面向对象'语言.其实个人觉得,什么方式并不重要,重要的是是否具有面向对象的思想,说javascript不是面向对象语言的,往往都可能没有深入研究过javascript的继承方式,故特撰此文以供交流. 为何需要利用javascript实现

Javascript原型继承容易忽略的错误

编写Javascript的开发者都知道,JS虽然没有类(ES6添加了class语法),但是可以模拟出OOP语言的类和面向对象的概念,比如我们都知道的一句话,Javascript中处处是对象,而面向对象语言的特性是继承,封装,多态,抽象,而本文讨论的是Javascript的继承,Javascript的继承方式有原型继承,组合继承,寄生继承等等,在日常开发中,哪种继承方式更好用在于开发者对于程序的结果以及性能的考虑.笔者在下面列举出原型继承中经常容易被忽略的错误. 常见错误一: function F

JavaScript高级 面向对象(5)--最简单的继承方式,混入mix

说明(2017.3.30): 1. 最简单的继承方式,混入mix 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <script type="text/javascrip