在上面的章节中我们看到了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. nyoj 211——Cow Contest——————【floyd传递闭包】

    Cow Contest 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 N (1 ≤ N ≤ 100) cows, conveniently numbered 1.. ...

  2. I/O流复制文本

    package io; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io. ...

  3. MySQL -U防止人为误操作

    在很多时候操作数据库的时候,可能领导或DBA登陆了数据库,在执行update和delete时,忘记了加where,可能会导致清空表的悲剧,所以-U的好处就体现了. 1.mysql -U的帮助说明 -U ...

  4. mysql赋值表结构和数据

    mysql中用命令行复制表结构的方法主要有一下几种: 1.只复制表结构到新表 CREATE TABLE 新表 SELECT * FROM 旧表 WHERE 1=2 或者 CREATE TABLE 新表 ...

  5. web.config节点

    1.clientCache 源码: <system.webServer> <staticContent> <clientCache cacheControlMode=&q ...

  6. Django组件——forms组件

    一.校验字段功能 通过注册用户这个实例来学习校验字段功能. 1.模型:models.py from django.db import models # Create your models here. ...

  7. input文本框点击第一次光标在最右边

    效果: 样式效果引入bootstrap4.0就OK了. HTML代码: <div class="input-group w-25"> <div class=&qu ...

  8. JavaScript中双叹号(!!)作用

    经常看到这样的例子: var a: var b=!!a a默认是undefined.!a是true,!!a则是false,所以b的值是false,而不再是undefined,也非其它值,主要是为后续判 ...

  9. 02_ActiveMQ入门

    [ActiveMQ 入门HelloWorld例子] [启动ActiveMQ] 1.由于本人PC是64位的,选择在bin目录下的win64/activemq.bat启动. 2.启动成功后,访问http: ...

  10. 【起航计划 037】2015 起航计划 Android APIDemo的魔鬼步伐 36 App->Service->Remote Service Binding AIDL实现不同进程间调用服务接口 kill 进程

    本例和下个例子Remote Service Controller 涉及到的文件有RemoteService.java ,IRemoteService.aidl, IRemoteServiceCallb ...