JS对象高级属性:数据属性与访问器属性

原创 2016年06月01日 15:51:45

一、说明:

使用以下介绍的高级属性,需要注意浏览器是否支持。高版本浏览器,如ie9+通常支持。另外需要说明的一点,这里所说对象包括function和Object,而不是单指Object


二、数据属性:

Configurable:true|false,表示能否通过delete将属性删除,默认为true。当把属性的Configurable设置为false后,该属性不能通过delete删除,并且也无法再将该属性的Configurable设置回true.
Enumerable: true|false。表示属性可否被枚举,默认true。
Writable: true|false。表示属性是否可写,默认true
Value:属性的值


三、访问器属性:

Configurable:同数据属性的Configurable
Enumerable: 同数据属性的Enumerable
get:function(){} 属性被读取的时候调用,支持的浏览器IE9+、Firefox4+、Safari5+、Opera12+、Chrom
set:function(newValue){} 属性被写入的时候调用, 支持的浏览器IE9+、Firefox4+、Safari5+、Opera12+、Chrom


四、相关函数及支持的浏览器版本:

Object.defineProperty:IE8是第一个实现此函数的版本
Object.defineProperties:IE9+、Firefox4+、Safari5+、Opera12+、Chrom
Object.getOwnPropertyDescriptor:IE9+、Firefox4+、Safari5+、Opera12+、Chrom


五、示例:

1、Object.defineProperty
数据属性和访问器属性可以通过Object.defineProperty进行设置。例如:

var person={name:”Leo”}
Object.defineProperty(person,”name”,{//设置数据属性
    Writable:false;//设置为false,name属性为只读的
    Configurable:false //设置为false,则name属性不能通过delete删除
});
Object.defineProperty(person,”name”,{//设置访问器属性
    Configurable:false,
    set:function(newValue){console.log(newValue),name=newValue;}
});
//定义set后,当你这样person.name=’Leo’;则浏览器会调用set方法,打出Leo,另外需要
//注意的是name=newValue不能为this.name=newValue。不然会陷入无限递归,引发栈溢出错误

但是如果是下面这样会报错,因为Writable不是访问器属性

Object.defineProperty(person,”name”,{
Writable:false;
    Configurable:false,
    set:function(newValue){console.log(newValue)}
});

此时person对象的name属性是只读的。需要注意的是IE8是第一个实现defineProperty的浏览器版本。在更低版本的浏览器中是不支持这个方法的。并且ie8也只是部分实现,而不是彻底实现。


2、Object.defineProperties
Object.defineProperties方法。作用跟Object.definePropert一样,只不过Object.definePropert只能定义单个属性,而Object.defineProperies可以定义多个属性。例如:

var person={name:”Leo”,age:18} 
Object.defineProperties(person,{
    name:{
        Writable:true
    },
    age{
        set:function(newValue){console.log(newValue)}
    }
});

3、Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor方法。以上面的person为例来使用
var descriptor=Object.getOwnPropertyDescriptor(person,”name”);
console.log(descriptor.Value);
console.log(descriptor.Writable);

JS对象与访问器属性

JS对象与访问器属性  (2015-12-25 11:42:02) 转载▼ 标签:  js        大家都知道,JavaScript是从ECMAScript中发展...
  • VIP_guo
  • VIP_guo
  • 2016年09月21日 22:13
  • 1668

浅谈 JS 对象添加 getter与 setter 的5种方法以及如何让对象属性不可配置或枚举

https://segmentfault.com/a/1190000003882976
  • zhao351227041
  • zhao351227041
  • 2016年06月12日 15:15
  • 603

JS 对象属性访问的2种方式和用途

问题起源: 在学习JS的过程中遇到一道题目“判断一个字符串中出现次数最多的字符,统计这个次数”,在网上查到一个用对象的方法解题,看完表示一脸懵逼。对代码中o[char]不能理解。 代码如下: ...
  • shuren1991
  • shuren1991
  • 2017年03月28日 17:15
  • 1250

JS对象与访问器属性

JS对象与访问器属性  (2015-12-25 11:42:02) 转载▼ 标签:  js        大家都知道,JavaScript是从ECMAScript中发展...
  • VIP_guo
  • VIP_guo
  • 2016年09月21日 22:13
  • 1668

JS 对象属性访问的2种方式和用途

问题起源: 在学习JS的过程中遇到一道题目“判断一个字符串中出现次数最多的字符,统计这个次数”,在网上查到一个用对象的方法解题,看完表示一脸懵逼。对代码中o[char]不能理解。 代码如下: ...
  • shuren1991
  • shuren1991
  • 2017年03月28日 17:15
  • 1250

C#属性访问器

在程序中经常碰到get、set,不甚明白,在网上查询时也说的迷迷糊糊,所以整理下,以学的明白透彻点。     有两个类person:     public class person ...
  • gk3214
  • gk3214
  • 2017年06月25日 21:21
  • 316

访问javascript对象的属性和方法

之前就没认真看过,一直就知道定义一个对象,然后用‘.’操作来访问属性和方法。今天突然看见还有另外一种方法,就认真看了下。 var obj={}; var arr=[]; arr[0]=1,arr...
  • angeljsl
  • angeljsl
  • 2015年10月30日 16:46
  • 1136

请问js对象属性值为什么用数组也可以访问

请问js对象属性值为什么用数组也可以访问  分享| 2013-10-18 13:58xiaosage86 | 浏览 1571 次  Javascript var obj = { ...
  • evilcry2012
  • evilcry2012
  • 2016年03月04日 09:36
  • 1814

javascript 创建对象,访问对象的属性,访问对象的方法。

/* 1.在 JavaScript中,几乎所有的事物都是对象。 2.JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。 ...
  • zhanggaofeixy
  • zhanggaofeixy
  • 2016年08月07日 20:49
  • 1610

C#语法小知识(六)属性与索引器

属性是一种成员,它提供灵活的机制来读取、写入或计算私有字段的值。 属性可用作公共数据成员,但它们实际上是称为“访问器”的特殊方法。 这使得可以轻松访问数据,还有助于提高方法的安全性和灵活性。 索引...
  • ecidevilin
  • ecidevilin
  • 2016年09月13日 14:54
  • 1301
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS对象高级属性:数据属性与访问器属性
举报原因:
原因补充:

(最多只允许输入30个字)