详解ES6实现类的私有变量的几种写法


Posted in Javascript onFebruary 10, 2021

闭包实现类的私有变量方式

私有变量不共享

通过 new 关键字 person 的构造函数内部的 this 将会指向 Tom,开辟新空间,再次全部执行一遍,

class Person{ 
    constructor(name){ 
      let _num = 100; 

      this.name = name;
      this.getNum = function(){
        return _num;
      } 
      this.addNum = function(){
        return ++_num
      } 
    }
  }
  
  const tom = new Person('tom')
  const jack = new Person('jack')
  tom.addNum() 
  console.log(tom.getNum()) //101
  console.log(jack.getNum()) //100

私有变量可共享

为避免每个实力都生成了一个新的私有变量,造成是有变量不可共享的问题,我们可以将这个私有变量放在类的构造函数到外面,继续通过闭包来返回这个变量。

const Person = (function () {
    let _num = 100;

    return class _Person {
      constructor(name) {
        this.name = name; 
      }
      addNum() {
       return ++_num
      }
      getNum() {
       return _num
      } 
    }
  })() 

  const tom = new Person('tom')
  const jack = new Person('jack') 
  tom.addNum()
  console.log(tom.getNum()) //101
  console.log(jack.getNum()) //101

那这样的话,如果两种方法混合使用,那就可以拥有可共享和不可共享的两种私有变量。

缺点:实例化时会增加很多副本,比较耗内存。

Symbol实现类的私有变量方式

symbol 简介:

创建一个独一无二的值,所有 Symbol 两两都不相等,创建时可以为其添加描述Symble("desc"),目前对象的健也支持 Symbol 了。

const name = Symbol('名字')
const person = { // 类名
  [name]:'www',
  say(){
    console.log(`name is ${this[name]} `) 
  } 
} 
person.say()
console.log(name)

使用Symbol为对象创建的健无法迭代和Json序列化,所以其最主要的作用就是为对象添加一个独一无二的值。
但可以使用getOwnProporitySymbols()获取Symbol.
缺点:新语法浏览器兼容不是很广泛。

symbol 实现类的私有变量

推荐使用闭包的方式创建 Symbol 的的引用,这样就可以在类的方法区获得此引用,避免方法都写在构造函数,每次创建新实例都要重新开辟空间赋值方法,造成内存浪费。

const Person = (function () {
 let _num = Symbol('_num:私有变量');
 
 return class _Person {
  constructor(name) {
   this.name = name;
   this[_num] = 100
  }
  addNum() {
   return ++this[_num]
  }
  getNum() {
   return this[_num]
  } 
 }
})()

const tom = new Person('tom')
const jack = new Person('jack')

console.log(tom.addNum()) //101 
console.log(jack.getNum()) //100

通过 weakmap 创建私有变量

MDN 简介

详解ES6实现类的私有变量的几种写法

实现:

const Parent = (function () {
 const privates = new WeakMap();

 return class Parent {
  constructor() {
   const me = {
    data: "Private data goes here"
   };
   privates.set(this, me);
  }
  getP() {
   const me = privates.get(this);
   return me
  }
 } 
})()

let p = new Parent()
console.log(p)
console.log(p.getP())

总结

综上 weakmap 的方式来实现类似私有变量省内存,易回收,又能够被更多的浏览器兼容,也是最推荐的实现方法。

到此这篇关于详解ES6实现类的私有变量的几种写法的文章就介绍到这了,更多相关ES6 类的私有变量内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
Angular实现响应式表单
Aug 04 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
JS typeof fn === 'function' && fn()详解
Aug 22 Javascript
微信小程序实现点赞业务
Feb 10 #Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 #Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 #Javascript
javascript实现简单留言板案例
Feb 09 #Javascript
javascript实现下拉菜单效果
Feb 09 #Javascript
用javascript实现倒计时效果
Feb 09 #Javascript
javascript实现倒计时关闭广告
Feb 09 #Javascript
You might like
php后门URL的防范
2013/11/12 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
php+mysql实现无限级分类
2015/11/11 PHP
php处理带有中文URL的方法
2016/07/11 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
PHP写的简单数字验证码实例
2017/05/23 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
JS的数组迭代方法
2015/02/05 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
js学习之----深入理解闭包
2016/11/21 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python脚本监控docker容器
2016/04/27 Python
Python3控制路由器——使用requests重启极路由.py
2016/05/11 Python
基于Django contrib Comments 评论模块(详解)
2017/12/08 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
python中pip的安装与使用教程
2018/08/10 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python ubplot使用方法解析
2020/01/10 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
2019/10/08 HTML / CSS
材料采购员岗位职责
2013/12/17 职场文书
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
公司员工离职证明书
2014/10/04 职场文书