详解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 相关文章推荐
纯js实现背景图片切换效果代码
Nov 14 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
利用ECharts.js画K线图的方法示例
Jan 10 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 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
PHP7标量类型declare用法实例分析
2016/09/26 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
js 学习笔记(三)
2009/12/29 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
2015/11/17 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
python定时器使用示例分享
2014/02/16 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
python遍历小写英文字母的方法
2019/01/02 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
八年级生物教学反思
2014/01/22 职场文书
岗位说明书标准范本
2014/07/30 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014年妇联工作总结
2014/11/21 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
《司马光》教学反思
2016/02/22 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
mysql sql常用语句大全
2022/06/21 MySQL