您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
ES5_Object对象方法扩展
发布时间：2019-10-04 19:34:57编辑：雪饮阅读（）
继承-继承父对象
var obj={username:'gjp',age:24};
var obj1=Object.create(obj);
console.log(obj1);
这里obj1继承了obj的属性,在控制台中可以看到obj1是空对象,但是其有_proto_属性(原型)正好就是obj对象值。
继承-继承父对象并对子对象创建成员变量
var obj={username:'gjp',age:24};
var obj1=Object.create(obj,{
sex:{
value:'man'
}
});
obj1.sex='woman';
console.log(obj1);
这里obj1继承了obj并为obj1设置了一个sex的属性，其值是'man'，然后尝试修改obj1对象的sex值，但在控制台上可看到该sex值并没有被修改成功，这是因为属性的写入权限默认为false
继承-子对象属性的写入权限
var obj={username:'gjp',age:24};
var obj1=Object.create(obj,{
sex:{
value:'man',
writable:true
}
});
obj1.sex='woman';
console.log(obj1);
和上面一样，但这次因为有了写入权限，所以sex属性值被成功写入
继承-子对象属性的删除权限
没有删除权限前
var obj={username:'gjp',age:24};
var obj1=Object.create(obj,{
sex:{
value:'man',
writable:true
}
});
delete obj1.sex;
console.log(obj1);
这里会发现控制台中obj1仍旧存在sex属性
拥有删除权限：
var obj={username:'gjp',age:24};
var obj1=Object.create(obj,{
sex:{
value:'man',
writable:true,
configurable:true
}
});
delete obj1.sex;
console.log(obj1);
这次可在控制台中看到obj1对象明显没有了sex属性
继承-子对象属性的枚举权限
没有枚举权限前：
var obj={username:'gjp',age:24};
var obj1=Object.create(obj,{
sex:{
value:'man',
writable:true,
configurable:true
}
});
for(var i in obj1){
console.log(i);
}
可见在控制台中仅obj的属性被枚举出来，而obj1的sex属性并没有枚举出来
拥有枚举权限后：
var obj={username:'gjp',age:24};
var obj1=Object.create(obj,{
sex:{
value:'man',
writable:true,
configurable:true,
enumerable:true
}
});
for(var i in obj1){
console.log(i);
}
可见在控制台中obj1的sex属性也被枚举出来了 。
属性扩展
示例：
var obj2={firstName:'gjp',lastName:'dmj'};
Object.defineProperties(obj2,{
fullName:{
get:function(){
//读取本属性时便会调用该方法
return this.firstName+' '+this.lastName;
}
}
});
obj2.fullName='gjp love dmj';
console.log(obj2);
这里声明了obj2对象，并为obj2对象扩展一个fullName的属性，并写了该扩展属性的读取方法，读取方法(get)中的this指向obj2。最后还尝试了obj2的扩展属性fullName属性值的更改，但在控制台中可见其值并没有被修改，这是因为我们没有定义该扩展属性的set方法。
属性扩展-扩展属性的修改
var obj2={firstName:'gjp',lastName:'dmj'};
Object.defineProperties(obj2,{
fullName:{
get:function(){
//读取本属性时便会调用该方法
return this.firstName+' '+this.lastName;
},
set:function(data){
//这里的形参是当fullName被修改时所传递来的新值
var names=data.split(' ');
this.firstName=names[0]+' '+names[1];
this.lastName=names[2];
}
}
});
obj2.fullName='gjp love dmj';
console.log(obj2);
这里在上面的基础上实现了set方法，所以fullName就能够成功被修改了，根据set方法可知，fullName的属性修改方法属于惰性求值法，因为修改的只是其值来源所依赖的另外两个值，而自己这次修改的值只有在下次获取时候才临时去找另外两个属性来共同求值。
属性扩展-get、set这两个方法也可用在普通对象创建时
而且用起来语法结构更简单些
get:
var obj3={
firstName:'dmj',
lastName:'gjp',
get fullName(){
return this.firstName+' '+this.lastName;
}
};
console.log(obj3);
set:
var obj3={
firstName:'dmj',
lastName:'gjp',
get fullName(){
return this.firstName+' '+this.lastName;
},
set fullName(data){
var names=data.split(' ');
this.firstName=names[0]+' '+names[1];
this.lastName=names[2];
}
};
obj3.fullName='dmj love gjp';
console.log(obj3);
关键字词：es5,object,对象扩展,对象继承,原型,get,set,属性