js高级程序设计——数据属性和访问器属性
Posted 刘槟豪
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js高级程序设计——数据属性和访问器属性相关的知识,希望对你有一定的参考价值。
ES5中对象的属性可以分为“数据属性”和“访问器属性”两种。
数据属性一般用于存储数据数值,访问器属性对应的是set/get操作,不能直接存储数据值。
数据属性分为 configurable enumerable writable value
解释:configurable: 表示能否通过delete删除属性重而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。
enumerable:表示能否通过for-in循环返回属性。
writable:表示能否修改属性的值。
value:包含这个属性的数据值。读取属性值的时候,从这个位置度,写入属性值的时候把新值保存在这个位置。这个特性的默认值为undefined
对于直接在对象上定义的属性,它们的[[configurable]] [[enumerable]] [[writable]] 特性都被设置为true value则被设置成指定的值。
例子:
1 var person = { 2 name:"Nicholas" 3 };
person对象的configurable enumerable writable都是默认值都为true
访问器属性特性:set、get、enumerable、configurable。
解释:configurable:true/false,是否可以通过delete删除属性,能否修改属性的特性,能否把属性修改为访问器属性,默认false;
enumerable:true/false,是否可以通过for in循环返回,默认false;
set:function,读取属性值时调用的函数;
get:function,修改属性值时调用的函数。
将属性添加到对象或修改现有属性的特性使用Object.defineProperty() 或 Object.defineproperties()方法;
Object.defineProperty(object, propertyname, descriptor):
参数解释:object:需要添加或修改属性的对象;
propertyname:属性的名称,字符串格式;
descriptor:属性的描述,设置数据属性或访问器属性的特性。
实例分析:
数据属性:
var emp = {
name:‘tom‘
};
Object.defineProperty(emp,‘name‘,{
writable:false
});
emp.name = ‘jery‘;
console.log(emp.name);//输出tom,因为已经设置了writable为false
Object.defineProperty(emp,‘age‘,{
configurable:false,
writable:true,
value:22
});
console.log(emp.age);//输出22,因为设置了value为22
emp.age = 25;
console.log(emp.age);//输出25,设置了writable为true
delete emp.age;
console.log(emp.age);//输出25,设置了configurable为false,此属性删除不了
访问器属性:
var emp ={
_name:‘tom‘,
_age:20
};
Object.defineProperty(emp,‘name‘,{
get:function(){
return this._name;
}
});
console.log(emp.name);//输出tom,由get方法返回_name的值
emp.name = ‘jery‘;
console.log(emp.name);//输出tom,没有set方法,修改不了_name的值
Object.defineProperty(emp,‘age‘,{
configurable:true,
get:function(){
return this._age;
}
set:function(age){
this._age = age;
}
});
emp.age = 25;
console.log(emp.age)//输出25,emp.age=25是使用set方法将25赋值给_age,emp.age是使用get方法将_age的读取出来
delete emp.age;
console.log(emp.age);//输出undefined,configurable为true,可以使用delete方法将emp.age属性删除
备注:访问器属性可以起到很好的保护作用,当只有get方法时,就实现只读不能写;反之,只有set时,便是只能写入而不能读取
以上是关于js高级程序设计——数据属性和访问器属性的主要内容,如果未能解决你的问题,请参考以下文章