美文网首页
JavaScript中的继承和组合

JavaScript中的继承和组合

作者: 一颗小行星_混沌前端 | 来源:发表于2022-04-28 14:12 被阅读0次

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

    这是一篇翻译文章,作者是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) ;
    

    我们创建了使用EngineTransmission创建了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关系,但想添加不同的值或方法:我们可以创建一些基类,为实例提供所有通用功能,然后使用组合来添加其他特定功能。

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

    相关文章

      网友评论

          本文标题:JavaScript中的继承和组合

          本文链接:https://www.haomeiwen.com/subject/wmcdyrtx.html