浅谈Javascript数据属性与访问器属性

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数据属性与访问器属性全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • 当自定义数据属性为json格式字符串时jQuery的data api问题探讨

    jQuery 的 data API 实现方式有缓存数据的效果 使用 IE 7 (IE8+ 在控制台切换至IE7 模式),当DOM 节点有自定义数据属性时,检查 DOM 节点即可看到 形如 jQuery18305664906559272507 的属性,这便是 用于从数据存储对象中获取自定义数据的建. 当自定义数据属性是一个 json 格式字符串时,缓存的数据如果被修改, 则修改后的数据继续存在于缓存系统中, 如果不留意,这可能导致一些BUG 复制代码 代码如下: <!DOCTYPE HTML>

  • JavaScript笔记之数据属性和存储器属性

    在javascript中,对象的属性分为数据属性和存储器属性两种: 两种属性的区别 我们使用Object.defineProperty()先来直观的感受一下这两者的不同. 使用Object.defineProperty()对数据属性进行设置的方法如下 var obj = {}; Object.defineProperty(obj, "prop", { value: 1, writable: true, //可写性 enumerable: true, //可枚举性 configurabl

  • Jsoup获取全国地区数据属性值（省市县镇村）

    Jsoup获取全国地区数据属性值（省市县镇村）

    jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据. 最近手头在做一些东西,需要一个全国各地的地域数据,从省市区到县镇乡街道的.各种度娘,各种谷歌,都没找到一个完整的数据.最后功夫不负有心人,总算找到一份相对来说比较完整的数据,但是这里的数据也只是精确到镇级别,没有村一级的数据(后来通过分析数据源我知道了为什么,呵呵),在加上博主提供的有些数据存在冗余,对于有

  • 浅谈Javascript数据属性与访问器属性

    ES5中对象的属性可以分为'数据属性'和'访问器属性'两种. 数据属性一般用于存储数据数值,访问器属性对应的是set/get操作,不能直接存储数据值. 数据属性特性:value.writable.enumerable.configurable. 解释:configurable:true/false,是否可以通过delete删除属性,能否修改属性的特性,能否把属性修改为访问器属性,默认false: enumerable:true/false,是否可以通过for in循环返回,默认false: wr

  • 浅谈JavaScript 数据属性和访问器属性

    在JavaScript中对象被定义为"无序属性的集合,其属性可以包含基本值.对象或函数."通俗点讲,我们可以把对象理解为一组一组的名值对,其中值可以是数据或函数. 创建自定义对象通常有两种方法,第一种就是创建一个Object的实例,然后再为其添加属性和方法,例如: var person = new Object(); person.name = "Scott"; person.age = 24; person.sayName = function(){ alert(

  • 浅谈JS使用[ ]来访问对象属性

    对象的属性由两种固定的方法来访问:"."记法和"[ ]"方括号记法: 使用"."号记法访问标准的对象属性,使用"[ ]"方括号记法访问由页面定义的对象属性.如下 document.forms["myformname"].elements["myinput"].value 这里,forms 是 document 的一个标准属性,而表单名 myformname 则是由页面所定义的.同时,el

  • 浅谈JavaScript 中的延迟加载属性模式

    目录 一.前言 二.按需属性模式 三.凌乱的延迟加载属性模式 四.类的唯一自己的延迟加载属性模式 五.对象字面量的延迟加载属性模式 六.结论 一.前言 传统上,开发人员在 JavaScript 类中为实例中可能需要的任何数据创建属性.对于在构造函数中随时可用的小块数据来说,这不是问题.但是,如果在实例中可用之前需要计算某些数据,您可能不想预先支付该费用.例如,考虑这个类: class MyClass { constructor() { this.data = someExpensiveCompu

  • 浅谈JavaScript中你可能不知道URL构造函数的属性

    URL URL 是统一资源定位符,对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它, 在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点 例如,这里是这篇博客文章的路径: https://www.vipbic.com/thread.html?id=101 通常您需要访问 URL 的特定属性.这些可能是主机名(例如 vipbic

  • Javascript访问器属性实例分析

    本文实例分析了Javascript 访问器属性的用法,分享给大家供大家参考.具体分析如下: 这个和构造函数的意思有点像,但功能又不同,他可以让两个属性建立关联,通过修改一个属性来改变另一个属性. 复制代码 代码如下: var book = {     _year:2004,     edition: 1 }; Object.defineProperty(book, "year", {     get: function() {         return this._year;   

  • 浅谈JavaScript中的属性:如何遍历属性

    在JavaScript中,遍历一个对象的属性往往没有在其他语言中遍历一个哈希(有些语言称为字典)的键那么简单.这主要有两个方面的原因:一个是,JavaScript中的对象通常都处在某个原型链中,它会从一个或多个的上层原型上继承一些属性.第二个原因是,JavaScript中的属性不光有值,它还有一些除了值以外的其他特性,其中一个影响属性遍历的特性就是[[Enumerable]],如果该值为true,则称这个属性是可枚举的,否则反之. 知道了这些,我们就可以把属性的遍历分为四种情况. 注:示例代码中

  • 浅谈javascript属性onresize

    浅谈javascript属性onresize //获取屏幕宽度并动态赋值 var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = docum

  • 浅谈JavaScript 浏览器对象

    浅谈JavaScript 浏览器对象

    window window对象不但充当全局作用域,而且表示浏览器窗口. window对象有innerWidth和innerHeight属性,可以获取浏览器窗口的内部宽度和高度.内部宽高是指除去菜单栏.工具栏.边框等占位元素后,用于显示网页的净宽高.还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高. 补充: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:

  • 浅谈javascript运算符——条件,逗号,赋值,()和void运算符

    前面的话 javascript中运算符总共有46个,除了前面已经介绍过的算术运算符.关系运算符.位运算符.逻辑运算符之外,还有很多运算符.本文将介绍条件运算符.逗号运算符.赋值运算符.()和void运算符 条件运算符 条件运算符是javascript中唯一的一个三元运算符(三个操作数),有时直接称做'三元运算符'.通常这个运算符写成'?:',当然在代码中往往不会这么简写,因为这个运算符拥有三个操作数,第一个操作数在'?'之前,第二个操作数在'?'和':'之间,第三个操作数在':'之后 varia

随机推荐