详解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 Tools Dateinput使用介绍
Jul 14 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
elementui实现预览图片组件二次封装
Dec 29 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字符串截取问题
2006/11/28 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
php防止用户重复提交表单
2015/11/02 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
2011/02/23 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
原生js实现验证码功能
2017/03/16 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
Python类的继承和多态代码详解
2017/12/27 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
Solaris操作系统的线程机制
2015/07/28 面试题
营业员个人总结的自我评价
2013/10/25 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
工程部经理岗位职责
2015/02/02 职场文书
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript