【前端基础】如何理解 JavaScript 中的多态

 

什么是多态

多态的字面意思就是多种状态，同一操作作用于不同的对象上，可以产生不同的解释和不同的执行结果。比方说，我养了一只猫和一只狗，我对它们发出同一个指令 "叫一下"，猫会喵喵喵，而狗会汪汪汪，所以让它们叫一下就是同一操作，而叫声不同则是不同的执行结果。用伪代码来实现就是这样的：

function getVoice(animals) {
    if(animals instanceof Cat){
        console.log('喵～');
        
    }
    if(animals instanceof Dog){
        console.log('汪～');
    }
}
class Cat {}
class Dog {}
getVoice(new Cat()); // '喵～'
getVoice(new Dog()); // '汪～'
复制代码

那么如果我们想增加一个动物呢？再多加一个判断？那么之后我每次都想要加一个动物的叫声就都要修改一次 getVoice？是不是有点繁琐呢？

所以我们要想想如何解决这个问题～

对象的多态性

其实多态最根本的作用就是通过把过程化的条件语句转化为对象的多态性，从而消除这些条件分支语句。

通俗一点来讲，就是把 "做什么" 和 "谁去做以及怎么去做" 分离开，抽象概括就是把 "不变的事物" 和 "可能改变的事物" 分离开。

最开始我们举的例子中就可以拆分理解成这样：

不变的事物是：动物发出叫声 可能改变的事物是：什么动物发出什么样的叫声

那我们就可以把 "动物发出叫声" 这个动作分布到各个类上(封装到各个类上)，然后在发出叫声的 getVoice 函数中调用"叫"这个动作就可以了。

上面这个例子就可以修改成这样啦～

function getVoice (animals) {
    if (animals.sound instanceof Function) {
        // 判断是否有animal.sound且该属性为函数
        animals.sound();
    }
}
class Cat {
    sound () {
        console.log('喵～');
    }
}
class Dog {
    sound () {
        console.log('汪～');
    }
}
getVoice(new Cat()); // '喵～'
getVoice(new Dog()); // '汪～'
复制代码

多态的实际应用

多态在设计模式中应用得比较广泛，比如 组合模式 / 策略模式等等。～～

虽然我们在平时的开发中不太用的到，但是一旦我们涉及到一些设计模式的话，多态还是很有用的～～