JS角度看什么是多态?

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

多态的简单解释是,调用相同的接口传入相同原创内容,盗版必究。【本文受版权保护】的参数,由于被调用的设备不同产生了不同的本文作者:唐霜,转载请注明出处。【转载请注明来源】副作用/效果。例如同样是console.本文作者:唐霜,转载请注明出处。【转载请注明来源】error,在chrome浏览器里面和在【未经授权禁止转载】未经授权,禁止复制转载。nodejs的command inlin【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】e interface里面,效果就不同。本文版权归作者所有,未经授权不得转载。【原创不易,请尊重版权】基于这一特性,我们可以对接口进行抽象,简【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。单的例子如下:

【关注微信公众号:wwwtangshua【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。ngnet】【关注微信公众号:wwwtangshua【关注微信公众号:wwwtangshuangnet】转载请注明出处:www.tangshuang.netngnet】
interface Person {
sing(song: object): string;
}

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

上面的代码里面,我们创建了一个sing函本文作者:唐霜,转载请注明出处。本文版权归作者所有,未经授权不得转载。数,它接收person这个对象,并调用它原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】的sing方法。由于类型的约束,接收的p【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。erson一定会有sing方法。但是,这【版权所有,侵权必究】【原创不易,请尊重版权】个person.sing这个方法会做什么【访问 www.tangshuang.net 获取更多精彩内容】本文作者:唐霜,转载请注明出处。事呢?对于sing这个函数它并不知道,它【版权所有】唐霜 www.tangshuang.net【原创内容,转载请注明出处】只是调用了person的sing方法而已著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net。所以,我们基于多态实现person。

【本文受版权保护】【本文首发于唐霜的博客】转载请注明出处:www.tangshua【作者:唐霜】【本文首发于唐霜的博客】ng.net【作者:唐霜】
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接口,但是转载请注明出处:www.tangshuang.net原创内容,盗版必究。在实现的时候,又使用了不同的副作用,这就【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】是多态。

【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net未经授权,禁止复制转载。ang.net未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。

那么,多态有什么用呢?对前端有什么影响呢原创内容,盗版必究。【本文首发于唐霜的博客】

【作者:唐霜】【作者:唐霜】【本文首发于唐霜的博客】原创内容,盗版必究。

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

未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。【转载请注明来源】【转载请注明来源】

以前我们喜欢extends来得到一个具体【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。的类,比如 class Person 有本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。一个 sing 方法,我们通过 exte【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。nds 来覆盖这个方法。这也就意味着,你【作者:唐霜】【关注微信公众号:wwwtangshuangnet】的代码里面,一定会引入原来的 Perso【作者:唐霜】【版权所有】唐霜 www.tangshuang.netn,并且原来的 Person 里面的 s著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。ing 方法一定会在最终打包的代码里面,【关注微信公众号:wwwtangshuangnet】【原创不易,请尊重版权】虽然它永远都用不到。而新的写法是在调用函【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】数的时候,把类的实例传入进去,这把引入模【关注微信公众号:wwwtangshuangnet】著作权归作者所有,禁止商业用途转载。块的工作交给函数外部去做,这就让到处这个【版权所有,侵权必究】原创内容,盗版必究。函数的模块的代码瞬间减少了。

【关注微信公众号:wwwtangshua【原创不易,请尊重版权】【原创内容,转载请注明出处】ngnet】【访问 www.tangshuang.n本文作者:唐霜,转载请注明出处。【本文受版权保护】et 获取更多精彩内容】

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

【未经授权禁止转载】转载请注明出处:www.tangshua【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。ng.net原创内容,盗版必究。

以前我在架设react项目时,会以Vie著作权归作者所有,禁止商业用途转载。【本文首发于唐霜的博客】w作为入口,应用的一切都是先有View,原创内容,盗版必究。【未经授权禁止转载】在View中去引入需要用到的Model等【未经授权禁止转载】【版权所有,侵权必究】其他模块,这也就意味着,应用以View为转载请注明出处:www.tangshuang.net【转载请注明来源】顶层入口,所有的代码层层引入,绑定在了一【原创不易,请尊重版权】【转载请注明来源】起。现在,我们利用多态,换一个角度。我们著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。让开发者自己写入口,这个入口我们称为Co原创内容,盗版必究。【原创不易,请尊重版权】ntroller,我们提供的框架不是让V原创内容,盗版必究。转载请注明出处:www.tangshuang.netiew去使用Model,而是反过来,让C【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ontroller去使用View,让Mo【转载请注明来源】未经授权,禁止复制转载。del去使用View。这个场景下面,Vi【作者:唐霜】未经授权,禁止复制转载。ew必须按照接口约束提供接口给Model【版权所有,侵权必究】本文作者:唐霜,转载请注明出处。使用,这个时候,我们写Model就可以反【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。过来考虑控制View(这里的Model是本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net指ViewModel)。这种转变非常神奇【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】,从框架层面,它颠覆了传统前端的开发方式未经授权,禁止复制转载。【作者:唐霜】

【版权所有】唐霜 www.tangshu【原创内容,转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】ang.net【转载请注明来源】【本文受版权保护】