JavaScript基础系列：JavaScript属性描述符

属性描述符

1. 从ES5开始，所有的属性都具备属性描述符，目前对象中属性的属性描述符主要有两种形式：数据描述符和存取描述符（访问描述符）。
   数据描述符 ：是一个具有值的属性，该值可以是可写的，也可以是不可写的。
   存取描述符 ：也被称作访问描述符，是由 getter 函数和 setter 函数所描述的属性。
2. 属性描述符是一个对象。
3. 属性描述符只能是其中一种形式，不能同时为两种形式，否则将会产生一个异常，通常为：TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute.

1 描述符可拥有的键值

	configurable	enumerable	value	writable	get	set
数据描述符	可以	可以	可以	可以	不可以	不可以
存取描述符	可以	可以	不可以	不可以	可以	可以

2 描述符键值介绍

2.1 configurable

当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。
默认为 false。

2.2 enumerable

当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。
默认为 false。

2.3 value

该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。
默认为 undefined。

2.4 writable

当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被赋值运算符改变。
默认为 false。

2.5 get

属性的 getter 函数，如果没有 getter，则为 undefined。当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。
默认为 undefined。

2.6 set

属性的 setter 函数，如果没有 setter，则为 undefined。当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。
默认为 undefined。

3 描述符的判定

1. 如果一个描述符不具有 value、writable、get 和 set 中的任意一个键，那么它将被认为是一个数据描述符。
2. 如果一个描述符具有键 value或者writable，但不具备键get 和 set， 那么它将被认为是一个数据描述符。
3. 如果一个描述符具有键 get或者set，但不具备键value和 writable，那么它将被认为是一个存取描述符。

4 描述符的应用

我们可通过Object.defineProperty()或者Object.defineProperties()在给对象添加属性时，同时设置描述符的键值。

注意：通过字面形式定义对象时指定的属性或者使用属性访问器添加的属性，其描述符的布尔键值默认都为true

// 字面量形式
let obj = {
    get name() {
        return this._name_
    },
    set name(val) {
        this._name_ = val
    },
    age: 18

}

// 属性访问器
obj.sex = '男'

console.log(Object.getOwnPropertyDescriptor(obj, 'name'))
// {
//     get: [Function: get name],
//     set: [Function: set name],
//     enumerable: true,
//     configurable: true
// }
console.log(Object.getOwnPropertyDescriptor(obj, 'age'))
// { value: 18, writable: true, enumerable: true, configurable: true }
console.log(Object.getOwnPropertyDescriptor(obj, 'sex'))
// { value: '男', writable: true, enumerable: true, configurable: true }

4.1 Object.defineProperty()

Object.defineProperty() 介绍 链接至MDN

let obj2 = {}
// 不可配置，不可删除，不可枚举
Object.defineProperty(obj2, 'name', {
    get() {
        return this._name_
    },
    set(val) {
        this._name_ = val
    }
})
// 可配置，可删除，可枚举，不可赋值
Object.defineProperty(obj2, 'age', {
    value: 18,
    enumerable: true,
    configurable: true
})
// 可配置，可删除，可枚举，可赋值
Object.defineProperty(obj2, 'sex', {
    value: '男',
    writable: true,
    enumerable: true,
    configurable: true
})
console.log(Object.getOwnPropertyDescriptor(obj2, 'name'))
// {
//     get: [Function: get],
//     set: [Function: set],
//     enumerable: false,
//     configurable: false
// }
console.log(Object.getOwnPropertyDescriptor(obj2, 'age'))
// { value: 18, writable: false, enumerable: true, configurable: true }
console.log(Object.getOwnPropertyDescriptor(obj2, 'sex'))
// { value: '男', writable: true, enumerable: true, configurable: true }

4.2 Object.defineProperties()

Object.defineProperties() 介绍 链接至MDN

let obj3 = {}

Object.defineProperties(obj3, {
    // 不可配置，不可删除，不可枚举
    'name': {
        get() {
            return this._name_
        },
        set(val) {
            this._name_ = val
        }
    },
    // 可配置，可删除，可枚举，不可赋值
    'age': {
        value: 18,
        enumerable: true,
        configurable: true
    },
    // 可配置，可删除，可枚举，可赋值
    'sex': {
        value: '男',
        writable: true,
        enumerable: true,
        configurable: true
    }
})

console.log(Object.getOwnPropertyDescriptor(obj3, 'name'))
// {
//     get: [Function: get],
//     set: [Function: set],
//     enumerable: false,
//     configurable: false
// }
console.log(Object.getOwnPropertyDescriptor(obj3, 'age'))
// { value: 18, writable: false, enumerable: true, configurable: true }
console.log(Object.getOwnPropertyDescriptor(obj3, 'sex'))
// { value: '男', writable: true, enumerable: true, configurable: true }