详解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实现checkbox全选全不选的简单实例
Dec 31 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
js判断是否是手机页面
Mar 17 Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
微信小程序排坑指南详解
May 23 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 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
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
Java  Spring 事务回滚详解
2016/10/17 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
德购商城:德国进口直邮商城
2017/06/13 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
财务经理的岗位职责
2013/12/17 职场文书
品质主管岗位职责
2014/03/16 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
安全生产月宣传标语
2014/10/06 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
初级职称评定工作总结
2015/08/13 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript