一、是什么

继承(inheritance)是面向对象软件技术当中的一个概念。

如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超类”

  • 继承的优点

继承可以使得子类具有父类别的各种属性和方法,而不需要再次编写相同的代码

在子类别继承父类别的同时,可以重新定义某些属性,并重写某些方法,即覆盖父类别的原有属性和方法,使其获得与父类别不同的功能

虽然JavaScript并不是真正的面向对象语言,但它天生的灵活性,使应用场景更加丰富

关于继承,我们举个形象的例子:

定义一个类(Class)叫汽车,汽车的属性包括颜色、轮胎、品牌、速度、排气量等

class Car{
constructor(color,speed){
this.color = color
this.speed = speed
// ...
}
}

由汽车这个类可以派生出“轿车”和“货车”两个类,在汽车的基础属性上,为轿车添加一个后备厢、给货车添加一个大货箱

// 货车
class Truck extends Car{
constructor(color,speed){
super(color,speed)
this.Container = true // 货箱
}
}

这样轿车和货车就是不一样的,但是二者都属于汽车这个类,汽车、轿车继承了汽车的属性,而不需要再次在“轿车”中定义汽车已经有的属性

在“轿车”继承“汽车”的同时,也可以重新定义汽车的某些属性,并重写或覆盖某些属性和方法,使其获得与“汽车”这个父类不同的属性和方法

class Truck extends Car{
constructor(color,speed){
super(color,speed)
this.color = "black" //覆盖
this.Container = true // 货箱
}
}

从这个例子中就能详细说明汽车、轿车以及卡车之间的继承关系

二、实现方式

JavaScript常见的继承方式:

  • 原型链继承

  • 借用继承(call继承,构造继承)
  • 组合继承

  • 类的继承

原型链继承

特点: 子类利用原型来将父类里面的属性和方法继承一份,给子类来进行使用
优点: 可以将父类里面的属性和方法给继承一份下来,提供给子类来进行使用
缺点: 子类没有自己的原型,用的原型父类的原型的
//定义一个动物的构造函数
function Animal(name,age){
//属性
this.name = name;
this.age = age;
}
//方法
Animal.prototype.eat = function(){
console.log(this.name + "吃");
} //创建一个父类
// const a = new Animal("动动",18)
// console.log(a); //定义一个狗的构造函数
function Dog(){}
// 原型继承 将父类里面的复制一份,交给子类的原型里面来进行使用
Dog.prototype = new Animal()
// const d = new Dog("阿黄",3);//自身是没有的
const d = new Dog();//自身是没有的 //属性
d.name = "阿黄";
d.age = 3;
console.log(d);
//调用吃的方法
d.eat();

借用继承(call继承,构造继承)

特点: 将父类的构造函数当做普通函数来进行执行,使用call改变this的指向
优点: 可以将父类里面的属性继承一份,变成自己自己身上的属性
缺点: 不能继承父类里面的方法

案例:

//定义一个动物的构造函数
function Animal(name,age){
//属性
this.name = name;
this.age = age;
}
//方法
Animal.prototype.eat = function(){
console.log(this.name + "吃");
} //将父类的构造函数当中普通函数来进行调用
// Animal("张三",18) //子类
function Dog(...arg){
// 将父类的构造函数当中普通函数来进行调用,使用call改变this的指向
Animal.call(this,...arg)
} const d = new Dog("张三",18)
console.log(d);

组合继承

特点: 组合继承 = 原型继承 + 借用继承(call继承,构造继承)
优点: 可以继承属性,又可以继承方法
缺点: 在原型当中多了一套属性
案例:
//定义一个动物的构造函数
function Animal(name,age){
//属性
this.name = name;
this.age = age;
}
//方法
Animal.prototype.eat = function(){
console.log(this.name + "吃");
} //组合继承
function Dog(...arg){
//借用继承
Animal.call(this,...arg)
}
//原型继承
Dog.prototype = new Animal() const d = new Dog("阿黄",3)
console.log(d);
d.eat();

类的继承

类的继承的关键字 extends
    语法:
        子类 extends 父类
    constructor这个属性是可以不写,如果我们不写,我就默认存在
    super => 超级
    父类也叫超类
class Father{
//属性 => constructor 里面
constructor(name,age){
this.name = name;
this.age = age;
}
//方法
eat(){
console.log(this.name + '吃');
}
} class Son extends Father{
//子类的构造器
//如果我们写了,就会把默认的构造器给覆盖掉了
constructor(...rest){
super(...rest)
}
}
//创建一个儿子的实例对象
const s = new Son("张三",18);
console.log(s);
s.eat();
 
 

