前言:es6之前在js中要实现继承,就必须要我们程序员在原型链上手动继承多对象的操作,但是结果往往存在漏洞,为解决这些问题,社区中出现了盗用构造函数、组合继承、原型式继承、寄生式继承等一系列继承方式,这都需要程序员对原型链有深入的认识。但是当es6出现,class关键字便一并将继承问题完美解决,且大大降低程序员的学习成本,只需要使用轮子即可。本文将会展开对类继承叙述。

一、类的继承基础

  在类中实现继承,需要使用关键字extends,使用之后就可以继承任何拥有[[constructor]]和原型的对象。这也就意味着使用extends,不止可以继承另一个类,同时也可以继承普通构造函数。

 1 class Car{
2
3 }
4 class MyCar extends Car{
5
6 }
7 const firstCar = new MyCar();
8
9 console.log (firstCar instanceof Car); //true
10 console.log (firstCar instanceof MyCar); //true
11
12 function Person (){
13
14 }
15 class P1 extends Person{
16
17 }
18 const p = new P1();
19 console.log (p instanceof P1); //true
20 console.log (p instanceof Person); //true

  在类和原型上定义的方法会被带到派生类(继承对象的对象)上。

 1 class Car{
2 // 定义getName到Car原型上
3 getName(){
4 console.log (this);
5 }
6 // 定义setName到Car类自身上
7 static setName(){
8 console.log (this);
9 }
10 }
11 class MyCar extends Car{
12
13 }
14 const a = new Car;
15 const b = new MyCar();
16
17 a.getName(); //Car {}
18 b.getName(); //MyCar {}
19
20 Car.setName(); //class Car{}
21 MyCar.setName(); //class MyCar extends Car{}

二、构造函数与super()

  派生类的方法可以通过super()关键字以实现原型的引用,原因在于super会调用父类构造函数,相当于super.constructor()。

 1 class Person{
2 constructor(){
3 this.name = 'test'
4 }
5 }
6 class P1 extends Person{
7 constructor(){
8 super();
9 console.log (this.name);
10 }
11 }
12 new P1;

  定义在父类上的静态方法也可以通过super调用继承类上定义的静态方法。

  但是使用super时需要注意以下几点:

  1. super只能在派生类的构造函数和静态方法中使用
  2. 不能单独使用super,要么用来调用构造函数,要么用来引用静态方法
  3. 调用super()会调用父类构造函数,并将返回的实例赋值给this
  4. 在类构造函数中,不能在调用调用super()之前引用this

三、抽象基类

  抽象基类可以用于在定义一个类时只需要供其他类继承而本身不用实例化的情况。

  要实现抽象基类需要通过new.target,new.target保存通过new关键字调用的类或函数。

 1 class Person{
2 constructor(){
3 //如果使用Person直接进行实例化会抛出错误
4 if(new.target === Person){
5 throw 'Person can,t be instantiated'
6 }
7 }
8 }
9 class P extends Person{
10
11 }
12 new P;
13 // new Person; 注释解开会导致报错

四、继承内置类型

  es6之后,开发者可以通过类继承,轻松扩展内置类型。

 1 // NewArray继承于Array,且扩展了Array属性
2 class NewArray extends Array{
3 // 洗牌算法
4 shuffle(){
5 for(let i = this.length-1;i>0;i--){
6 const j = Math.floor(Math.random()*(i+1));
7 [this[i],this[j]] = [this[j],this[i]];
8 }
9 }
10 }
11 let a = new NewArray(1,2,3,4,5);
12 console.log (a instanceof Array); //true
13 console.log (a instanceof NewArray); //true
14 console.log (a); //NewArray(5) [1, 2, 3, 4, 5]
15 a.shuffle();
16 console.log (a); //NewArray(5) [1, 4, 2, 3, 5]

