Javascript对象中的数据属性和访问器属性实例详解
数据属性一般用于存储数据数值,访问器属性对应的是set/get操作,不能直接存储数据值。
数据属性特性:value、writable、enumerable、configurable。
解释:configurable:true/false,是否可以通过delete删除属性,能否修改属性的特性,能否把属性修改为访问器属性,默认false;
enumerable:true/false,是否可以通过for in循环返回,默认false;
writable:true/false,是否可以修改属性的值,默认false;
value:undefined,设置属性的值,默认undefined。
访问器属性特性: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时,便是只能写入而不能读取
以上就是Javascript对象中的数据属性和访问器属性实例详解的详细内容,更多请关注其它相关文章!
推荐阅读
-
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
-
详解js访问对象的属性和方法
-
javascript遍历json对象的key和任意js对象属性实例
-
如何直接访问php实例对象中的private属性详解
-
JavaScript中的window对象的属性和方法;JavaScript中如何选取文档元素
-
JavaScript中的数据属性和访问器属性
-
JavaScript中的获取对象宽高等属性的方法和区别对比讲解
-
jquery选择器和属性对象的操作实例分析
-
Asp中err和error对象的属性详解及用法示例
-
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解