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
  • 1466

在javaScript对象字面量中定义访问器属性

我们知道,要给对象定义访问器属性,需要使用 Object.defineProperty()方法。这个方法只能在对象字面量定义以外来使用。形如:var testObj={_x:10,_y:20}; Ob...

jQuery在IE8上使用,IE8提示“对象不支持此属性或方法”

跑到jQuery官网看了一下原来jQuery2.x不支持IE678 jQuery 2.x jQuery 2.x has the same API as jQuery 1.x, but does n...

js的对象属性的两种访问方式和对象的内存理解

js对象属性有两种访问方式,代码如下:        function Person() {}; var p1 = new Person(); p1.name = "拉拉...
  • youyajie
  • youyajie
  • 2012年09月18日 21:53
  • 12574

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

/* 1.在 JavaScript中,几乎所有的事物都是对象。 2.JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。 ...

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

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

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

请问js对象属性值为什么用数组也可以访问  分享| 2013-10-18 13:58xiaosage86 | 浏览 1571 次  Javascript var obj = { ...

前端复习--对象的可枚举属性

初学时,并不是很注意这些细节的东西,但是程序员写代码的时候,怎么会容忍胡而麻三的记忆. 1 for in 语句的复习--问题引出 var triangle = {a:1, b:2, c:3}; fu...

hash_map和map的区别

这里列几个常见问题,应该对你理解和使用hash_map比较有帮助。 4.1 hash_map和map的区别在哪里? 构造函数。hash_map需要hash函数,等于函数;map只需要比较函数(小于函数...
  • sws9999
  • sws9999
  • 2008年10月15日 21:24
  • 31864

js 实现 罗列对象的属性和值

  • 2010年03月30日 14:41
  • 386B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS对象高级属性:数据属性与访问器属性
举报原因:
原因补充:

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