javascriptRemke之类的继承的更多相关文章

  1. javaScript的原型继承与多态性

    1.prototype 我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉 ...

  2. JavaScript的继承实现方式

    1.使用call或apply方法,将父对象的构造函数绑定在子对象上 function A(){ this.name = 'json'; } function B(){ A.call(this); } ...

  3. javascript中的继承与深度拷贝

    前言 本篇适合前端新人,下面开始...... 对于前端新手来说(比如博主),每当对js的对象做操作时,都是一种痛苦,原因就是在于对象的赋值是引用的传递,并非值的传递,虽然看上去后者赋值给了前者,他们就 ...

  4. 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  5. JS继承类相关试题

    题目一: //有关于原型继承的代码如下:function Person(name) {   this.name = name;}Person.prototype = {     getName : f ...

  6. JS继承之寄生类继承

    原型式继承 其原理就是借助原型,可以基于已有的对象创建新对象.节省了创建自定义类型这一步(虽然觉得这样没什么意义). 模型 function object(o){ function W(){ } W. ...

  7. JS继承之借用构造函数继承和组合继承

    根据少一点套路,多一点真诚这个原则,继续学习. 借用构造函数继承 在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术( ...

  8. JS继承之原型继承

     许多OO语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支 ...

  9. 深入浅出JavaScript之原型链&继承

    Javascript语言的继承机制,它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instanc ...

随机推荐

  1. 安全强化机制——SELinux

    1.基本 SELINUX 安全性概念 SELINUX(Security Enhanced Linux),意思是安全增强型Linux, 是可保护你系统安全性的额外机制 在某种程度上 , 它可以被看作是与 ...

  2. Python之sqlite3模块

    python自带有sqlite3模块,该模块可以方便我们操作sqlite数据库,下面一起跟随示例了解sqlite3模块的具体用法. import sqlite3 # 连接数据库 connection ...

  3. ELK数据迁移,ES快照备份迁移

    通过curl命令或者kibana快照备份,恢复的方式进行数据迁移 环境介绍 之前创建的ELK 因为VPC环境的问题,需要对ELK从新部署,但是还需要保留现有的数据,于是便有了这篇文档. 10.0.20 ...

  4. 一、自动化监控利器-Zabbix

    目录 1. 监控的作用 1.1 为何需要监控系统 1.2 监控系统的实现 1.3 常用的监控软件 2. Zabbix简介 2.1 选择Zabbix的理由 2.2 Zabbix的功能特性 3. Zabb ...

  5. C# ASP.NET RAZOR 链接SQLSERVER

    @using System.Data.SqlClient; @using System.Data;//必须引用 <html> <body> <h1>Learn Sq ...

  6. 数据结构(c++)(第二版) Dijkstra最短路径算法 教学示范代码出现重大问题!

    前言 去年在数据结构(c++)的Dijkstra教学算法案例中,发现了一个 bug 导致算法不能正常的运行,出错代码只是4行的for循环迭代代码. 看到那里就觉得有问题,但书中只给了关键代码的部分,其 ...

  7. 只需3步,快来用AI预测你爱的球队下一场能赢吗?

    摘要:作为球迷,我们有时候希望自己拥有预测未来的能力. 本文分享自华为云社区<用 AI 预测球赛结果只需三步,看看你爱的球队下一场能赢吗?>,作者:HWCloudAI. 还记得今年夏天的欧 ...

  8. key存活时间和五个类型通用的一些指令操作

    一.设置key的存活时间 1.失效后 ttl 是 -2,get返回 null : 2.不设置存活时候 ttl 返回是 -1: 二.查找指令和删除指令.重命名key.查看key类型 1.模糊查询 2.严 ...

  9. mac下使用vscode技巧

    1.查找 command +  F 2.查找并替换 选中要替换的文字  再 command +  options + F 3.竖状区域部分替换 鼠标点中替换字段的开头或者结尾,按options + s ...

  10. POJ1861 Network (Kruskal算法 +并查集)

    Network Description Andrew is working as system administrator and is planning to establish a new net ...