浅谈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 设计模式 安全沙箱模式
Sep 24 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
js字符串转成JSON
Nov 07 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
详解vue axios二次封装
Jul 22 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
JavaScript中arguments的使用方法详解
Dec 20 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
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/11/12 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
如何通过jdbc调用存储过程
2012/04/19 面试题
开办化妆品公司创业计划书
2013/12/26 职场文书
小学后勤管理制度
2014/01/14 职场文书
仓库管理计划书
2014/05/04 职场文书
网站推广策划方案
2014/06/04 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