Object.defineProperty实现数据双向绑定

1 前言

作为一名前端开发人员，我们或许都听说过Vue 2.0中实现双向数据绑定采用了Object.defineProperty，我相信有很多小伙伴们和我一样有疑问，这个神奇的东西是怎么做到的呢？在介绍Object.defineProperty之前，我们先来认识一下什么是属性类型。

2 属性类型

ECMA-262描述道：

ECMA-262 第5 版在定义只有内部才用的特性（attribute）时，描述了属性（property）的各种特征。
ECMA-262 定义这些特性是为了实现JavaScript 引擎用的，因此在JavaScript 中不能直接访问它们。

也就是说，属性类型是属性内部的特性，不能直接访问，但是我们可以一些手段操作属性类型来改变他们的属性特征，呈现出一个定制化的对象。属性类型只有两种：数据属性和访问器属性，下面我们来具体看看它们的用法和区别吧。

2.1 数据属性

数据属性包含一个数据值的位置。在这个位置可以读取和写入值

数据属性有四个描述其行为的特性，放在了两对方括号中，表示是不可直接访问的。

• [[Configurable]]：可以通过delete删除的属性，默认为true
• [[Enumerable]]：可枚举的属性，也就是可以通过for-in循环遍历出来的属性，默认true
• [[Writable]]：可写的属性，也就是可以修改属性，默认true
• [[Value]]：属性的值。默认为undefined

那怎么来验证呢，一般来说我们创建对象是没法看到这些属性的，这个时候我们的主角Object.defineProperty就可以上场了，它是ES5中提供的一个很强大的方法，下面是MDN的描述：

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

方法接受三个参数：属性所在的对象、属性名和一个描述符对象（descriptor）。

下面是一个简单的例子：

var obj = {
   }

Object.defineProperty(obj, 'name', {
   
  configurable: false,
  writable: true,
  enumerable: true,
  value: 'Tom'
})

delete obj.name // false, 查找 configurable
console.log(obj.name) // Tome, 查找 value

obj.name = 'Amy' // 查找 writable
console.log(obj.name) // Amy

for (var key in obj) {
   
  console.log(key + '================' + obj[key]) // name================Amy, 查找enumerable