在上面的章节中我们看到了JavaScript的对象模型是基于原型实现的。特点是简单,缺点是理解起来比传统类-实例模型要困难,最大的缺点是继承的实现需要编写大量代码,并且需要正确实现原型链。

新的关键字class从ES6开始正式被引入到JavaScript找那个,class的目的就是让定义类更简单。

我们先回顾用函数实现Student的方法:

    function Student(name){
this.name = name;
} Student.protorype.hello = function(){
alert('Hello,' + this.name + '!');
}

如果用新的class关键字来编写Student,可以这样写:

     class Student {
constructor(name){
this.name = name;
} hello() {
alert('Hello,' + this.name +'!');
}
}

比较一下就可以发现,class的定义包含了构造函数constructor和定义在原型对象上的函数hello()(注意没有function关键字)。这样就避免了Student.prototype.hello = function(){……}这样分散的代码。

最后,创建一个Student对象代码和前面章节完全一样:

      var xiaoming = new Student('小明');
xiaoming.hello();

class继承:

用class定义对象的另一个巨大的好处是继承更方便了。现在原型继承的中间对象,原型对象的构造函数等等都不需要考虑了,直接通过extends来实现:

    class PrimaryStudent extends Student {
constructor(name,grade){
super(name);//记得哟super调用父类的构造方法
this.grade = grade;
} myGrade(){
alert('I am at grade' + this.grade);
}
}

注意PrimaryStudent的定义也是class关键字实现的,而extends则表示原型链对象来自Student。子类的构造函数可能会与父类不太相同,例如,PrimaryStudent需要name和grade两个参数,并且需要通过super(name)来调用父类的构造函数,否则父类的name属性无法正常初始化。

PrimaryStudent已经自动获得了父类Student的hello方法,我们又在子类中定义了新的myGrade方法。

ES6引入的class和原有的JavaScript原型链继承有什么去吧呢?实际上它们没有任何区别,class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之,用class的好处就是极大地简化了原型链代码。

只要浏览器支持ES6的class,就可以使用。

如果不可以,就需要一个工具把class代码转换为传统的prototype代码。可以试试Babel工具。

面向对象编程——class继承的更多相关文章

  1. 面向对象编程(十)——继承之Super关键字及内存分析

    Super关键字

  2. 廖雪峰Java2面向对象编程-3继承和多态-1继承

    1.继承 继承是一种代码复用的方式. Student与Person有相同部分的代码. Student可以从Person继承,这样Student获得了Person的所有功能,只需要编写新增的功能即可.通 ...

  3. Python(面向对象编程——2 继承、派生、组合、抽象类)

    继承与派生 ''' 继承:属于 组合:包含 一. 在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的class继承,新的class称为子类(Subclass),而被继承的class称 ...

  4. Python - 面向对象编程 - 多继承

    继承的详解 https://www.cnblogs.com/poloyy/p/15216652.html 这篇文章讲的都是单继承,Python 中还有多继承 Python 多继承的背景 大部分面向对象 ...

  5. C++面向对象编程,继承,数据抽象,动态绑定

    派生类(derived class)能够继承基类(base class )定义的成员: 1).派生类可以无需改变而使用那些与派生类具体特性不相关的操作 2).可以重新定义那些与派生类相关的成员函数,将 ...

  6. Py修行路 python基础 (十六)面向对象编程的 继承 多态与多态性 封装

    一.继承顺序: 多继承情况下,有两种方式:深度优先和广度优先 1.py3/py2 新式类的继承:在查找属性时遵循:广度优先 继承顺序是多条分支,按照从左往右的顺序,进行一步一步查找,一个分支走完会走另 ...

  7. 廖雪峰Java2面向对象编程-3继承和多态-2多态

    1.重载 子类覆写父类的方法称为重载Override. 父类和子类拥有一摸一样的方法(方法的名字.返回值.参数是相同的,但是方法的语句是不一样的) 方法签名如果不同就不是重载,而是创建了一个新的方法. ...

  8. JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)

    一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...

  9. 深入理解javascript中实现面向对象编程方法

    介绍Javascript中面向对象编程思想之前,需要对以下几个概念有了解: 1. 浅拷贝和深拷贝:程序在运行过程中使用的变量有在栈上的变量和在堆上的变量,在对象或者变量的赋值操作过程中,大多数情况先是 ...

随机推荐

  1. Aspose.Words .NET如何实现文档合并的同页分页显示

    当我们需要将一个文档添加到另一个文档时,经常会有不同的显示需求.为了文档的流畅,我们需要源文档和目标文档在内容上实现连续显示:而为了更好地区分文档,我们经常会希望两个文档的合并实现分页显示. 下面,就 ...

  2. PLC总结

    PLC编程总结 PLC控制部分总体有三大部分组成,PLC硬件,组态以及梯形图程序.PLC硬件应与组态一一对应,不容有任何偏差:而梯形图与操作的组态的IO口也应该一一对应.因此,整个系统达到了由梯形图程 ...

  3. JS数组遍历方法

    常用数组遍历方法: 1.原始for循环 var a = [1,2,3]; for(var i=0;i<a.length;i++){ console.log(a[i]); //结果依次为1,2,3 ...

  4. java程序: 倒计时的小程序 (GridPane, Timer, Calendar, SimpleDateFormat ...)

    倒计时程序 涉及到的东西: javafx简单的界面,布局,按钮,文本框,事件响应 java.util.Timer,用于定时 SimpleDateFormat用于在String和Date之间转换. ja ...

  5. Servlet中listener(监听器)和filter的总结

    Listener 我是这样理解他的,他是一种观察者模式的实现:我们在 web.xml 中配置 listener 的时候就是把一个被观察者放入的观察者的观察对象队列中,当被观察者触发了注册事件时观察者作 ...

  6. Csharp: TreeView 初始化设置默认选择节点

    /// <summary> /// 设置查找的节点为选定节点 /// 涂聚文 /// 2013-07-15 /// </summary> /// <param name= ...

  7. html-标题标签、水平线标签和特殊字符

    标题标签  <h1></h1> <h2></h2> ...... <h6></h6> 从h1到h6,大小是依次变小,同时会自动换 ...

  8. 靠谱的div引入任何外链内容

    靠谱的div引入任何外链内容 开发中经常要在div中引入一个页面,该页面可能是内部页面,可能是一个外部页面,也可能只是一个域名获取的请求. 对于内部页面的加载,建议使用jquery的load函数,如: ...

  9. iDempiere 使用指南 系统安装 以及 virtualbox虚拟机下载

    Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...

  10. iOS开发之Objective-c的AES128加密和解密算法的实现

    #import <Foundation/Foundation.h> #import <CommonCrypto/CommonDigest.h> #import <Comm ...