JavaScript是怎样实现继承的?
一、是什么
继承(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继承,构造继承)
案例:
//定义一个动物的构造函数
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);
组合继承
//定义一个动物的构造函数
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();
类的继承
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是怎样实现继承的?的更多相关文章
- JavaScript对寄生组合式继承的理解
有关JavaScript的几种继承方式请移步JavaScript的几种继承方式 原型链的缺陷 SubType.prototype = new SuperType(); 这样做的话,SuperType构 ...
- web前端学习(二) javascript对象和原型继承
目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...
- 【面试必备】javascript的原型和继承
原型.闭包.作用域等知识可以说是js中面试必考的东西,通过你理解的深度也就能衡量出你基本功是否扎实.今天来复习一下javascript的原型和继承,虽说是老生常谈的话题,但对于这些知识,自己亲手写一遍 ...
- Javascript的实例化与继承:请停止使用new关键字
本文同时也发表在我另一篇独立博客 <Javascript的实例化与继承:请停止使用new关键字>(管理员请注意!这两个都是我自己的原创博客!不要踢出首页!不是转载!已经误会三次了!) 标题 ...
- 理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
- Javascript之对象的继承
继承是面向对象语言一个非常重要的部分.许多OOP语言都支持接口继承和实现继承两种方式.接口继承:继承方法签名:实现继承:继承实际的方法.在ECMAScript中函数是没有签名的,所以也就无法实现接口继 ...
- javascript中的原型继承
在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <cod ...
- JavaScript面向对象中的继承
1.1继承的基本概念 使用一个子类,继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承. >>>继承的两方,发生在两个类之间. 实现继承的三种方式: 扩展O ...
- Javascript 进阶 面向对象编程 继承的一个样例
Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承.这篇使用一个样例来展示js怎样面向对象编程.以及怎样基于类实现继承. 1. ...
- Javascript 进阶 面向对象编程 继承的一个例子
Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承,这篇使用一个例子来展示js如何面向对象编程,以及如何基于类实现继承. 1. ...
随机推荐
- AWS启示录:创新作帆,云计算的征途是汪洋大海
全文13100字,预计阅读时间15到20分钟. 开篇:创新是AWS发展的最持久驱动力 云计算,新世纪以来最伟大的技术进步之一,从2006年 Amazon Web Service(以下简称AWS)初创时 ...
- 06#Web 实战:实现可滑动的标签页
实现效果图 本随笔只是记录一下大概的实现思路,如果感兴趣的小伙伴可以通过代码和本随笔的说明去理解实现过程.我的 Gitee 和 GitHub 地址.注意哦:这个只是 PC 上的标签页,手机端的没用,因 ...
- Java开发学习(四十四)----MyBatisPlus查询语句之查询条件
1.查询条件 前面我们只使用了lt()和gt(),除了这两个方法外,MybatisPlus还封装了很多条件对应的方法. MybatisPlus的查询条件有很多: 范围匹配(> . = .betw ...
- vue阻止向上和向下冒泡
阻止向下冒泡 <div class="content" @click.self="cancelFunc"></div> 阻止向上冒泡 & ...
- day16 正则表达式 & 反射 & Java内存模型(JMM)
day16 class 1)获取一个类的所有信息(变量.方法.构造方法) 2)创建类对象newInstance() Field 1)访问变量或给变量赋值 Method 1)执行具体类对象的指定方法 3 ...
- nginx配置文件讲解及示例(可复制)
详细的配置说明参考:https://www.cnblogs.com/ghl1024/p/9013805.html [示例一] #运行用户user www-data; #启动进程,通常设置成和cpu ...
- 【SQL】DML语句-SQL更新与删除:单表更新删除与连表更新删除语法
〇.概述 1.资料 sql连表删除:http://www.lanxinbase.com/?tag=sql%E8%BF%9E%E8%A1%A8%E5%88%A0%E9%99%A4 sql实现两表关联更新 ...
- jmeter 之性能分布式压测
背景: 当并发量达到一定数量时,单台测试设备不足以支撑,甚至会出现内存溢出等情况,解决这个问题就可用分布式测试,使用多台测试设备来达到更大的用户并发数. 原理: 1.一台设备作为调度机(master) ...
- 希腊字母表及latex代码
希腊字母表及latex代码 字母大写 字母小写 英文名称 latex大写代码 latex小写代码 \(\Alpha\) \(\alpha\) alpha \Alpha \alpha \(\Beta\) ...
- [深度学习] caffe分类模型训练、结果可视化、部署及量化笔记
本文为本人caffe分类网络训练.结果可视化.部署及量化具体过程的心得笔记.caffe目前官方已经停止支持了,但是caffe是目前工业落地最常用的深度学习框架,用的人挺多.其实主要怕自己忘了,弄个备份 ...