ES5给Object扩展了一些静态方法,常用的两个:
1.Object.create(prototype,[descriptors])
作用:以指定对象为原型创建新的对象
为新的对象指定新的属性,并对属性进行描述:
- value:指定值
- writable:标识当前属性值是否可以修改,默认为false
- configurable:标识当前属性是否可以被删除,默认为false
- enumerable:标识当前属性是否能用for in 枚举 默认为false
例:
value:
<script>
var obj={username:'kebi',age:18};
var obj1={};
obj1=Object.create(obj,{
sex:{
value:'男'
}
});
console.log(obj1);
</script>
//obj1不但继承了obj的属性,自己还能扩展属性
writable:
在上面的代码中再添加,对obj1扩展的属性进行修改:
obj1.sex='女';
console.log(obj1);
没有修改成功,那是因为这个方法中还有个属性叫writable,它的值为true就是可以修改,值为false就是不能修改,默认为false:
sex:{
value:'男',
writable:true
}
configurable:
又添加:
// 删除
delete obj1.sex;
console.log(obj1);
没有删除成功,扩展属性还在,要想删除成功就必须加上configurable属性:
sex:{
value:'男',
writable:true,
configurable:true
}
删除成功了。
enumerable:
// 循环
for(var i in obj1){
console.log(i);
}
此时控制台并没有输出sex的值,说明扩展属性并不能通过循环输出,要想输出就得使用另一个属性enumerable:
sex:{
value:'男',
writable:true,
configurable:true,
enumerable:true
}
2.Object.defineProperties(object,descriptors)
作用:为指定对象定义扩展多个属性
- get:用来获取当前属性值的回调函数
- set:修改当前属性值的触发的回调函数,并且实参即为修改后的值
- 存取器属性:setter,getter一个用来存值,一个用来取值
以下是给一个对象扩展一个属性名叫fullName的例子
var obj2={firstName:'gao',lastName:'xue'};
Object.defineProperties(obj2,{
fullName:{
get:function () {//获取扩展属性的值,获取扩展属性值时,get方法自动调用,
console.log("get()");//调试使用
return this.firstName+" "+this.lastName;
},
set:function (data) {
//监听扩展属性,当扩展属性发生变化时会自动回调,自动回调后会将变化的值作为实参注入到set函数
console.log("set()");//调试使用
console.log(data);
}
}
});
console.log(obj2.fullName);
结果为:
获取扩展属性时,get方法执行了一次。
当你想要修改扩展属性值时:
在上面代码中添加:
obj2.fullName='xue ge';//修改
console.log(obj2.fullName);
有没有发现,虽然修改成功了,但是最后输出仍然是以前的值,说明对原始数据没有改动,而且还输出了三次,get方法被调用了两次,那是因为你console.log有两次,修改调用obj2.fullName触发了set方法,所以输出三次。
其实修改也得通过set方法来进行修改:
set:function (data) {
//监听扩展属性,当扩展属性发生变化时会自动回调,自动回调后会将变化的值作为实参注入到set函数
console.log("set()");//调试使用
console.log(data);
var names=data.split(' '); //通过split方法把它分成数组,两部分
this.firstName=names[0];
this.lastName=names[1];
}
console.log(obj2.fullName);
obj2.fullName='xue ge'; // 修改驱动,一旦改变,就执行set方法
console.log(obj2.fullName);
看,修改成功了吧,修改不了fullName值,那修改原始数据。
对象本身的两个方法:
get propertyName(){} 用来得到当前属性值得回调函数
set propertyName(){} 用来监视当前属性值变化的回调函数
咱们先看看刚说的例子的控制台:
var obj2={firstName:'gao',lastName:'xue'};
Object.defineProperties(obj2,{
fullName:{
get:function () {//获取扩展属性的值,获取扩展属性值时,get方法自动调用,
console.log("get()");//调试使用
return this.firstName+" "+this.lastName;
},
});
console.log(obj2); //输出对象
再看看现在的代码及及控制台:
我们直接在对象里添加一个属性,get后面是扩展的属性名
var obj={
firstName:'da',
lastName:'xue',
get fullName(){
return this.firstName+" "+this.lastName;
},
};
console.log(obj);
通过比较,其实上面的例子本身就是调用的get和set方法。