详解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 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
关于js二维数组和多维数组的定义声明(详解)
Oct 02 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
Vue filter 过滤当前时间 实现实时更新效果
2019/12/20 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
农村结婚典礼司仪主持词
2014/03/14 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis