Vue2中 MVVM 的核心方法:defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。Vue 2的mvvm核心就是此方法。

语法

/**
 * @params obj          要定义属性的对象
 * @params prop         要定义或修改的属性的名称或 Symbol
 * @params descriptor   要定义或修改的属性描述符
 */
Object.defineProperty(obj, prop, descriptor)

描述

该方法允许精确地添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，在枚举对象属性时会被枚举到（for…in 或 Object.keys 方法），可以改变这些属性的值，也可以删除这些属性。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改（immutable）的。
先来一个简单的例子：

var person = {}
Object.defineProperty(person, 'name',{
  value: '渣渣辉',
  configurable:true,
  enumerable:true,
  writable:true
})
console.log(person.name) // 渣渣辉
Object.keys(person) // ['name']

参数详解

obj

这个参数就是需要添加或者修改属性的对象(上面例子中的person)。

prop

要操作属性的名称，可以是字符串(上面例子中的name)或者是一个Symbol，例如: Symbol.for(‘name’)

descriptor

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

• 数据描述符 是一个具有值[value]的属性，该值可以是可写[writable]的，也可以是不可写的
• 存取描述符 是由getter[get]函数和setter[set]函数所描述的属性。

一个描述符只能是这两者其中之一；不能同时是两者。所以value、writable不能和get、set同时存在同一个描述符descriptor里面

这两种描述符都是对象。它们共享以下可选键值:

configurable

当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除，默认是false。

enumerable

当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性(for..in或者Object.keys())中，默认是false。

value [数据描述符可选]

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

writable [数据描述符可选]

当且仅当该属性的 writable 键值为 true 时，属性的值(也就是上面的 value)才能被赋值运算符改变，默认是false。

get [存取描述符可选]

属性的 getter 函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值，默认为undefined。

get [存取描述符可选]

属性的 setter 函数，当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象，默认为undefined。

如果一个描述符不具有 value、writable、get 和 set 中的任意一个键，那么它将被认为是一个数据描述符。如果一个描述符同时拥有 value 或 writable 和 get 或 set 键，则会产生一个异常。

示例

// 极简版mvvm双向绑定
const obj = {};
Object.defineProperty(obj, 'value', {
  get: function() {
    console.log('get value');
  },
  set: function(val) {
    console.log('set value:' + val);
    document.getElementById('input').value = val;
    document.getElementById('span').innerHTML = val;
  }
});

const input = document.getElementById('input');
input.addEventListener('keyup', function(e){
  obj.value = e.target.value;
})

// 如何实现一个自存档对象。当设置temperature 属性时，archive 数组会收到日志条目。
function Archiver() {
  var temperature = null;
  var archive = [];

  Object.defineProperty(this, 'temperature', {
    get: function() {
      console.log('get!');
      return temperature;
    },
    set: function(value) {
      temperature = value;
      archive.push({ val: temperature });
    }
  });

  this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

// getter 总是会返回一个相同的值。
var pattern = {
    get: function () {
        return 'I alway return this string,whatever you have assigned';
    },
    set: function () {
        this.myname = 'this is my name string';
    }
};

function TestDefineSetAndGet() {
    Object.defineProperty(this, 'myproperty', pattern);
}

var instance = new TestDefineSetAndGet();
instance.myproperty = 'test';

// 'I alway return this string,whatever you have assigned'
console.log(instance.myproperty);
// 'this is my name string'
console.log(instance.myname);

本文链接：https://xxcc.fun/javascript/javascript-object-defineProperty/