通常我们会这样定义一个普通对象,
var obj = {
foo:"bar"
}
console.log(obj.foo);//输出'bar'
我们可以修改这个对象的属性,
obj.foo = "baz";
console.log(obj.foo);//输出'baz'
但是,一旦Object.freeze(obj)
了,就无法修改对象的属性了。
var obj = {
foo:"bar"
}
console.log(obj.foo);//输出'bar'
Object.freeze(obj);
obj.foo = "baz";
console.log(obj.foo);//输出'bar'
为啥?Object.freeze()
有什么神奇魔力?
这个得从数据属性
的几个特性
说起了。
var obj = {foo:"bar"}
,foo属性
就是obj
的数据属性
。
在控制台试试Object.getOwnPropertyDescriptors(obj)
或者Object.getOwnPropertyDescriptor(obj,'foo')
。
configurable,enumerable,value和writable就是foo这个属性的特性。
value
:属性值,比如obj.foo的属性值就是bar;
writable
:是否可改写。我们不妨试试把writable改成false。
var obj = {
foo:"bar"
}
Object.defineProperty(obj,"foo",{
writable:false
});
obj.foo = "world";
console.log(obj.foo);//输出"bar"
writable置为false后,就无法改写obj.foo了。
enumerable
:是否可枚举。在使用Object.keys()
和Object.getOwnPropertyNames()
时,能够感受更明显一些。
var obj = {
foo:"bar"
}
Object.defineProperty(obj,"foo",{
enumerable:false
});
let res = Object.keys(obj);//返回实例的所有可枚举属性
let res2 = Object.getOwnPropertyNames(obj);//返回实例的所有属性,不论是否可枚举
console.log(res,res2);//输出[] ['foo']
configurable
:是否可配置。configurable置为false,delete obj.foo
无效,即无法删除obj上的foo属性。且一旦configurable为false了,就无法重新将其设置为true,即不可逆。
看看下面的例子就明白了。
var obj = {
foo:"bar"
}
Object.defineProperty(obj,"foo",{
configurable:false
});
delete obj.foo;
console.log(obj.foo)//输出'bar'
Object.defineProperty(obj,"foo",{
configurable:true
});//报错, Cannot redefine property: foo
好了,现在来对比下obj在Object.freeze()前后,这四个特性有啥变化。
var obj = {
foo:"bar"
}
//{value: "bar", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(obj,'foo'));
Object.freeze(obj);
//{value: "bar", writable: false, enumerable: true, configurable: false}
console.log(Object.getOwnPropertyDescriptor(obj,'foo'));
可以看出,Object.freeze()
同时改变了foo的configurable
和writable
,将它们都置为false了,这也是之后无法改变obj属性的原因。
以上简单介绍了数据属性
的几个特性,顺带也了解下访问器属性
的特性吧。
差不多,configurable
,enumerable
, ,value
,换成writable
get
和set
。
先来个简单的例子吧。
var obj = {
_foo:"bar",
get foo(){
return this._foo;
},
set foo(val){
this._foo = val;
}
}
console.log(Object.getOwnPropertyDescriptors(obj));
console.log(obj.foo);//输出'bar'
obj.foo = "baz";
console.log(obj.foo);//输出'baz'
注意哈:这里一个是foo
,另一个是_foo
(前缀下划线)。其中,foo是访问器属性,_foo是数据属性。
如果两个都是foo
,访问或修改obj.foo时都会进入死循环,最后堆栈溢出。
//如果都是foo
var obj = {
foo:"bar",
get foo(){
return this.foo;
},
set foo(val){
this.foo = val;
}
}
console.log(obj.foo);//会死循环,导致堆栈溢出
除了get foo(){}
和set foo(){}
,还有几种定义访问器属性
的方法,这里简单罗列一下吧。
Object.defineProperty()
var obj = {
_foo:"bar"
};
Object.defineProperty(obj,"foo",{
configurable:true,
enumerable:true,
get:function(){
return this._foo;
},
set:function(val){
this._foo = val;
}
});
console.log(obj.foo);//输出'bar'
obj.foo = "baz";
console.log(obj.foo);//输出'baz'
Object.defineProperties()
var obj = {
_foo:"bar"
}
Object.defineProperties(obj,{
"foo":{
configurable:true,
enumerable:true,
get:function(){
return this._foo;
},
set:function(val){
this._foo = val;
}
}
});
console.log(obj.foo);//输出'bar'
obj.foo = "baz";
console.log(obj.foo);//输出'baz'
obj.__defineGetter__和obj.__defineSetter__
var obj = {
_foo:"bar"
}
obj.__defineSetter__("foo",function(val){
this._foo = val;
});
obj.__defineGetter__("foo",function(){
return this._foo;
});
console.log(obj.foo);//输出'bar'
obj.foo = "baz";
console.log(obj.foo);//输出'baz'
综上,定义对象有以下三种方式,
- 直接使用
对象字面量
var obj = {
foo:"bar"
}
- 使用
defineProperty
定义数据属性
的方式
Object.defineProperty(obj,"foo",{
configurable:true,
enumerable:true,
writable:true,
value:"bar"
});
- 使用
defineProperty
定义访问器属性
的方式
var obj = {
_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 = newVal;
}
})
对比以上三种方式,第三种方式,让数据变得可观测了
。
当访问obj.foo
时,触发了get
,并输出了"get foo"
;
当修改obj.foo
时,触发了set
,并输出了"set foo"
。
也就说,数据什么时候被访问了,get
感知得到;数据什么时候被修改了,set
感知得到。数据是时刻被观测着的。
这就是vue实现响应式数据的基本原理。