从Vue源码学习JavaScript之Object.defineproperty

摘要：可以是任何有效的值数值，对象，函数等。当且仅当该属性的为时，才能被赋值运算符改变。存取描述符其余属性一个给属性提供的方法，如果没有则为。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。

Vue里面有个耳熟能详的词是Object.defineproperty，这篇文章就介绍一下这个属性。

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

Object.defineProperty(obj, prop, descriptor)

obj：要在其上定义属性的对象

prop：要定义或者要修改的属性

descriptor：将被定义或修改的属性描述符

属性描述符又可分为数据描述符和存取描述符，可以用getOwnPropertyDescriptors或者getOwnPropertyDescriptor获取到属性描述

数据描述符和存取描述符共有的属性包括：

configurable

当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除，如果为false，则不能删除或修改writable, configurable, enumerable。默认为 true。

var animal = {
    name: "cat"
}
console.log(Object.getOwnPropertyDescriptors(animal)) 
//name: {value: "cat", writable: true, enumerable: true, configurable: true}
console.log(animal.name) //cat
delete animal.name
console.log(animal.name) //undefined

Object.defineProperty(animal, "name", {
    value: "dog",
    configurable: false
})
console.log(Object.getOwnPropertyDescriptors(animal))
//name: {value: "dog", writable: false, enumerable: false, configurable: false}
console.log(animal.name) //dog
delete animal.name
console.log(animal.name) //dog

可以看到，configurable默认属性是true，设置为false之后，delete对象的属性将失效

需要注意的是，如果不是通过defineproperty定义的属性，描述符默认值都是true；通过defineproperty定义的属性，描述符默认是false

enumerable

当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中(for...in, Object.keys())。默认为 true。

let animal = {
    name: "cat"
 }
for (let i in animal) {
    console.log(animal[i]) //cat
}
Object.defineProperty(animal, "name", {
    enumerable: false
})
for (let i in animal) {
    console.log(animal[i]) //无输出
}

数据描述符其余属性：

value

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

writable

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

存取描述符其余属性：

get

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

let animal = {}
let name = "cat"
Object.defineProperty(animal, "name", {
  value: "cat",
  get: function () {
    return name
  }
})
//报错：Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #