前戏

JavaScript 的核心是支持面向对象的，同时它也提供了强大灵活的 OOP 语言能力。

例子1:如何申明一个对象及其属性

const person = new Object()person.name = 'Zhang Min' // 名字person.age = 18 // 年龄person.introduce = 'I am a boy, and remains single' // 个人简介// 虚报年龄，这里纠正一下person.age = 27复制代码

为什么这里的年龄【属性】可以随便修改呢

主角登场

Object.defineProperty()

/**** obj 要在其上定义属性的对象** prop 要定义或修改的属性的名称** descriptor 将被定义或修改的属性描述符**/Object.defineProperty(obj, prop, descriptor)复制代码

例子2:

const person = new Object()Object.defineProperty(person, 'age', {  writable: false,  value: 18})person.age = 27 // 严格模式下，报错复制代码

为什么这里修改年龄会报错呢

正式介绍

descriptor：属性描述符，定义或修改属性的描述信息。对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符

数据描述符：

• configurable 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除，默认为 false
• enumerable 当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中，默认为 false
• value 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等，默认为 undefined
• writable 当且仅当该属性的writable为true时，value才能被赋值运算符改变，默认为 false

存取描述符：

• configurable 当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除，默认为 false
• enumerable 当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中，默认为 false
• get 一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）
• set 一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值

回到例子1

我们获取一下age的属性描述符

const descriptor = Object.getOwnPropertyDescriptor(window.person, 'age')console.table(descriptor)// {//   value: 18,//   writable: true, // 可更改//   enumerable: true, // 可枚举//   configurable: true, // 可修改描述符// }复制代码

这也解释了为什么例子2的age不可被修改了

实现一个数据双向绑定的mini框架

class Index {  constructor(obj) {    this.state = new Object()    for (const key in obj) {      console.log(key)      Object.defineProperty(this.state, key, {        configurable: true,        enumerable: true,        set: (value) => {          obj[key] = value          this.update()        },        get: () => {          return obj[key]        }      })    }    this.update()  }  update() {    document.getElementById('input1').value = this.state.random    document.getElementById('input2').value = this.state.age  }}const index = new Index({  age: 18,  name: 'zhang min'})// 改变数据，自动更新视图index.state.age = 27复制代码

一些思考

Object.defineProperty()方法被许多现代前端框架（如Vue.js，React.js）用于数据双向绑定的实现，当我们在框架Model层设置data时，框架将会通过Object.defineProperty()方法来绑定所有数据，并在数据变化的同时修改虚拟节点，最终修改页面的Dom结构

• 如何降低频繁操作dom产生巨大的性能开销（延迟发生变化，如setTimeout）
• 如何监听数组的变化（重新赋值/修改数组的push等方法）

下一篇文章：decorator修饰器及mobx的应用