浅谈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 相关文章推荐
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
详解javascript数组去重问题
Nov 06 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
javascript 代码是如何被压缩的示例代码
May 06 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
基于php常用正则表达式的整理汇总
2013/06/08 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
简述pm2常用命令集合及配置文件说明
2019/05/30 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
python相对企业语言优势在哪
2020/06/12 Python
keras:model.compile损失函数的用法
2020/07/01 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
淘宝活动总结范文
2014/06/26 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS