详解ES5和ES6的继承

ES5继承

构造函数、原型和实例的关系：每一个构造函数都有一个原型对象，每一个原型对象都有一个指向构造函数的指针，而每一个实例都包含一个指向原型对象的内部指针，

  • 原型链实现继承

    • 基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法，即让原型对象等于另一个类型的实例
    • 基本模式：
    


     1       function SuperType(){
 2           this.property = true;
 3       }
 4       SuperType.prototype.getSuperValue = function(){
 5           return this.property;
 6       };
 7       function SubType(){
 8           this.subproperty = false;
 9       }
10       \\继承了SuperType
11       SubType.prototype = new SuperType();
12
13       SubType.prototype.getSubValue = function(){
14           return this.subproperty;
15       };
16       var instance = new SubType();
17       alert(instance.getSuperValue());  \\true
    


      

    • 最终结果：instance指向SubType的原型，SubType的原型又指向SuperType的原型，getSuperValue()方法任然在SuperType.prototype中，但property则位于SubType.prototype中，这是因为property是一个实例属性，而getSuperValue是一个原型方法。此时，instance.constructor指向的是SuperType。
      • 

    • 注意事项：

        

      • 别忘记默认的原型，所有的引用类型都继承自Object，所有函数的默认原型都是Object的实例，因此默认原型里都有一个指针，指向object.prototype
        • 

      • 谨慎地定义方法，给原型添加方法的代码一定要放在替换原型的语句之后，不能使用对象字面量添加原型方法，这样会重写原型链
        • 

      

      • 

    • 原型链继承的问题
      • 

        

      • 最主要的问题来自包含引用类型值的原型，它会被所有实例共享
        • 

      • 第二个问题是，创造子类型的实例时，不能向超类型的构造函数中传递参数
        • 

      

    

    • 



    

  • 借用构造函数
    

      

    • 基本思想：在子类型构造函数的内部调用超类型构造函数，通过使用apply()和call()方法可以在将来新创建的对象上执行构造函数
      

      


       1 function SuperType(){
 2     this.colors = ["red","blue","green"];
 3 }
 4 ?
 5 function SubType(){
 6     \\借调了超类型的构造函数
 7     SuperType.call(this);
 8 }
 9 ?
10 var instance1 = new SubType();
11 \\["red","blue","green","black"]
12 instance1.colors.push("black");
13 console.log(instance1.colors);
14 ?
15 var instance2 = new SubType();
16 \\["red","blue","green"]
17 console.log(instance2.colors);
      

      通过call或者apply方法，我们实际上是在将来新创建的SubType实例的环境下调用了SuperType构造函数。这样一来，就会在新SubType对象上执行SuperType函数中定义的所有对象初始化代码，因此，每一个SubType的实例都会有自己的colors对象的副本
      • 

    • 优势：

        

      • 传递参数
        • 

      

      


       1 function Supertype(name){
 2     this.name = name;
 3 }
 4 ?
 5 function Subtype(){
 6     Supertype.call(this,‘Annika‘);
 7     this.age  = 21;
 8 }
 9 ?
10 var instance = new Subtype;
11 console.log(instance.name);  \\Annika
12 console.log(instance.age);   \\29
      

      • 

    • 缺点：

        

      • 方法都在构造函数中定义，函数无法复用
        • 

      • 在超类型中定义的方法，子类型不可见，结果所有类型都只能使用构造函数模式
        • 

      

      • 

    

    • 

  • 组合继承

      

    • 基本思想：将原型链和借用构造函数技术组合到一起。使用原型链实现对原型属性和方法的继承，用借用构造函数模式实现对实例属性的继承。这样既通过在原型上定义方法实现了函数复用，又能保证每个实例都有自己的属性
      

      


       1 function Supertype(name){
 2     this.name = name;
 3     this.colors = ["red","green","blue"];
 4 }
 5 ?
 6 Supertype.prototype.sayName = function(){
 7     console.log(this.name);
 8 };
 9 ?
10 function Subtype(name,age){
11     \\继承属性
12     Supertype.call(this,name);
13     this.age  = age;
14 }
15 ?
16 \\继承方法
17 Subtype.prototype = new Supertype();
18 Subtype.prototype.constructor = Subtype;
19 Subtype.prototype.sayAge = function(){
20     console.log(this.age);
21 };
22 ?
23 var instance1 = new Subtype(‘Annika‘,21);
24 instance1.colors.push("black");
25 \\["red", "green", "blue", "black"]
26 console.log(instance1.colors);
27 instance1.sayName(); \\Annika
28 instance1.sayAge();  \\21
29 ?
30 var instance2 = new Subtype(‘Anna‘,22);
31 \\["red", "green", "blue"]
32 console.log(instance2.colors);
33 instance2.sayName();   \\Anna
34 instance2.sayAge();    \\22
      

      • 

    • 缺点：无论在什么情况下，都会调用两次超类型构造函数，一次是在创建子类型原型的时候，一次是在子类型构造函数的内部
      • 

    

    • 

  • 原型式继承

      

    • 基本思想：不用严格意义上的构造函数，借助原型可以根据已有的对象创建新对象，还不必因此创建自定义类型，因此最初有如下函数：
      

      


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

      从本质上讲，object()对传入其中的对象执行了一次浅复制
      

      


       1 var person = {
 2     name:‘Annika‘,
 3     friendes:[‘Alice‘,‘Joyce‘]
 4 };
 5 ?
 6 var anotherPerson = object(person);
 7 anotherPerson.name = ‘Greg‘;
 8 anotherPerson.friendes.push(‘Rob‘);
 9 ?
10 var yetAnotherPerson = object(person);
11 yetAnotherPerson.name = ‘Linda‘;
12 yetAnotherPerson.friendes.push(‘Sophia‘);
13 ?
14 console.log(person.friends);   //[‘Alice‘,‘Joyce‘,‘Rob‘,‘Sophia‘]
15 ?
      

      在这个例子中，实际上相当于创建了person的两个副本。
      • 

    • ES5新增Object.create规范了原型式继承，接收两个参数，一个用作新对象原型的对象和（可选的）一个为新对象定义额外属性的对象，在传入一个参数的情况下，Object.create()和object()行为相同。

      


       1 var person = {
 2     name:‘Annika‘,
 3     friendes:[‘Alice‘,‘Joyce‘]
 4 };
 5 ?
 6 var anotherPerson = object.create(person,{
 7     name:{
 8         value:"Greg"
 9     }
10 });
11 ?
12 \\用这种方法指定的任何属性都会覆盖掉原型对象上的同名属性
13 console.log(anotherPerson.name);   \\Greg
      

      • 

    • 用处：创造两个相似的对象，但是包含引用类型的值的属性始终会共享响应的值
      • 

    

    • 

  • 寄生式继承

      

    • 基本思想：寄生式继承是与原型式继承紧密相关的一种思路，它创造一个仅用于封装继承过程的函数，在函数内部以某种方式增强对象，最后再返回对象。
      

      


       1 function createAnother(original){
 2     \\通过调用函数创建一个新对象
 3     var clone = object(original);
 4     \\以某种方式来增强对象
 5     clone.sayHi = fuuction(){
 6         alert("Hi");
 7     };
 8     \\返回这个对象
 9     return clone
10 }
      

      • 

    • 缺点：使用寄生式继承来为对象添加函数，会因为做不到函数复用而降低效率，这个与构造函数模式类似
      • 

    

    • 

  • 寄生组合式继承

      

    • 基本思想：通过借用构造函数来继承属性，通过原型链的混成形式来继承方法，不必为了指定子类型的原型而调用超类型的构造函数，只需要超类型的一个副本。本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型
      

      


      1 function inheritPrototype(Subtype,supertype){
2     var prototype = object(supertype);   \\创建对象
3     prototype.constructor = subtype;     \\增强对象
4     subtype.prototype = prototype;       \\指定对象
5 }
      

      因此，前面的例子可以改为如下的形式
      

      


       1 function Supertype(name){
 2     this.name = name;
 3     this.colors = ["red","green","blue"];
 4 }
 5 ?
 6 Supertype.prototype.sayName = function(){
 7     console.log(this.name);
 8 };
 9 ?
10 function Subtype(name,age){
11     \\继承属性
12     Supertype.call(this,name);
13     this.age  = age;
14 }
15 ?
16 \\继承方法
17 inheritPrototype(Subtype,Supertype);
18 ?
19 Subtype.prototype.sayAge = function(){
20     console.log(this.age);
21 };
      

      • 

    • 优点：只调用了一次supertype构造函数，因此避免在subtype.prototype上创建不必要的，多余的属性，与此同时，原型链还能保持不变，还能正常使用instanceof 和isPrototypeOf()，因此，寄生组合式继承被认为是引用类型最理想的继承范式。
      • 

    

    • 



总结：


ES5的继承可以用下图来概括：




ES6继承


es6的继承主要要注意的是class的继承。


    

  • 基本用法：Class之间通过使用extends关键字，这比通过修改原型链实现继承，要方便清晰很多
    • 






 1 class Colorpoint extends Point {
 2     constructor(x,y,color){
 3         super(x,y); //调用父类的constructor(x,y)
 4         this.color = color
 5     }
 6     toString(){
 7         //调用父类的方法
 8         return this.color + ‘ ‘ + super.toString();
 9     }
10 }


子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，如果不调用super方法，子类就得不到this对象。因此，只有调用super之后，才可以使用this关键字。


    

  • prototype 和__proto__
    • 



一个继承语句同时存在两条继承链：一条实现属性继承，一条实现方法的继承





1 class A extends B{}
2 A.__proto__ === B;  //继承属性
3 A.prototype.__proto__ == B.prototype;//继承方法



