JavaScript类：（二）属性

在上文中，介绍了类的定义，同时举例，在构造函数(constructor)中声明了两个实例属性；
但是构造函数中声明属性，代码不够清晰；

一、声明属性（新写法）

ES2022为类的实例属性，又规定了一种新写法。实例属性现在除了可以定义在constructor()方法里，也可以定义在类内部的最顶层；

class Person {
    name = ''
    age = ''
    getUserName() {
        return this.name;
    }
}

把实例属性定义在类的头部，代码更整齐，可以很清晰的看到所有属性，方便代码的阅读；

二、静态属性

静态属性，是类本身的属性，而不是对象的实例属性；
静态属性通过static关键字声明；

class Person {
    // 静态属性
    static version = 5
}
console.log(Person.version);
let person1 = new Person()
console.log(person1.version);

结果

静态属性只能通过Class.propName来调用；

三、私有属性

私有属性，是指只能在类内部访问的属性，不能再类的外部调用；
私有属性，需要在属性名之前加#来表示；

class Person {
    #id = '123456'
    getId() {
        return this.#id;
    }
}
let person1 = new Person()
console.log(person1.getId()); // 输出123456
console.log(person1.#id);  //报错

结果

私有属性，只能在类内部调用，外部调用会报错；

四、setter与getter函数

在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为

class Person {    
    #name = ''
    set name(value) {
        console.log('setter')
        this.#name = value
    }
    get name() {
        console.log('getter');
        return this.#name;
    }
}
let person1 = new Person()
person1.name = "zhangsan";
console.log('---------')
let name = person1.name;
console.log(name);

结果

五、属性表达式

类的属性名，可以采用表达式。

let propName = "name"
class Person {    
    [propName] = ""
}
let person1 = new Person()
person1.name = "zhangsan";
let name = person1.name;
console.log(name);

结果