详解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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
学习ExtJS border布局
Oct 08 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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/12/21 PHP
php 面向对象的一个例子
2011/04/12 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
javascript 继承实现方法
2009/08/26 Javascript
javascript Object与Function使用
2010/01/11 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
手机端转换rem适应
2017/04/01 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Python中Collection的使用小技巧
2014/08/18 Python
浅谈python字典多键值及重复键值的使用
2016/11/04 Python
Python获取当前路径实现代码
2017/05/08 Python
Django中url的反向查询的方法
2018/03/14 Python
Python中的Django基本命令实例详解
2018/07/15 Python
Python交互式图形编程的实现
2019/07/25 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
基于python实现删除指定文件类型
2020/07/21 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
办公室文书岗位职责
2013/12/16 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
六一儿童节活动总结
2014/08/27 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python