详解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 相关文章推荐
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
vue 实现上传组件
May 31 Vue.js
微信小程序实现点赞业务
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中str_replace函数使用小结
2008/10/11 PHP
php生成xml简单实例代码
2009/12/16 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
浅谈javascript的原型继承
2012/07/25 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python正则表达式re之compile函数解析
2017/10/25 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
一份Java笔试题
2012/02/21 面试题
建筑项目策划书
2014/01/13 职场文书
大学军训通讯稿
2014/01/13 职场文书
高三生物教学反思
2014/01/25 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
《落花生》教学反思
2016/02/16 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
Python中npy和mat文件的保存与读取
2022/04/24 Python
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers