原来js对象属性有两种类型

这段时间再看js高级程序设计这本书，从中学到了很多东西，看了虽然不会提高编写能力啥的，但其中一些概念对我们理解js很有用。正好轮到我分享，跟大家分享一下，可能比较基础啊，知道的可以当巩固一下基础。

原来，js中的对象的属性有两种类型：数据属性、访问器属性。这两个属性有不同的内部特征。

数据属性

我们常用的是数据属性：
数据属性包含一个数据值的位置，他有4个描述其行为的特性：

• [[Configurable]]表示能否通过delete删除属性；默认为true
• [[Enumerable]]表示能否通过for-in循环；默认为true
• [[Writable]]表示能否修改属性的值；默认为true
• [[Value]]包含这个属性的数据值，当对这个属性进行读取/写入的时候，从这个位置读/写，默认为undefined。

我们平时定义对象是这样定义的：

const obj = {name: 'xiaoming'};
obj这个对象创建了一个名为name的属性，值为‘xiaoming’，也就是说，[[Value]]特性将被设置为‘xiaoming’，之后对这个属性值的任何修改都将反映在这个位置上。
可以使用Object.getOwnPropertyDescriptor来查看属性的特性。
Object.getOwnPropertyDescriptor（obj, 'name'） 
// { 
// configurable: true 
// enumerable: true 
// value: "xiaoming" 
// writable: true 
// }

ECMAScript提供了Object.defineProperty()方法可以让我们修改属性的特性。

/**
 * 修改属性默认的特性
 * @param objName 属性所在的对象名称；
 * @param attrName 需要修改的属性名称；
 * @param descriptor 描述符对象 {configurable?: boolean,enumerable?: boolean, writable?: boolean,value: any}；
 */
 
例如：
const obj = {};
Object.defineProperty('obj', 'name', {
    configurable: false,
    value: 'xiaoming'
});

console.log(obj.name); // 'xiaoming'
delete obj.name;
console.log(obj.name); // 'xiaoming'

把configurable设置为false，表示不能出对象中删除该属性，而对应的，把enumerable设置为false，则表示对该对象进行for-in循环时会忽略该属性。把writable设置为false则表示该属性不可修改。
当然，一般情况下我们可能都没有必要利用Object.defineProperty（）这个方法提供的这些高级功能，但理解这些概念对我们理解js对象会有帮助。

访问器属性

访问器属性不包含数据值，他有一对儿getter()和setter()函数，在读取访问器属性的时候会调用getter函数，在写入属性的时候会调用setter函数。

访问器属性也有四个特性：

• [[Configurable]]表示能否通过delete删除属性；默认为true
• [[Enumerable]]表示能否通过for-in循环；默认为true
• [[Get]]读取属性是调用的函数，默认为undefined；
• [[Set]]写入属性是调用的函数，默认为undefined；

访问器属性没有数据属性的[[value]]特性，所以不能直接通过 . 或 [] 进行定义，只能使用之前提到的Object.defineProperty（）进行定义。

const person = {
    _age： 17,
    isAdult: false，
};
Object.defineProperty('obj', 'age', {
    get: () => {
        return this._age;
    },
    set: (newValue) => {
        this._age = newValue;
        if (newValue >= 18) {
            this.isAdult = true
        }
    }
});

console.log(person.age) // 17;
person.age = 18;
console.log(person.age) // 18;
console.log(person.isAdult) // true;

上述代码创建了一个person对象，并设置了两个默认属性：_age,isAdult
当访问age属性的时候会通过_getter函数拿到_age的值，
设置age属性的时候，isAdult变为true，这是使用访问器属性的常见方式，即设置一个属性的值会导致其他属性发生变化。

访问器属性的使用场景有个耳熟能详的就是vue2的双向数据绑定的数据劫持，vue2通过Observer函数遍历传入对象的所有属性，并使用Object.defineProperty将这些属性转化为访问器属性。然后。。。以达到数据变化的时候重新渲染页面的目的。

Object.defineProperty(obj, 'value', {
    get() {
        return value;
    },
    set(newValue) {
        this.value = newValue
        // 更新视图。。
    }
})

还能通过Object.defineProperties(）定义多个属性

const obj = {};
Object.defineProperties('obj',{
    name:{
        value: 'xiaoming',
    },
    age: {
        value: 18,
    },
    isAdult: {
        get: () => {
            return this.age >= 18;
        }
    }
})

通过Object.getOwnPropertyDescriptor（）读取属性的特性

Object.getOwnPropertyDescriptor（obj, 'name'）
// {
//   configurable: false
//   enumerable: false
//   value: "xiaoming"
//   writable: false
// }