深入了解JavaScript 私有化

Class field declarations for JavaScript（JavaScript 类的字段声明）目前已经进入了 stage-3，其中包含一项 OOP 开发者都很关注的内容：Private fields。JavaScript 一直没有私有成员并不是没有原因，所以这一提议给 JavaScript 带来了新的挑战。但同时，JavaScript 在 ES2015 发布的时候已经在考虑私有化的问题了，所以要实现私有成员也并非毫无基础。

坑

首先挖个坑 —— 这是一段 JS 代码，BusinessView 中要干两件事情，即对表单和地图进行布局。

代表将 _ 前缀约定为私有

class BaseView {layout() {console.log("BaseView Layout");}}class BusinessView extends BaseView {layout() {super.layout();this._layoutForm();this._layoutMap();}_layoutForm() {// ....}_layoutMap() {// ....}}

然后，由于业务的发展，发现有很多视图都存在地图布局。这里选用继承的方式来实现，所以从 BusinessView 中把地图相关的内容抽象成一个基类叫 MapView：

class MapView extends BaseView {layout() {super.layout();this._layoutMap();}_layoutMap() {console.log("MapView layout map");}}class BusinessView extends MapView {layout() {super.layout();this._layoutForm();this._layoutMap();}_layoutForm() {// ....}_layoutMap() {console.log("BusinessView layout map");}}

上面这两段代码是很典型的基于继承的 OOP 思想，本意是期望各个层次的类都可以通过 layout() 来进行各层次应该负责的布局任务。但理想和现实总是有差距的，在 JavaScript 中运行就会发现 BusinessView._layoutMap() 被执行了两次，而 MapView._layoutMap() 未执行。为什么？

虚函数

JavaScript 中如果在祖先和子孙类中定义了相同的名称的方法，默认会调用子孙类中的这个方法。如果想调用祖先类中的同名方法，需要在子孙类中通过 super. 来调用。

这里可以分析一下这个过程：

在子类创建对象的时候，其类和所有祖先类的定义都已经加载了。这个时候

你看，由于 BusinessView 定义了 _layoutMap，所以压根都没去搜索原型链。对的，这是基于原型关系的 OOP 的局限。如果我们看看 C# 的处理过程，就会发现有所不同

发现区别了吗？关键是在于判断“虚函数”。