JavaScript中的继承和组合

继承与组合都是面向对象中代码复用的方式，了解各自有什么特点，可以让我们写出更简洁的代码，设计出更好的代码架构。

这是一篇翻译文章，作者是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关系，但想添加不同的值或方法：我们可以创建一些基类，为实例提供所有通用功能，然后使用组合来添加其他特定功能。

欢迎关注“混沌前端”公众号

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345