JS角度看什么是多态?

广告位招租
扫码页面底部二维码联系

多态的简单解释是,调用相同的接口传入相同的参数,由于被调用的设备不同产生了不同的副作用/效果。例如同样是console.error,在chrome浏览器里面和在nodejs的command inline interface里面,效果就不同。基于这一特性,我们可以对接口进行抽象,简单的例子如下:

interface Person {
sing(song: object): string;
}

function sing(person: Person, song: object): string {
return person.sing(song)
}

上面的代码里面,我们创建了一个sing函数,它接收person这个对象,并调用它的sing方法。由于类型的约束,接收的person一定会有sing方法。但是,这个person.sing这个方法会做什么事呢?对于sing这个函数它并不知道,它只是调用了person的sing方法而已。所以,我们基于多态实现person。

class Person1 implement Person {
sing(song: object) {
const { lyric } = song
console.log(lyric) // 打印到屏幕上
return lyric
}
}

class Person2 implement Person {
sing(song: object) {
const { lyric } = song
Audio.paly(lyric) // 播放声音
return lyric
}
}

两个类实现了相同的Person接口,但是在实现的时候,又使用了不同的副作用,这就是多态。

那么,多态有什么用呢?对前端有什么影响呢?

第一点,是代码写法上的变化。

以前我们喜欢extends来得到一个具体的类,比如 class Person 有一个 sing 方法,我们通过 extends 来覆盖这个方法。这也就意味着,你的代码里面,一定会引入原来的 Person,并且原来的 Person 里面的 sing 方法一定会在最终打包的代码里面,虽然它永远都用不到。而新的写法是在调用函数的时候,把类的实例传入进去,这把引入模块的工作交给函数外部去做,这就让到处这个函数的模块的代码瞬间减少了。

第二点,是架构设计上的变化。

以前我在架设react项目时,会以View作为入口,应用的一切都是先有View,在View中去引入需要用到的Model等其他模块,这也就意味着,应用以View为顶层入口,所有的代码层层引入,绑定在了一起。现在,我们利用多态,换一个角度。我们让开发者自己写入口,这个入口我们称为Controller,我们提供的框架不是让View去使用Model,而是反过来,让Controller去使用View,让Model去使用View。这个场景下面,View必须按照接口约束提供接口给Model使用,这个时候,我们写Model就可以反过来考虑控制View(这里的Model是指ViewModel)。这种转变非常神奇,从框架层面,它颠覆了传统前端的开发方式。