双向绑定 当obj的值修改时_前端数据双向绑定原理:Object.defineProperty()

Object.definedProperty方法可以在一个对象上直接定义一个新的属性、或修改一个对象已经存在的属性，最终返回这个对象。

Object.defineProperty(obj, prop, descriptor)

参数：

obj：被定义或修改属性的对象；

prop ：要定义或修改的属性名称；

descriptor ：对属性的描述；

返回值： obj

描述符(descriptor)说明

该方法允许开发者精确的对对象属性的定义和修改。通过正常赋值进行属性添加而构建的属性会被枚举器方法(如for..in循环或Object.keys方法)获取，从而导致属性值被外部方法改变或删除。而Object.defineProperty()可以避免以上描述的情况，通过Object.defineProperty()添加的属性是默认不可改变的。

属性描述参数(descriptor)主要由两部分构成：数据描述符(data descriptor)和访问器描述符(accessor descriptor)。数据描述符就是一个包含属性的值，并说明这个值可读或不可读的对象；访问器描述符就是包含该属性的一对getter-setter方法的对象。一个完整的属性描述(descriptor)必须是这两者之一，并且不可以两者都有。

数据描述符和访问器描述符各自都是对象，他们必须包含以下键值对：

configurable

仅当设置的属性的描述符需要被修改或需要通过delete来删除该属性时，configurable属性设置为true。默认为false。

enumerable

仅当设置的属性需要被枚举器(如for..in)访问时设置为true。默认为false。

数据描述符可以包含以下可选键值对：

value

设置属性的值，可以是任何JavaScript值类型(number,object,function等类型)。默认为undefined。

writable

仅当属性的值可以被赋值操作修改时设置为true。默认为false。

访问器描述符可以包含以下可选键值对：

get

属性的getter方法，若属性没有getter方法则为undefined。该方法的返回为属性的值。默认为undefined。

set

属性的setter方法，若属性没有setter方法则为undefined。该方法接收唯一的参数，作为属性的新值。默认为undefined。

请牢记，这些描述符的属性并不是必须的，从原型链继承而来的属性也可填充。为了保证这些描述符属性被填充为默认值，你可能会使用形如预先冻结Object.prototype、明确设置每个描述符属性的值、使用Object.create(null)来获取空对象等方式。

一个简单的例子：

1 var obj ={};2 var descriptor = Object.create(null); //no inherited properties

3

4 //所有描述符的属性被设置为默认值

5 descriptor.value = 'static';6 Object.defineProperty(obj, 'key', descriptor);7

8 //明确设置每个描述符的属性

9 Object.defineProperty(obj, 'key', {10 enumerable: false,11 configurable: false,12 writable: false,13 value: 'static'

14 });15

16 //重用同一个对象作为描述符

17 functionwithValue(value) {18 var d = withValue.d ||(19 withValue.d ={20 enumerable: false,21 writable: false,22 configurable: false,23 value: null

24 }25 );26 d.value =value;27 returnd;28 }29 Object.defineProperty(obj, 'key', withValue('static'));30

31 //如果Object.freeze方法可用，则使用它来防止对对象属性的修改

32 (Object.freeze || Object)(Object.prototype);

使用示例

创建一个属性

如果当前对象不存在我们要设置的属性，Object.defineProperty()会根据方法设置为对象创建一个新的属性。如果描述符参数缺失，则会被设置为默认值。所有布尔型描述符属性会被默认设置为false。而value,get,set会被默认设置为undefined。一个未设置get/set/value/writable的属性被称为一个“原生属性(generic)”，并且他的描述符(descriptor)会被“归类”为一个数据描述符(data descriptor)

var o = {}; //创建一个对象

//使用数据描述符来为对象添加属性

Object.defineProperty(o, 'a', {

value:37,

writable:true,

enumerable:true,

configurable:true});//属性”a”被设置到对象o上，并且值为37

//使用访问器描述符来为对象添加属性

var bValue = 38;

Object.defineProperty(o,'b', {

get:function() { returnbValue; },

set:function(newValue) { bValue =newValue; },

enumerable:true,

configurable:true});

o.b;//38//属性”b”被设置到对象o上，并且值为38。//现在o.b的值指向bValue变量，除非o.b被重新定义

//你不能尝试混合数据、访问器两种描述符

Object.defineProperty(o, 'conflict', {

value:0x9f91102,

get:function() { return 0xdeadbeef; }

});//抛出一个类型错误： value appears only in data descriptors, get appears only in accessor descriptors(value只出现在数据描述符中，get只出现在访问器描述符中)

修改一个属性

