浅谈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 相关文章推荐
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
Angularjs 基础入门
Dec 26 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
Vue实现简单分页器
Dec 29 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
ES6中字符串的使用方法扩展
Jun 04 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实现无限级分类实现代码(递归方法)
2011/01/01 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
Python中列表list以及list与数组array的相互转换实现方法
2017/09/22 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
Python常用断言函数实例汇总
2020/11/30 Python
python音频处理的示例详解
2020/12/23 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
幼儿园美术教学反思
2014/01/31 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
爱国演讲稿500字
2014/05/04 职场文书
保护野生动物倡议书
2014/05/16 职场文书
家庭贫困证明
2014/09/23 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
如何才能写好调研报告?
2019/07/03 职场文书