服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 详解ES6实现类的私有变量的几种写法

详解ES6实现类的私有变量的几种写法

2022-01-20 16:46Do_Better js教程

这篇文章主要介绍了详解ES6实现类的私有变量的几种写法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

闭包实现类的私有变量方式

私有变量不共享

通过 new 关键字 person 的构造函数内部的 this 将会指向 Tom,开辟新空间,再次全部执行一遍,

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

私有变量可共享

为避免每个实力都生成了一个新的私有变量,造成是有变量不可共享的问题,我们可以将这个私有变量放在类的构造函数到外面,继续通过闭包来返回这个变量。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 了。

?
1
2
3
4
5
6
7
8
9
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 的的引用,这样就可以在类的方法区获得此引用,避免方法都写在构造函数,每次创建新实例都要重新开辟空间赋值方法,造成内存浪费。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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实现类的私有变量的几种写法

实现:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 类的私有变量内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://juejin.cn/post/6926866949162926094

延伸 · 阅读

精彩推荐
  • js教程javascript实现下拉菜单效果

    javascript实现下拉菜单效果

    这篇文章主要为大家详细介绍了javascript实现下拉菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    爱前端的茂茂7212022-01-20
  • js教程原生js实现滑块区间组件

    原生js实现滑块区间组件

    这篇文章主要为大家详细介绍了js实现滑块区间组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    蒲公英芽11902022-01-05
  • js教程详解 TypeScript 函数声明和重载

    详解 TypeScript 函数声明和重载

    在 JavaScript 中,函数是构建应用的一块基石,我们可以使用函数抽离可复用的逻辑、抽象模型、封装过程。在TypeScript中,函数仍然是最基本、最重要的概念...

    前端充电宝7112022-01-05
  • js教程微信小程序自定义modal弹窗组件的方法详解

    微信小程序自定义modal弹窗组件的方法详解

    这篇文章主要给大家介绍了关于微信小程序自定义modal弹窗组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学...

    遇见小美好12212021-12-15
  • js教程JS removeAttribute()方法实现删除元素的某个属性

    JS removeAttribute()方法实现删除元素的某个属性

    这篇文章主要介绍了JS removeAttribute()方法实现删除元素的某个属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    C语言中文网7762021-12-30
  • js教程原生JavaScript实现购物车

    原生JavaScript实现购物车

    这篇文章主要为大家详细介绍了原生JavaScript实现购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    栋栋很优秀啊4312021-12-29
  • js教程Javascript的15种数组去重方法,总有一种适合你

    Javascript的15种数组去重方法,总有一种适合你

    数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试...

    前端微视界9012021-12-31
  • js教程微信小程序 接入腾讯地图的两种写法

    微信小程序 接入腾讯地图的两种写法

    这篇文章主要介绍了微信小程序 接入腾讯地图的两种写法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参...

    木早长泉8812021-12-30