三分钟搞懂js属性描述符之基础知识

前言：这年头全部用过vue的人都知道get，set，Object.defineProperty，可听到属性描述符却有点懵。另外实际使用的场景有哪些，又有哪些坑可能不少人并不清楚，所以打算分两篇文章，一篇讲基础知识，另外一篇讲实际应用中的坑。

什么是属性描述符对象

下面这么个对象就是完整的属性描述符。

{
    configurable: false,
    enumberable: false,
    value: 'value',
    writable: false,
    get: function() {
        console.log('get')
    },
    set: function(val) {
        console.log('set')
    }
}

固然正常状况下你不会看到完整的属性描述符。它的每一个属性都是可选的。当一个属性描述符没有没有get和set时，它是个数据描述符。当它没有value和writable时，它是个存取描述符。若是一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。

描述符可同时具备的键值

PropertyDescriptor	configurable	enumerable	value	writable	get	set
数据描述符	Yes	Yes	Yes	Yes	No	No
存取描述符	Yes	Yes	No	No	Yes	Yes

每种属性的含义

configurable
当且仅当该属性的 configurable 为 true 时，该属性描述符才可以被改变，同时该属性也能从对应的对象上被删除。

enumerable
当且仅当该属性的enumerable为true时，该属性才可以出如今对象的枚举属性中。

value
该属性对应的值。能够是任何有效的 JavaScript 值（数值，对象，函数等）。

writable
当且仅当该属性的writable为true时，value才能被赋值运算符改变。

get
一个给属性提供 getter 的方法，若是没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，可是会传入this对象（因为继承关系，这里的this并不必定是定义该属性的对象）。

set
一个给属性提供 setter 的方法，若是没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受惟一参数，即该属性新的参数值。

关于默认值

以上的定义和解释来自于mdn，可是删除了默认值的说明。默认值分两种语境，一个是我没有设置属性描述符时，就去取它；另外一种是我设置属性描述符，可是我省略了部分属性。mdn上的默认值是后者。

获取属性描述符

Object.getOwnPropertyDescriptor和Object.getOwnPropertyDescriptors,二者模式差很少，懂一个就懂另外一个了。

可见其中writable、enumerable、configurable默认是true

设置属性描述符

Object.defineProperty和Object.defineProperties，一样一个就懂另外一个了。
咱们分别设置get和value，而后再获取属性描述符看看区别
get:

value:

能够看到，当我设置了属性描述符后writable、enumerable、configurable默认是false。
enumerable为false时
而且细心的同窗发现了，对象的这个属性名的颜色有点不同。不过此时咱们先忽略这个颜色的区别。

咱们将它转为json字符串，发现没有age和address。嗯，这就是由于enumerable设置成了false，使得它被转为字符串的过程当中没法遍历到这两个属性。咱们能够将enumerable设置成true再试一下。

configurable为false时

由于缺省的configurable默认为false，当咱们再次设置时就报错了。此时就陷入了无解的状态，所以咱们平时开发中须要设置属性描述符时，最好不要缺省enumerable和configurable。
咱们从头来一次：

关于属性描述符，我想你们应该都有一个大体的印象了，对于get和set我在后面实际应用中再解释吧~