浅谈Javascript数据属性与访问器属性


Posted in Javascript onJuly 26, 2016

ES5中对象的属性可以分为‘数据属性'和‘访问器属性'两种。

数据属性一般用于存储数据数值,访问器属性对应的是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数据属性与访问器属性全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
JS实现的类似微信聊天效果示例
Jan 29 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
js判断空对象的实例(超简单)
Jul 26 #Javascript
全面了解构造函数继承关键apply call
Jul 26 #Javascript
JS面试题---关于算法台阶的问题
Jul 26 #Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 #Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 #Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 #Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 #Javascript
You might like
php日历制作代码分享
2014/01/20 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
python异步任务队列示例
2014/04/01 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
python 等差数列末项计算方式
2020/05/03 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
大学生自我评价怎样写好
2013/10/23 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
服务行业口号
2014/06/11 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
2015年助残日活动总结
2015/03/27 职场文书
创业计划书之网吧
2019/10/10 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP