Object.defineProperty及vue中的双向数据绑定

Object.defineProperty功能、vue的双向绑定实现的原理

Object.defineProperty(obj, prop, descriptor)

• 定义：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
• obj表示要在其上定义属性的对象。
• prop要定义或修改的属性的名称。
• descriptor将被定义或修改的属性描述符。
• 返回值：被传递给函数的对象。
• 在ES6中，由于 Symbol类型的特殊性，用Symbol类型的值来做对象的key与常规的定义或修改不同，而Object.defineProperty 是定义key为Symbol的属性的方法之一。
• 该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for…in 或 Object.keys 方法）， 这些属性的值可以被改变，也可以被删除。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。
• 属性描述符

  • 对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。

  • 数据描述符和存取描述符均具有以下可选键值：
    configurable
    当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
    enumerable
    当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。

  • 数据描述符同时具有以下可选键值：

    value
    该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
    writable
    当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。

  • 存取描述符同时具有以下可选键值：
    get
    一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。
    默认为 undefined。
    set
    一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。
    默认为 undefined。

  • 描述符可同时具有的键值
    configurable enumerable value writable get set
    数据描述符 Yes Yes Yes Yes No No
    存取描述符 Yes Yes No No Yes Yes

  • 如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。

    • 记住，这些选项不一定是自身属性，如果是继承来的也要考虑。为了确认保留这些默认值，你可能要在这之前冻结 Object.prototype，明确指定所有的选项，或者通过 Object.create(null)将__proto__属性指向null。
• 创建属性节
  如果对象中不存在指定的属性，Object.defineProperty()就创建这个属性。当描述符中省略某些字段时，这些字段将使用它们的默认值。拥有布尔值的字段的默认值都是false。value，get和set字段的默认值为undefined。一个没有get/set/value/writable定义的属性被称为“通用的”，并被“键入”为一个数据描述符。
• 修改属性
  • 如果属性已经存在，Object.defineProperty()将尝试根据描述符中的值以及对象当前的配置来修改这个属性。如果旧描述符将其configurable 属性设置为false，则该属性被认为是“不可配置的”，并且没有属性可以被改变（除了单向改变 writable 为 false）。当属性不可配置时，不能在数据和访问器属性类型之间切换。
    当试图改变不可配置属性（除了value和writable 属性之外）的值时会抛出TypeError，除非当前值和新值相同。
    • Writable 属性
      当writable属性设置为false时，该属性被称为“不可写”。它不能被重新分配。
    • Enumerable 特性
      enumerable定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。o.d = 4; // 如果使用直接赋值的方式创建对象的属性，则这个属性的enumerable为true
    • Configurable 特性
      configurable特性表示对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改。
    • 添加多个属性和默认值节
      考虑特性被赋予的默认特性值非常重要，通常，使用点运算符和Object.defineProperty()为对象的属性赋值时，数据描述符中的属性默认值是不同的

var o = {};

o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : true,
  configurable : true,
  enumerable : true
});


// 另一方面，
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : false,
  configurable : false,
  enumerable : false
});

• 一般的 Setters 和 Getters节
  下面的例子展示了如何实现一个自存档对象。 当设置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 }]

• 继承属性节
  如果访问者的属性是被继承的，它的 get 和set 方法会在子对象的属性被访问或者修改时被调用。如果这些方法用一个变量存值，该值会被所有对象共享。
  在 get 和 set 方法中，this 指向某个被访问和修改属性的对象。
  不像访问者属性，值属性始终在对象自身上设置，而不是一个原型。然而，如果一个不可写的属性被继承，它仍然可以防止修改对象的属性。

vue实现双向绑定的原理

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。
VUE双向绑定的原理？
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。代码演示：defineProperty的用法var obj = { };var name;//第一个参数：定义属性的对象。//第二个参数：要定义或修改的属性的名称。//第三个参数：将被定义或修改的属性描述符。Object.defineProperty(obj, “data”, {//获取值get: function () {return name;},//设置值set: function (val) {name = val;console.log(val)}})//赋值调用setobj.data = ‘aaa’;//取值调用getconsole.log(obj.data);
defineProperty的双向绑定
var obj={};
Object.defineProperty(obj, ‘val’,{set:function (newVal) {document.getElementById(“a”).value=newValundefined?’’:newVal;
document.getElementById(“b”).innerHTML=newValundefined?’’:newVal;}});
document.getElementById(“a”).addEventListener(“keyup”,function (e) {obj.val = e.target.value;})

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
var Book = {}
var name = ‘’;
Object.defineProperty(Book, ‘name’, {
set: function (value) {
name = value;
console.log(‘你取了一个书名叫做’ + value);
},
get: function () {
return ‘《’ + name + ‘》’
}
})

Book.name = ‘vue权威指南’; // 你取了一个书名叫做vue权威指南
console.log(Book.name); // 《vue权威指南》
我们通过Object.defineProperty( )设置了对象Book的name属性，对其get和set进行重写操作，顾名思义，get就是在读取name属性这个值触发的函数，set就是在设置name属性这个值触发的函数，所以当执行 Book.name = ‘vue权威指南’ 这个语句时，控制台会打印出 “你取了一个书名叫做vue权威指南”，紧接着，当读取这个属性时，就会输出 “《vue权威指南》”，因为我们在get函数里面对该值做了加工了。

请参考：vue中的双向数据绑定详解https://www.cnblogs.com/zhuzhenwei918/p/7309604.html