了解下数据属性和访问器属性的特性

通常我们会这样定义一个普通对象&＃xff0c;

var obj &＃61; {foo:"bar"
}
console.log(obj.foo);//输出&＃39;bar&＃39;


我们可以修改这个对象的属性&＃xff0c;

obj.foo &＃61; "baz";
console.log(obj.foo);//输出&＃39;baz&＃39;


但是&＃xff0c;一旦Object.freeze(obj)了&＃xff0c;就无法修改对象的属性了。

var obj &＃61; {foo:"bar"}console.log(obj.foo);//输出&＃39;bar&＃39;Object.freeze(obj);obj.foo &＃61; "baz";console.log(obj.foo);//输出&＃39;bar&＃39;


为啥&＃xff1f;Object.freeze()有什么神奇魔力&＃xff1f;
这个得从数据属性的几个特性说起了。
var obj &＃61; {foo:"bar"}&＃xff0c;foo属性就是obj的数据属性。
在控制台试试Object.getOwnPropertyDescriptors(obj)或者Object.getOwnPropertyDescriptor(obj,&＃39;foo&＃39;)。

configurable&＃xff0c;enumerable&＃xff0c;value和writable就是foo这个属性的特性。
value&＃xff1a;属性值&＃xff0c;比如obj.foo的属性值就是bar;
writable&＃xff1a;是否可改写。我们不妨试试把writable改成false。

var obj &＃61; {foo:"bar"
}
Object.defineProperty(obj,"foo",{writable:false
});
obj.foo &＃61; "world";
console.log(obj.foo);//输出"bar"


writable置为false后&＃xff0c;就无法改写obj.foo了。

enumerable&＃xff1a;是否可枚举。在使用Object.keys()和Object.getOwnPropertyNames()时&＃xff0c;能够感受更明显一些。

var obj &＃61; {foo:"bar"
}
Object.defineProperty(obj,"foo",{enumerable:false
});
let res &＃61; Object.keys(obj);//返回实例的所有可枚举属性
let res2 &＃61; Object.getOwnPropertyNames(obj);//返回实例的所有属性&＃xff0c;不论是否可枚举
console.log(res,res2);//输出[] [&＃39;foo&＃39;]


configurable&＃xff1a;是否可配置。configurable置为false&＃xff0c;delete obj.foo无效&＃xff0c;即无法删除obj上的foo属性。且一旦configurable为false了&＃xff0c;就无法重新将其设置为true&＃xff0c;即不可逆。
看看下面的例子就明白了。

var obj &＃61; {foo:"bar"
}
Object.defineProperty(obj,"foo",{configurable:false
});delete obj.foo;
console.log(obj.foo)//输出&＃39;bar&＃39;Object.defineProperty(obj,"foo",{configurable:true
});//报错&＃xff0c; Cannot redefine property: foo


好了&＃xff0c;现在来对比下obj在Object.freeze()前后&＃xff0c;这四个特性有啥变化。

var obj &＃61; {foo:"bar"
}
//{value: "bar", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(obj,&＃39;foo&＃39;));Object.freeze(obj);
//{value: "bar", writable: false, enumerable: true, configurable: false}
console.log(Object.getOwnPropertyDescriptor(obj,&＃39;foo&＃39;));


可以看出&＃xff0c;Object.freeze()同时改变了foo的configurable和writable&＃xff0c;将它们都置为false了&＃xff0c;这也是之后无法改变obj属性的原因。

以上简单介绍了数据属性的几个特性&＃xff0c;顺带也了解下访问器属性的特性吧。
差不多&＃xff0c;configurable&＃xff0c;enumerable&＃xff0c;value &＃xff0c;writable &＃xff0c;换成get和set。
先来个简单的例子吧。

var obj &＃61; {_foo:"bar",get foo(){return this._foo;},set foo(val){this._foo &＃61; val;}
}
console.log(Object.getOwnPropertyDescriptors(obj));
console.log(obj.foo);//输出&＃39;bar&＃39;obj.foo &＃61; "baz";
console.log(obj.foo);//输出&＃39;baz&＃39;


注意哈&＃xff1a;这里一个是foo&＃xff0c;另一个是_foo&＃xff08;前缀下划线&＃xff09;。其中&＃xff0c;foo是访问器属性&＃xff0c;_foo是数据属性。
如果两个都是foo&＃xff0c;访问或修改obj.foo时都会进入死循环&＃xff0c;最后堆栈溢出。

//如果都是foo
var obj &＃61; {foo:"bar",get foo(){return this.foo;},set foo(val){this.foo &＃61; val;}
}
console.log(obj.foo);//会死循环&＃xff0c;导致堆栈溢出


除了get foo(){}和set foo(){}&＃xff0c;还有几种定义访问器属性的方法&＃xff0c;这里简单罗列一下吧。

Object.defineProperty()

var obj &＃61; {_foo:"bar"
};
Object.defineProperty(obj,"foo",{configurable:true,enumerable:true,get:function(){return this._foo;},set:function(val){this._foo &＃61; val;}
});
console.log(obj.foo);//输出&＃39;bar&＃39;obj.foo &＃61; "baz";
console.log(obj.foo);//输出&＃39;baz&＃39;


Object.defineProperties()

var obj &＃61; {_foo:"bar"
}
Object.defineProperties(obj,{"foo":{configurable:true,enumerable:true,get:function(){return this._foo;},set:function(val){this._foo &＃61; val;}}
});
console.log(obj.foo);//输出&＃39;bar&＃39;obj.foo &＃61; "baz";
console.log(obj.foo);//输出&＃39;baz&＃39;


obj.__defineGetter__和obj.__defineSetter__

var obj &＃61; {_foo:"bar"
}
obj.__defineSetter__("foo",function(val){this._foo &＃61; val;
});
obj.__defineGetter__("foo",function(){return this._foo;
});
console.log(obj.foo);//输出&＃39;bar&＃39;obj.foo &＃61; "baz";
console.log(obj.foo);//输出&＃39;baz&＃39;


综上&＃xff0c;定义对象有以下三种方式&＃xff0c;

• 直接使用对象字面量

var obj &＃61; {foo:"bar"
}


• 使用defineProperty定义数据属性的方式

Object.defineProperty(obj,"foo",{configurable:true,enumerable:true,writable:true,value:"bar"
});


• 使用defineProperty定义访问器属性的方式

var obj &＃61; {_foo:"bar"
}
Object.defineProperty(obj,"foo",{configurable:true,enumerable:true,get:function(){console.log("get foo");return this._foo;},set:function(newVal){console.log("set foo");this._foo &＃61; newVal;}
})


对比以上三种方式&＃xff0c;第三种方式&＃xff0c;让数据变得可观测了。
当访问obj.foo时&＃xff0c;触发了get&＃xff0c;并输出了"get foo"&＃xff1b;
当修改obj.foo时&＃xff0c;触发了set&＃xff0c;并输出了"set foo"。

也就说&＃xff0c;数据什么时候被访问了&＃xff0c;get感知得到&＃xff1b;数据什么时候被修改了&＃xff0c;set感知得到。数据是时刻被观测着的。
这就是vue实现响应式数据的基本原理。