总结：


ES6的继承可以用下图来概括：





原文地址：https://www.cnblogs.com/annika/p/9073572.html
				


				
时间： 2024-10-09 05:52:45 

		


		


	

	
	

		


		
详解ES5和ES6的继承的相关文章


								

		

			

                关于es5与es6的继承比较
			

		

		

									

				ES5中的继承 原理:首先对于属性方面,一般是在子构造函数里面调用父构造函数,通过call改变执行上下文,Father.call(this, name); 完成属性继承. 其次对原型上的方法继承,根据原型的向上查找规则,首先创建一个对象(该对象的__proto__指向父构造函数的原型),然后将该对象赋给子构造函数的原型 Son.prototype=Object.create(Father.prototype); 或者Son.prototype=new Father(); 经过上述操作(即连接了图			

		

	

				

		

			

                [转]JS - Promise使用详解2（ES6中的Promise）
			

		

		

									

				原文地址:https://www.hangge.com/blog/cache/detail_1638.html 2015年6月, ES2015(即 ECMAScript 6.ES6) 正式发布.其中 Promise 被列为正式规范,成为 ES6 中最重要的特性之一. 1,then()方法 简单来讲,then 方法就是把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数. 而 Promise 的优势就在于这个链式调用.我们可以在 then 方法中继续写 Promise 对象并			

		

	

				

		

			

                [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
			

		

		

									

				接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般都有Symbol.iterator属性,你可以在控制台中用console.dir打印数组,Map,Set,在他们的原型对象(prototype)上面就能找到.这个属性与迭代器密切相关,通过该函数可以返回一个迭代器,下文,我会举一个例子.一般来说所有的集合对象(数组,Set,Map 以及字符串)都是可			

		

	

				

		

			

                ES5和ES6中对于继承的实现方法
			

		

		

									

				在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是通过将子类构造函数的原型作为父类构造函数的实例,这样就连通了子类-子类原型-父类,原型链的特点就是逐层查找,从子类开始一直往上直到所有对象的原型Object.prototype,找到属性方法之后就会停止查找,所以下层的属性方法会覆盖上层. 一个基本的基于原型链的继承过程大概是这样的: //先来个父类			

		

	

				

		

			

                tiny_cnn代码详解（3）——层间继承关系
			

		

		

									

				在上一篇博文中我们顺利将tiny_cnn的程序调试通过,在这篇博文中我们尝试从整体角度给出对tiny_cnn这个深度学习框架的解读,重点论述一下其各个层直接类封装的继承关系. 一.卷积神经网络快速入门 tiny_cnn作为卷积神经网络的一种实现形式,在探讨其框架结构之前,首先需要简要介绍一些卷积神经网络相关的知识.首先,给出经典卷积神经网络的网络结构: 这个是经典的LeNet-5的网络结构图,五层网络.最早用于支票上的手写数字识别,也是最早的商业化的深度学习模型.从上图中可以看出,卷积神经网络主			

		

	

				

		

			

                【Hibernate步步为营】--继承映射详解
			

		

		

									

				上篇文章讨论了多对多映射,在使用多对多映射时重点是使用<many-to-many>标签,并在标签的两端加入外键这样在生成关系时会创建两个关系之间的关系表,通过关系表来维护它们之间的关系,另外对于单向和双向的区别是在映射的哪一端添加标签的问题.在面向对象中很重要的一个特性就是继承,继承实现了代码的复用,而且Hibernate把基本上所有的对象模型进行了映射封装,其中就包括继承映射,接下来就详细讨论. 一.继承映射 继承是面向对象很重要的特性,它实现了代码的服用,在关系模型中同样也有继承关系,这种			

		

	

				

		

			

                Maven详解之聚合与继承
			

		

		

									

				说到聚合与继承我们都很熟悉,maven同样也具备这样的设计原则,下面我们来看一下Maven的pom如何进行聚合与继承的配置实现. 一.为什么要聚合? 随着技术的飞速发展和各类用户对软件的要求越来越高,软件本身也变得越来越复杂,然后软件设计人员开始采用各种方式进行开发,于是就有了我们的分层架构.分模块开发,来提高代码的清晰和重用.针对于这一特性,maven也给予了相应的配置. 情景分析一: 我们在开发过程中,创建了2个以上的模块,每个模块都是一个独立的maven project,在开始的时候我们可			

		

	

				

		

			

                ES5和ES6中的继承
			

		

		

									

				看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: 1 function Super() {} 2 3 function Sub() {} 4 Sub.prototype = new Super(); 5 Sub.prototype.constructor = Sub; 6 7 var sub = new Sub(); 8 9 Sub.prototype.constructor			

		

	

				

		

			

                CSS样式表继承详解
			

		

		

									

				最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在这里就不一一赘述了.希望深入了解的朋友请google之. 那么CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素. 下面举个例子,有如下html代码片段: <p>CSS样式表<