详解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 相关文章推荐
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
vue.js实现的绑定class操作示例
Jul 06 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php分页代码学习示例分享
2014/02/20 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
细说javascript函数从函数的构成开始
2013/08/29 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
jquery中EasyUI实现同步树
2015/03/01 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
2015/12/02 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
Python 爬虫图片简单实现
2017/06/01 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
普天C++笔试题
2016/03/20 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
往来会计岗位职责
2013/12/19 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
学校献爱心活动总结
2014/07/08 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
先进工作者推荐材料
2014/12/23 职场文书
先进党支部事迹材料
2014/12/24 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
新年晚会开场白
2015/05/29 职场文书
篮球赛新闻稿
2015/07/17 职场文书