浅谈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字符集
May 22 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
微信小程序自动客服功能
Nov 02 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
php中fsockopen用法实例
2015/01/05 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
js switch case default 的用法示例介绍
2013/10/23 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
python 域名分析工具实现代码
2009/07/15 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
消防工作实施方案
2014/06/09 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
个人查摆剖析材料
2014/10/16 职场文书
房产证明范本
2015/06/19 职场文书
2016七夕情人节感言
2015/12/09 职场文书