【Javascript高级知识】使用ES6实现私有变量的四种实现方式总结

最新推荐文章于 2025-03-01 09:45:00 发布

原创最新推荐文章于 2025-03-01 09:45:00 发布 · 558 阅读

2 ·

CC 4.0 BY-SA版权

本文为高热度网（http://blog.gaoredu.com/）原创文章，未经博主允许不得转载。更多原创内容请访问http://blog.gaoredu.com/

JavaScript学习同时被 3 个专栏收录

54 篇文章

订阅专栏

Javascript高级

41 篇文章

订阅专栏

javascript

32 篇文章

订阅专栏

本文总结了使用ES6实现私有变量的四种方法：通过闭包、Symbol、WeakMap以及最新的提案。详细介绍了如何在Person类中创建公共的name属性和私有的age及sex属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6 实现私有变量方式总结

需求如下

实现一个Person类，设计下面的类
name : public
age : private
sex : private

1. 使用闭包的方式来实现

const Person = (function() {
  let _sex = '';
  let _age = 0;
  class Person {
      constructor(name, age, sex){
          this.name = name;
          _age = age;
          _sex = sex;
      }
      
      getName(){
          return this.name;
      }
      
      getAge(){
          return _age;
      }
      
      getSex(){
          return _sex;
      }
  }
  return Person;
})();

let p1 = new Person('zhangsan', 16, 'MALE');
let p2 = new Person('lisi', 43, 'FEMALE');
console.log(p1.getName(), p1.getAge(), p1.getSex(), p1.name, p1._age, p1._sex); // zhangsan 16 MALE zhangsan undefined undefined
console.log(p2.getName(), p2.getAge(), p2.getSex(), p2.name, p2._age, p2._sex); // lisi 43 FEMALE lisi undefined undefined

2. 使用Symbol来实现

const Person = (function() {
  const _age = Symbol('_age');
  const _sex = Symbol('_sex');
  class Person {
      constructor(name, age, sex){
          this.name = name;
          this[_age] = age;
          this[_sex] = sex;
      }
      
      getName(){
          return this.name;
      }
      
      getAge(){
          return this[_age];
      }
      
      getSex(){
          return this[_sex];
      }
  }
  
  return Person;
})();

let p1 = new Person('zhangsan', 16, 'MALE');
let p2 = new Person('lisi', 43, 'FEMALE');
console.log(p1.getName(), p1.getAge(), p1.getSex(), p1.name, p1._age, p1._sex); // zhangsan 16 MALE zhangsan undefined undefined
console.log(p2.getName(), p2.getAge(), p2.getSex(), p2.name, p2._age, p2._sex); // lisi 43 FEMALE lisi undefined undefined

3.使用WeakMap来实现

const Person = (function() {
  const _age = new WeakMap();
  const _sex = new WeakMap();
  class Person {
      constructor(name, age, sex){
          this.name = name;
          _age.set(this, age);
          _sex.set(this, sex);
      }
      
      getName(){
          return this.name;
      }
      
      getAge(){
          return _age.get(this);
      }
      
      getSex(){
          return _sex.get(this);
      }
  }
  
  return Person;
})();

let p1 = new Person('zhangsan', 16, 'MALE');
let p2 = new Person('lisi', 43, 'FEMALE');

console.log(p1.getName(), p1.getAge(), p1.getSex(), p1.name, p1._age, p1._sex); // zhangsan 16 MALE zhangsan undefined undefined
console.log(p2.getName(), p2.getAge(), p2.getSex(), p2.name, p2._age, p2._sex); // lisi 43 FEMALE lisi undefined undefined

4. 使用最新的提案来实现

const Person = (function() {
  #age;
  #sex;
  class Person {
      constructor(name, age, sex){
          this.name = name;
          this.#age = age;
          this.#sex = sex;
      }
      
      getName(){
          return this.name;
      }
      
      getAge(){
          return this.#age;
      }
      
      getSex(){
          return this.#sex;
      }
  }
  
  return Person;
})();

let p1 = new Person('zhangsan', 16, 'MALE');
let p2 = new Person('lisi', 43, 'FEMALE');

console.log(p1.getName(), p1.getAge(), p1.getSex(), p1.name, p1._age, p1._sex); // zhangsan 16 MALE zhangsan undefined undefined
console.log(p2.getName(), p2.getAge(), p2.getSex(), p2.name, p2._age, p2._sex); // lisi 43 FEMALE lisi undefined undefined