详解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 相关文章推荐
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 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
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
js确定对象类型方法
2012/03/30 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
详解Python如何获取列表(List)的中位数
2016/08/12 Python
简单实现python画圆功能
2018/01/25 Python
python 文件转成16进制数组的实例
2018/07/09 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
Python super()函数使用及多重继承
2020/05/06 Python
使用python实现学生信息管理系统
2021/02/25 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
北承题目(C++)
2012/05/16 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
经典广告词大全
2014/03/14 职场文书
学习雷锋做美德少年寄语大全
2014/04/09 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python