浅谈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判断一个URL链接是否有效的实现方法
Oct 08 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
微信小程序云开发 生成带参小程序码流程
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无限分类(树形类)的深入分析
2013/06/02 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
让您的菜单不离网站
2006/10/03 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
页面使用密码保护代码
2013/04/10 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Python列表解析配合if else的方法
2018/06/23 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
python实现交并比IOU教程
2020/04/16 Python
Python自动创建Excel并获取内容
2020/09/16 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
CSS3制作翻转效果_动力节点Java学院整理
2017/07/11 HTML / CSS
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
团代会主持词
2014/04/02 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
使用Python开发冰球小游戏
2022/04/30 Python