继承与组合都是面向对象中代码复用的方式,了解各自有什么特点,可以让我们写出更简洁的代码,设计出更好的代码架构。
这是一篇翻译文章,作者是serhiirubets
“我应该怎么使用继承和组合”这是一个常见的问题,不仅是JavaScript相关,但是本篇我们只讨论JavaScript相关的内容和示例。
如果你不知道什么是 组合 或 继承 ,我强烈推荐你去查看相关内容,因为本文的主要讲的就是怎么使用和如何选择它们,但是为了确定我们在一个频道,让我们先了解一下组合和继承吧。
继承是面向对象编程核心概念之一,可以帮助我们避免代码重复。主要的思想是我们可以创建一个包含逻辑的基类,可以被子类重用。我们来看个示例:
class Element {
remove() {}
setStyles() {}
}
class Form extends Element {}
class Button extends Element {}
我们创建了一个基类“Element”,子类会继承Element中的通用逻辑。
继承存在 is-a 关系: Form 是一个 Element , Button 也是一个 Element 。
组合:和继承不同,组合使用的是 has-a 关系,将不同的关系收集到一起。
class Car {
constructor(engine, transmission) {
this.engine = engine;
this.transmission = transmission;
}
}
class Engine {
constructor(type) {
this.type = type;
}
}
class Transmission {
constructor(type) {
this.type = type;
}
}
const petrolEngine = new Engine('petrol');
const automaticTransmission = new Engine('automatic');
const passengerCar = new Car(petrolEngine, automaticTransmission) ;
我们创建了使用 Engine 和 Transmission 创建了 Car ,我们不能说 Engine 是一个 Car ,但是可以说 Car 包含 Engine 。希望上面的例子可以帮助你理解什么是 继承 ,什么是 组合 。
我们再来看两个不同的示例,对比一下使用类的方法实现和函数方法实现有什么区别。
假设我们正在使用文件系统,想实现读取、写入和删除的功能。我们可以创建一个类:
class FileService {
constructor(filename) {
this.filename = filename;
}
read() {}
write() {}
remove() {}
}
目前可以满足我们想要的功能,之后我们可能想加入权限控制,一些用户只有读取权限,其他人可能有写入权限。我们应该怎么办?一个解决方案是我们可以把方法划分为不同的类:
class FileService {
constructor(filename) {
this.filename = filename;
}
}
class FileReader extends FileService {
read() {}
}
class FileWriter extends FileService {
write() {}
}
class FileRemover extends FileService {
remove() {}
}
现在每个用户可以使用其需要的权限,但是还有一个问题,如果我们需要给一些人同时分配读取和写入权限,应该怎么办?同时分配读取和删除权限怎么办?使用当前的实现,我们做不到,应该怎么解决?
第一个想到的方案可能是:为读取和写入创建一个类,为读取和删除创建一个类。
class FileReaderAndWriter extends FileService {
read() {}
write() {}
}
class FileReaderAndRemover extends FileService {
read() {}
remove() {}
}
按照这种做法,我们可能还需要以下类: FileReader, FileWriter, FileRemove, FileReaderAndWriter, FileReaderAndRemover。
这不是一个好的实现方式:第一,我们可能不仅有3种,而是10、20种方法,还需要在他们之间有大量的组合。第二是我们的类中存在重复的逻辑,FileReader类包含读取方法,FileReaderAndWriter也包含同样的代码。
这不是一个很好的解决方案,还有其他的实现方法吗?多重继承?JavaScript中没有这个特性,而且也不是很好的方案:A类继承了B类,B类可能继承了其他类...,这样的设计会非常混乱,不是一个良好的代码架构。
怎么解决呢?一个合理的方法是使用 组合 :我们把方法拆分为单独的函数工厂。
function createReader() {
return {
read() {
console.log(this.filename)
}
}
}
function createWriter() {
return {
write() {
console.log(this.filename)
}
}
}
上面的示例中,我们有两个函数创建了可以读取和写入的对象。现在就可以在任何我们地方使用它们,也可以将它们进行组合:
class FileService {
constructor(filename) {
this.filename = filename ;
}
}
function createReadFileService (filename ) {
const file = new FileService(filename);
return {
...file,
...createReader()
}
}
function createWriteFileService (filename) {
const file = new FileService(filename);
return {
...file,
...createWriter(),
}
}
上面的例子中,我们创建了读取和写入服务,如果我们想组合不同的权限:读取、写入和删除,我们可以很容易的做到:
function createReadAndWriteFileService (filename) {
const file = new FileService(filename);
}
return {
...file,
...createReader(),
...createWriter()
}
const fileForReadAndWriter = createReadAndWriteFileService('test');
fileForReadAndWriter.read();
fileForReadAndWriter.write();
如果我们有5、10、20种方法,我们可以按照我们想要的方式进行组合,不会有重复的代码问题,也没有令人困惑的代码架构。
我们再来看一个使用函数的例子,假设我们有很多员工,有出租车司机、健身教练和司机:
function createDriver(name) {
return {
name,
canDrive: true,
}
}
function createManager(name) {
return {
name,
canManage: true
}
}
function createSportCoach(name) {
return {
name,
canSport: true
}
}
看起来没有问题,但是假设有一些员工白天当健身教练,晚上去跑出租,我们应该怎么调整呢?
function createDriverAndSportCoach(name) {
return {
name,
canSport: true,
canDriver: true
}
}
可以实现,但是和第一个例子一样,如果我们有多种类型混合,就会产生大量重复的代码。我们可以通过 组合 来进行重构:
function createEmployee(name,age) {
return {
name,
age
}
}
function createDriver() {
return {
canDrive: true
}
}
function createManager() {
return {
canManage: true
}
}
function createSportCoach() {
return {
canSport: true
}
}
现在我们可以根据需要组合所有工作类型,没有重复代码,也更容易理解:
const driver = {
...createEmployee('Alex', 20),
...createDriver()
}
const manager = {
...createEmployee('Max', 25),
...createManager()
}
const sportCoach = {
...createEmployee('Bob', 23),
...createSportCoach()
}
const sportCoachAndDriver = {
...createEmployee('Robert', 27) ,
...createDriver(),
...createSportCoach()
}
希望你现在已经可以理解 继承 和 组合 之间的区别,一般来说, 继承 可以用于 is-a 关系, 组合 可以用于 has-a 。
但在实践中,继承有时候并不是一个好的解决方法:就像示例中,司机是员工( is-a 关系),经理也是员工,如果我们需要把不同的部分进行混合,组合确实比继承更合适。
最后我想强调的是: 继承 和 组合 都是很好实现,但是你应该正确的使用他们。一些场景组合可能更合适,反之亦然。
当然,我们可以将 继承 和 组合 结合在一起,比如我们有 is-a 关系,但想添加不同的值或方法:我们可以创建一些基类,为实例提供所有通用功能,然后使用组合来添加其他特定功能。
原型继承缺点:1、不能由子对象像父对象传递参数,2、对于引用型的属性修改之后会印象其他的实例对象;构造函数继承缺点:1、不能继承父对象原型上的方法 2、每次实例化对象会重新构建函数,浪费内存。
学过java的同学应该都知道,继承是java的重要特点之一,许多面向对象的语言都支持两种继承方式:接口继承和实现继承,接口继承只继承方法签名,而实现继承则继承实际的方法,在js中,由于函数没有签名,因此支持实现继承,而实现继承主要是依靠原型链来实现的,那么,什么是原型链呢?
在面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法。那么我们现在主要研究css,css就是在设置属性的。不会牵扯到方法的层面。
1. 原型链继承;2,构造函数继承(对象冒充继承);3,组合继承(原型链继承+构造函数继承);4,原型式继承;5. 寄生组合式继承,为了解决引用共享和超类型无法传参的问题,我们采用一种叫借用构造函数的技术
prototype是构造函数的一个属性,它决定了在构造出来的对象上__proto__属性将是什么样的。如上图所示,理解JavaScript中的继承的关键是要理解母鸡如何产蛋的过程。
JavaScript常用继承方式主要分为(7种):原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承以及继承多个对象。原型链继承(核心:将父类的实例作为子类的原型
继承到底是什么?继承(英语:inheritance)是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A,就把这个B称为“A的子类”,而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性和方法
当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。如果让原型对象指向另一个类型的实例.....有趣的事情便发生了.
构造函数,就是专门用来生成实例对象的函数。一个构造函数,可以生成多个实例对象,这些实例对象都有相同的结构。为了与普通函数区别,构造函数名字的第一个字母通常大写。
JavaScript对象继承的方法有很多,这里总结一下几种比较常用的方法。使用call/apply和Object.create()第一种方法使用call或apply方法,改变了 this 的指向而实现继承,将父对象的构造函数绑定在子对象上,即在子对象构造函数中加一行
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!