当某个属性已经存在了，Object.defineProperty()会根据对象的属性配置(configuration)和新设置的值来尝试修改该属性。如果该属性的configurable被设置为false，则该属性无法被修改(这种情况下有个特殊情况：如果之前的writable设置为true，则我们仍可以将writable设置为false，一旦这么做之后，任何描述符属性将变得不可设置)。如果属性的configurable设置为false，则我们无法将属性的描述符在数据描述符和访问器描述符之间转换。

如果新设置的属性和该属性不同，并且该属性的configurable被设置为false，则一个类型错误(TypeError)会被抛出(除了上一段文字中说的特殊情况)。若新旧属性完全相同，则什么都不会发生。

可写特性-writable

当一个属性的writable被设置为false,这个属性就成为“不可写的(non-writable)”。该属性不可被重新赋值。

var o = {}; //创建一个对象

Object.defineProperty(o,'a', {

value:37,

writable:false});

console.log(o.a);//37

o.a = 25; //没有错误抛出//在严格模式下会抛出错误

console.log(o.a); //仍然是37，赋值操作无效

正如上述代码所述，尝试重写一个“不可写(non-writable)”属性不会发生任何改变，也不会抛出错误。

可枚举特性-enumerable

属性的enumerable值定义对象的属性是否会出现在枚举器(for..in循环和Object.keys())中。

var o ={};

Object.defineProperty(o,'a', {

value:1,

enumerable:true});

Object.defineProperty(o,'b', {

value:2,

enumerable:false});

Object.defineProperty(o,'c', {

value:3});//enumerable默认设置为false

o.d = 4; //通过直接设置属性的方式，enumerable将被设置为true

for (var i ino) {

console.log(i);

}//打印出’a’和’d’

Object.keys(o);//['a', 'd']

o.propertyIsEnumerable('a'); //true

o.propertyIsEnumerable('b'); //false

o.propertyIsEnumerable('c'); //false

可配置特性-configurable

属性的configurable值控制一个对象的属性可否被delete删除，同时也控制该属性描述符的配置可否改变(除了前文所述在configurable为false时，若writable为true，则仍可以进行一次修改将writable改变为false)。

var o ={};

Object.defineProperty(o,'a', {

get:function() { return 1; },

configurable:false});

Object.defineProperty(o,'a', {

configurable:true});//抛出错误

Object.defineProperty(o, 'a', {

enumerable:true});//抛出错误

Object.defineProperty(o, 'a', {

set:function() {}

});//抛出错误(set之前被设置为undefined)

Object.defineProperty(o, 'a', {

get:function() { return 1; }

});//抛出错误(即使新的get做的是相同的事，但方法的前后引用不相同)

Object.defineProperty(o, 'a', {

value:12});//抛出错误

console.log(o.a);//1

delete o.a; //什么都不发生

console.log(o.a); //1

如果o.a属性的configurable为true，就不会有任何错误抛出，并且o.a在最后的delete操作中会被删除。

添加属性时的默认值

考虑描述符特性的默认值如何被应用是非常重要的。正如下面示例所示，简单的使用”.”符号来设置一个属性和使用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

下面的示例展示了如何实现一个“自存档(self-archiving)”的对象。当temperature属性被设置时，archive数组就会添加一个日志记录。

functionArchiver() {var temperature = null;var archive =[];

Object.defineProperty(this, 'temperature', {

get:function() {

console.log('get!');returntemperature;

},

set:function(value) {

temperature=value;

archive.push({ val: temperature });

}

});this.getArchive = function() { returnarchive; };

}var arc = newArchiver();

arc.temperature;//'get!'

arc.temperature = 11;

arc.temperature= 13;

arc.getArchive();//[{ val: 11 }, { val: 13 }]

或者下面这样写也是同样的效果：

var pattern ={

get:function() {return 'I always return this string, whatever you have assigned';

},

set:function() {this.myname = 'this is my name string';

}

};functionTestDefineSetAndGet() {

Object.defineProperty(this, 'myproperty', pattern);

}var instance = newTestDefineSetAndGet();

instance.myproperty= 'test';

console.log(instance.myproperty);//I always return this string, whatever you have assigned

console.log(instance.myname);//this is my name string

最后放上一个利用Object.defineProperty()实现的简单的双向绑定的例子

Document

{{hello}}

var obj ={};

Object.defineProperty(obj,'hello',{

set:function(val){

document.querySelector('#bb').innerHTML =val;

document.querySelector('#aa').value =val;

}

});

document.querySelector('#aa').oninput = function(e){

obj.hello=e.target.value;

};

obj.hello= "";

obj.hello= "abc";