我们已经看到了“类”和“行为委托”在理论和思维模型方面的区别,现在看看在真实场景中如何应用这些方法。
首先看看Web开发中非常典型的一种前端场景:创建UI控件(按钮、下拉列表,等等)
控件“类”
你可能已经习惯了面向对象设计模式,所以很快会想到一个包含所有通用控件行为的父类(可能叫作Widget)和继承父类的特殊控件子类(比如Button)。
下面这段代码展示的是如何在不使用任何“类”辅助库或者语法的情况下,使用纯JavaScript实现类风格的代码:
在面向对象设计模式中我们需要先在父类中定义基础的render(..),然后在子类中重写它。子类并不会替换基础的render(..),只是添加一些按钮特有的行为。
可以看到代码中出现了丑陋的显式伪多态,即通过Widget.call和Widget.prototype.render.call从“子类”方法中引用“父类”中的基础方法。
ES6的class语法糖
毫无疑问,使用ES6的class之后,上一段代码中许多丑陋的语法都不见了,super(..)函数棒极了。(尽管深入探究就会发现并不是那么完美!)
尽管语法上得到了改进,但实际上这里并没有真正的类,class仍然是通过[[Prototype]]机制实现的,
无论你使用的是传统的原型语法还是ES6中的新语法糖,你仍然需要用“类”的概念来对问题(UI控件)进行建模