详解ES6系列之私有变量的实现


Posted in Javascript onNovember 21, 2018

前言

在阅读 《ECMAScript 6 入门》的时候,零散的看到有私有变量的实现,所以在此总结一篇。

1. 约定

实现

class Example {
  constructor() {
    this._private = 'private';
  }
  getName() {
    return this._private
  }
}

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex._private); // private

优点

  • 写法简单
  • 调试方便
  • 兼容性好

缺点

  • 外部可以访问和修改
  • 语言没有配合的机制,如 for in 语句会将所有属性枚举出来
  • 命名冲突

2. 闭包

实现一

/**
 * 实现一
 */
class Example {
 constructor() {
  var _private = '';
  _private = 'private';
  this.getName = function() {return _private}
 }
}

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex._private); // undefined

优点

  • 无命名冲突
  • 外部无法访问和修改

缺点

  • constructor 的逻辑变得复杂。构造函数应该只做对象初始化的事情,现在为了实现私有变量,必须包含部分方法的实现,代码组织上略不清晰。
  • 方法存在于实例,而非原型上,子类也无法使用 super 调用
  • 构建增加一点点开销

实现二

/**
 * 实现二
 */
const Example = (function() {
 var _private = '';

 class Example {
  constructor() {
   _private = 'private';
  }
  getName() {
   return _private;
  }
 }

 return Example;

})();

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex._private); // undefined

优点

  • 无命名冲突
  • 外部无法访问和修改

缺点

  • 写法有一点复杂
  • 构建增加一点点开销

3. Symbol

实现

const Example = (function() {
  var _private = Symbol('private');

  class Example {
    constructor() {
     this[_private] = 'private';
    }
    getName() {
     return this[_private];
    }
  }

  return Example;
})();

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex.name); // undefined

优点

  • 无命名冲突
  • 外部无法访问和修改
  • 无性能损失

缺点

  1. 写法稍微复杂
  2. 兼容性也还好

4. WeakMap

实现

/**
 * 实现一
 */
const _private = new WeakMap();

class Example {
 constructor() {
  _private.set(this, 'private');
 }
 getName() {
   return _private.get(this);
 }
}

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex.name); // undefined

如果这样写,你可能觉得封装性不够,你也可以这样写:

/**
 * 实现二
 */
const Example = (function() {
 var _private = new WeakMap(); // 私有成员存储容器

 class Example {
  constructor() {
   _private.set(this, 'private');
  }
  getName() {
    return _private.get(this);
  }
 }

 return Example;
})();

var ex = new Example();

console.log(ex.getName()); // private
console.log(ex.name); // undefined

优点

  • 无命名冲突
  • 外部无法访问和修改

缺点

  • 写法比较麻烦
  • 兼容性有点问题
  • 有一定性能代价

5. 最新提案

class Point {
 #x;
 #y;

 constructor(x, y) {
  this.#x = x;
  this.#y = y;
 }

 equals(point) {
  return this.#x === point.#x && this.#y === point.#y;
 }
}

那么为什么不直接使用 private 字段呢?比如说这样:

class Foo {
 private value;

 equals(foo) {
  return this.value === foo.value;
 }
}

简单点来说,就是嫌麻烦,当然也有性能上的考虑……

举个例子,如果我们不使用 #,而是使用 private 关键字:

class Foo {
 private value = '1';

 equals(foo) {
  return this.value === foo.value;
 }
}

var foo1 = new Foo();
var foo2 = new Foo();

console.log(foo1.equals(foo2));

在这里我们新建了两个实例,然后将 foo2 作为参数传入了 foo1 的实例方法中。

那么我们可以获取 foo2.value 的值吗?如果我们直接 foo2.value 肯定是获取不到值的,毕竟是私有变量,可是 equals 是 Foo 的一个类方法,那么可以获取到的吗?

答案是可以的。

其实这点在其他语言,比如说 Java 和 C++ 中也是一样的,类的成员函数中可以访问同类型实例的私有变量,这是因为私有是为了实现“对外”的信息隐藏,在类自己内部,没有必要禁止私有变量的访问,你也可以理解为私有变量的限制是以类为单位,而不是以对象为单位,此外这样做也可以为使用者带来便利。

既然获取值是可以的,那么打印的结果应该为 true,但是如果我们传入的值不是 Foo 的实例,而是一个其他对象呢?

var foo1 = new Foo();

console.log(foo1.equals({
 value: 2
}));

当然这里代码也是可以正常运行的,但是对于编译器来说,就有一点麻烦了,因为编译器不知道 value 到底是 foo 的正常属性还是私有属性,所以编译器需要做判断,先判断 foo 是不是 Foo 的实例,然后再接着获取值。

这也意味着每次属性访问都需要做这样一个判断,而引擎已经围绕属性访问做了高度优化,懒得改,而且还降低速度。

不过除了这个工作之外,还会有一些其他的内容需要考虑,比如说:

  • 你必须将私有的 key 编码进每个词法环境
  • for in 可以遍历这些属性吗?
  • 私有属性和正常属性同名的时候,谁会屏蔽谁?
  • 怎么防止私有属性的名称不被探测出来。

关于使用 # 而不使用 private 更多的讨论可以参考这个Issue。

当然这些问题都可以被解决啦,就是麻烦了点。

而如果你选择 #,实现的方式将跟 JavaScript 对象属性完全没有关系,将会使用 private slots 的方式以及使用一个新的 slot 查找语法,总之就是会比 private 的实现方式简单很多。

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

Javascript 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
jQuery动态添加
Apr 07 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
详解使用mpvue开发github小程序总结
Jul 25 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 #jQuery
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 #Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 #Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 #Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 #Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 #jQuery
一步步教你利用Docker设置Node.js
Nov 20 #Javascript
You might like
PHP新手上路(七)
2006/10/09 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
JavaScript静态的动态
2006/09/18 Javascript
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
用jscript实现新建word文档
2007/06/15 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
python结合API实现即时天气信息
2016/01/19 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
Linux如何命名文件--使用文件名时应注意
2014/05/29 面试题
社区反邪教工作方案
2014/06/16 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
2015年公司工作总结
2015/04/25 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
2016大学军训心得体会
2016/01/11 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis