探索JavaScript中私有成员的相关知识


Posted in Javascript onJune 13, 2019


首先挖个坑 —— 这是一段 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.layout()
  • 找到 super.layout(),开始调用 MapView.layout()
  • MapView.layout() 中调用this._layoutMap()
    • 于是从当前对象(BusinessView 对象)寻找 _layoutMap()
    • 找到,调用它

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

  • 调用 BusinessView.layout()
  • 找到 base.layout(),开始调用 MapView.layout()
  • MapView.layout() 中调用 this._layoutMap()
    • 在 MapView 中找到 _layoutMap()
    • 检查是否虚函数
      • 如果是,往子类找到最后一个重载(override)函数,调用
      • 如果不是,直接调用

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

然而,这跟私有成员又有什么关系呢?因为私有函数肯定不是虚函数,所以在 C# 中,如果将 _layoutMap 定义为私有,那 MapView.layout() 调用的就一定是 MapView._layoutMap()。

虚函数的概念有点小复杂。不过可以简单理解为,如果一个成员方法被声明为虚函数,在调用的时候就会延着其虚函数链找到最后的重载来进行调用。

JavaScript 中虽然约定 _ 前缀的是私有,那也只是君子之约,它实质上仍然不是私有。君子之约对人有效,计算机又不知道你有这个约定……。但是,如果 JavaScript 真的实现了私有成员,那么计算机就知道了,_layoutMap() 是个私有方法,应该调用本类中的定义,而不是去寻找子类中的定义。

解决当下的私有化问题

JavaScript 当下没有私有成员,但是我们又需要切时有效地解决私有成员问题,怎么办?当然有办法,用 Symbol 和闭包来解决。

注意,这里的闭包不是指导在函数函数中生成闭包,请继续往下看

首先搞清楚,我们变通的看待这个私有化问题 —— 就是让祖先类调用者在调用某个方法的时候,它不会先去子类中寻找。这个问题从语法上解决不了,JavaScript 就是要从具体的实例从后往前去寻找指定名称的方法。但是,如果找不到这个方法名呢?

之所以能找到,因为方法名是字符串。一个字符串在全局作用域内都表示着同样的意义。但是 ES2015 带来了 Symbol,它必须实例化,而且每次实例化出来一定代表着不同的标识 —— 如果我们将类定义在一个闭包中,在这个闭包中声明一个 Symbol,用它来作为私有成员的名称,问题就解决了,比如

const MapView = (() => {
const _layoutMap = Symbol();
return class MapView extends BaseView {
layout() {
super.layout();
this[_layoutMap]();
}
[_layoutMap]() {
console.log("MapView layout map");
}
}
})();
const BusinessView = (() => {
const _layoutForm = Symbol();
const _layoutMap = Symbol();
return class BusinessView extends MapView {
layout() {
super.layout();
this[_layoutForm]();
this[_layoutMap]();
}
[_layoutForm]() {
// ....
}
[_layoutMap]() {
console.log("BusinessView layout map");
}
}
})();

而现代基于模块的定义,甚至连闭包都可以省了(模块系统会自动封闭作用域)

const _layoutMap = Symbol();
export class MapView extends BaseView {
layout() {
super.layout();
this[_layoutMap]();
}
[_layoutMap]() {
console.log("MapView layout map");
}
}
const _layoutForm = Symbol();
const _layoutMap = Symbol();
export class BusinessView extends MapView {
layout() {
super.layout();
this[_layoutForm]();
this[_layoutMap]();
}
[_layoutForm]() {
// ....
}
[_layoutMap]() {
console.log("BusinessView layout map");
}
}

改革过后的代码就可以按预期输出了:

BaseView Layout
MapView layout map
BusinessView layout map

后记

笔者在多年开发过程中养成了分析和解决问题的一系列思维习惯,所以常常可以迅速的透过现象看到需要解决的实质性问题,并基于现有条件来解决它。确实,Symbol 出现的理由之一就是解决私有化问题,但是为什么要用以及怎么用就需要去分析和思考了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
PM2自动部署代码步骤流程总结
Dec 10 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 #Javascript
基于Vue实现平滑过渡的拖拽排序功能
Jun 12 #Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 #Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 #Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 #jQuery
小程序组件之自定义顶部导航实例
Jun 12 #Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 #Javascript
You might like
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
删除节点的jquery代码
2014/01/13 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
iview实现图片上传功能
2020/06/29 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python 基础教程之str和repr的详解
2017/08/20 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
个人自我鉴定范文
2013/10/04 职场文书
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
咖啡馆创业计划书
2014/01/26 职场文书
致百米运动员广播稿
2014/01/29 职场文书
党员民主评议自我评价
2014/10/20 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
学会感恩主题班会
2015/08/12 职场文书
《失物招领》教学反思
2016/02/20 职场文书