JavaScript是怎样实现继承的?的更多相关文章

  1. JavaScript对寄生组合式继承的理解

    有关JavaScript的几种继承方式请移步JavaScript的几种继承方式 原型链的缺陷 SubType.prototype = new SuperType(); 这样做的话,SuperType构 ...

  2. web前端学习(二) javascript对象和原型继承

    目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...

  3. 【面试必备】javascript的原型和继承

    原型.闭包.作用域等知识可以说是js中面试必考的东西,通过你理解的深度也就能衡量出你基本功是否扎实.今天来复习一下javascript的原型和继承,虽说是老生常谈的话题,但对于这些知识,自己亲手写一遍 ...

  4. Javascript的实例化与继承:请停止使用new关键字

    本文同时也发表在我另一篇独立博客 <Javascript的实例化与继承:请停止使用new关键字>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了!) 标题 ...

  5. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  6. Javascript之对象的继承

    继承是面向对象语言一个非常重要的部分.许多OOP语言都支持接口继承和实现继承两种方式.接口继承:继承方法签名:实现继承:继承实际的方法.在ECMAScript中函数是没有签名的,所以也就无法实现接口继 ...

  7. javascript中的原型继承

    在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <cod ...

  8. JavaScript面向对象中的继承

    1.1继承的基本概念 使用一个子类,继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承. >>>继承的两方,发生在两个类之间. 实现继承的三种方式: 扩展O ...

  9. Javascript 进阶 面向对象编程 继承的一个样例

    Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承.这篇使用一个样例来展示js怎样面向对象编程.以及怎样基于类实现继承. 1. ...

  10. Javascript 进阶 面向对象编程 继承的一个例子

    Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承,这篇使用一个例子来展示js如何面向对象编程,以及如何基于类实现继承. 1. ...

随机推荐

  1. 周立功DTU+温度传感器,ZWS物联网平台尝试

    1.前言 了解到周立功有相关的物联网云平台,近期在调研动态环境监控项目,可以进行一个上云的尝试.购置了传感器.周立功的DTU等硬件,将传感器的温度.湿度等数据进行一个云平台的上传. 2.前期准备 传感 ...

  2. github及git入门笔记

    1 github https://github.com/ 1.1 github注册 进入官方 https://github.com/ 首页,点击如下图片中sign up按钮,按照提示信息注册即可. 注 ...

  3. 这可能是最全的SpringBoot3新版本变化了!

    11月24号,Spring Boot 3.0 发布了第一个正式的 GA 版本,一起看看新版本到底有哪些变化. 2.7版本升级指南 官方提供了一个从 2.7 版本升级到 3.0 的指南:https:// ...

  4. ArcGIS QGIS学习二:图层如何只显示需要的部分几何面数据(附最新坐标边界下载全国省市区县乡镇)

    目录 前言 准备SHP数据 ArcMap 的筛选 QGIS 的筛选 如何编写查询条件 前言 当我们用GIS软件打开一个SHP文件的时候,会显示出里面全部的几何图形,假如我只想要其中的一部分数据显示出来 ...

  5. 【大数据课程】高途课程实践-Day02:利用Hive SQL编写离线数仓实现可视化展示

    〇.概述 1.实现内容 使用Hive SQL编程,构造分层离线数仓 并可以通过Quick Bi进行展示 2.过程 (1)数据接⼊到ODS层 (2)进⾏ODS到DWD层数据开发 (3)进⾏ODS到DIM ...

  6. dotTrace工具

    1.dotTrace简介: (1)dotTrace是一个包含了可用于.NET应用程序的性能分析器(dotTrace Performance)和内存分析器(dotTrace Memory)的套件: (2 ...

  7. 【转载】SQL SERVER 中各种存储过程创建及执行方式

    一. 什么是存储过程系统存储过程是系统创建的存储过程,目的在于能够方便的从系统表中查询信息或完成与更新数据库表相关的管理任务或其他的系统管理任务.系统存储过程主要存储在master数据库中,以&quo ...

  8. 一文了解 Dubbo 3 配置工作原理

    以下是一个 Dubbo 属性配置的例子 dubbo-spring-boot-samples ## application.properties # Spring boot application sp ...

  9. Jekyll + GitHub Pages + Vercel纯免费搭建独立博客

    大家一定不要随便立flag 10月份发了个朋友圈,有好兄弟留言说写个教程,我说好 然后一忙起来就忘了,昨天好兄弟追到知识星球,在一个新flag帖子下催更了 写个无废话极简 VSCode 从这下载:ht ...

  10. cornerstone4.1破解版&#160;for&#160;mac

    百度网盘: https://pan.baidu.com/s/1l_0rHMF11mZsUP3qJrp7Uw  密码: 8ei9