神奇的 defineProperty

前戏

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的应用