随笔-ES6 class 封装性实现（私有属性）

素颜马尾好姑娘i 2023-10-01 09:11 9阅读 0赞

面向对象三大特征：封装，继承，多态

上一章，我们介绍了使用class extends实现JS类的继承，但是其本质上还是ES5构造函数的寄生组合式继承。

面向对象另一大特征就是封装，即类的属性不对外直接暴露，外部也无法直接操作类的属性，外部只能通过类对外提供getter和setter方法来操作类的属性。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_15_color_FFFFFF_t_70_g_se_x_16][]

可以发现，上面的类定义不符合封装性要求，age已经被设置为100000了。

### 闭包+Symbol+getter setter实现私有属性 ###

封装性实现：对象属性不能被外部直接访问，即不能对象.属性访问

可以通过对象的setter、getter方法对属性进行访问修改

要想实现 对象.属性 不能访问，需要借助闭包和Symbol

const Person = (function(){
        const _name = Symbol('name')
        const _age = Symbol('age')
    
        return class {
            constructor(name,age) {
                this.name = name
                this.age = age
            }
    
            set name(name){
                if(name.length > 10 || name.length < 1) {
                    throw new Error('name不正确')
                }
                this[_name] = name
            }
    
            get name(){
                return this[_name]
            }
    
            set age(age){
                if(age < 0 || age > 300) {
                    throw new Error('age不正确')
                }
                this[_age] = age
            }
    
            get age(){
                return this[_age]
            }
        }
    })()

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

### 闭包+WeakMap+setter getter ###

const Person = (function(){
        const wm = new WeakMap()
        
        return class {
            constructor(name,age){
                this.name = name
                this.age = age
            }
    
            get age() {
               return vm.get(this)
            }
    
            set age(age) {
                if(age < 0 || a > 300) {
                    throw new Error('age 不正确')
                }
                wm.set(this, age)
            }
        }
    })()

我看网上很多人说WeakMap可以实现class私有属性，但是WeakMap这里只能保证一个私有属性，如果有多个就罩不住了。

无论是WeakMap还是Symbol，目的都是为了让外界无法 对象.属性 访问

可以发现改造的私有属性，多多少少优点缺陷，比如闭包+Symbol实现的私有属性

为了兼顾 constructor 和 setter getter的入参检查，不得不创建了两个附带属性

this.name

this.age

来保证constructor初始化时的入参检查，而最终数据都是存储在

this\[Symbol('name')\]

this\[Symbol('age')\]

### 原生JS类私有属性写法 ###

class Person {
        #name
        #age
    
        constructor(name, age) {
            this.name = name
            this.age = age
        }
    
        set name(name) {
            if (name.length > 10) { throw new Error('name不正确') }
            this.#name = name
        }
    
        get name() {
            return this.#name
        }
    
        set age(age) {
            if (age > 300 || age < 0) { throw new Error('age不正确') }
            this.#age = age
        }
    
        get age() {
            return this.#age
        }
    }

在ES2019中已经增加了对 class 私有属性的原生支持，只需要在属性/方法名前面加上 `'#'` 就可以将其定义为私有

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7edffaf2918f434fa14503e4c17b9135.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_15,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c77e6a47d8d248739f2cb7f435e6c8e3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LyP5Z-O5LmL5aSW_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/70cc30ef4a62402495e18a48adfb9e21.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LyP5Z-O5LmL5aSW,size_20,color_FFFFFF,t_70,g_se,x_16