此文为转载,原文: 深入理解对象的数据属性与访问器属性

创建对象的方式有两种:第一种,通过new操作符后面跟Object构造函数,第二种,对象字面量方式。如下

var person = new Object();
person.name = 'Nicy';
person.age = 21;
person.sayName = function() {
console.log(this.name);
}; var person = {
name: 'Nicy',
age: 21,
sayName: function() {
console.log(this.name);
}
}

这两种方式创建出来的对象是一样的,有相同的属性和方法。这些属性内部都有描述其行为的属性描述符。

Object.defineProperty()

通过Object.defineProperty() 可以直接在对象上创建一个属性,也可以修改已有的属性。

Object.defineProperty(obj, prop, descriptor) 接收三个参数:

  obj:属性所在的对象  

  prop:要访问的属性名

  descriptor:描述符对象

描述符对象包含六个属性:configurable、enumerable、writable、value、get、set ,要修改属性的特性,必须使用Object.defineProperty()方法。

通过以上两种方式添加的对象属性,其布尔值特性默认值是true,通过Object.defineProperty来修改属性特性时,只设置需要修改的特性即可;而通过Object.defineProperty创建的属性,其布尔值特性默认值是false。

ECMAScript中属性分为两种:数据属性和访问器属性。

数据属性

数据属性包含四个属性描述符:

[[Configurable]] : 表示能否通过delete删除属性从而重新定义属性,能否修改属性特性,能否把属性修改为访问器属性。通过以上方式添加的对象属性,默认为true。

[[Enumerable]] : 表示能否通过for-in 循环访问属性。通过以上方式添加的对象属性,默认为true。

[[Writable]] : 表示能否修改属性的值。通过以上方式添加的对象属性,默认为true。

[[Value]] : 包含这个属性的数据值,可读取写入。通过以上方式添加的对象属性,默认为undefined。

Writable

var person = {};

Object.defineProperty(person, "name", {
value: 'Nicy'
})
person.name = 'Lee';  
console.log(person.name) // 'Nicy' Object.defineProperty(person, "name", {
writable: true
})
person.name = 'Lee';
console.log(person.name) // 'Lee'

Object.defineProperty直接创建的属性writable默认为false,value值不可修改,此时修改name为Lee,在非严格模式下不会报错,但操作被忽略,在严格模式下会报错。

Configurable

var person = {
name: 'Nicy',
age: 21,
sayName: function() {
console.log(this.name);
}
} Object.defineProperty(person, "name", {
configurable: false
}) delete person.name; // 操作被忽略,无法通过delete删除属性
Object.defineProperty(person, "name", { // throw error
configurable:true
})
Object.defineProperty(person, "name", { // throw error
enumerable: false
})
Object.defineProperty(person, "name", { // 由于writable为true,所以可以修改value
value: 'Lucy'
})
console.log(person.name) // Lucy Object.defineProperty(person, "name", { // writable可进行true -> false的单向修改
writable: false
})
Object.defineProperty(person, "name", { // throw error
value: 'Lee'
})
Object.defineProperty(person, "name", { // throw error,此时writable不可以false -> true
writable: true
})

总结一下configurable:当configurable设为false时,

  1、不可以通过delete去删除该属性从而重新定义属性;

  2、不可以转化为访问器属性;

  3、configurable和enumerable不可被修改;

  4、writable可单向修改为false,但不可以由false改为true;

  5、value是否可修改根据writable而定。

当configurable为false时,用delete删除该属性,在非严格模式下,不会报错,但操作被忽略,在严格模式下会报错;其他不可被修改的特性修改时会报错。

Enumerable

enumerable表示对象属性是否可以在for...in和Object.keys()中被枚举。

var person = {};
Object.defineProperty(person, "a", { value : 1, enumerable:true });
Object.defineProperty(person, "b", { value : 2, enumerable:false });
Object.defineProperty(person, "c", { value : 3 }); // enumerable defaults to false
person.d = 4; // 如果使用直接赋值的方式创建对象的属性,则这个属性的enumerable默认为true for (var i in person) {
console.log(i);
}  // 'a' 和 'd' Object.keys(person); // ["a", "d"]

访问器属性

访问器属性包含四个属性描述符:

[[Configurable]] : 表示能否通过delete删除属性从而重新定义属性,能否修改属性特性,能否把属性修改为数据属性。直接在对象上定义的属性,默认为true。

[[Enumerable]] : 表示能否通过for-in 循环访问属性。直接在对象上定义的属性,默认为true。

[[Get]] : 读取属性时调用的函数,默认为undefined。

[[Set]] : 写入属性时调用的函数,默认为undefined。

var person = {
name: 'Nicy',
_age: 21,
year: 1997,
_year: 1997,
sayName: function() {
console.log(this.name);
}
} Object.defineProperty(person, "age", {
get: function() {
return this._age;
},
set: function(value) {
this._age = value;
// ...
}
})

用Object.defineProperty()定义的访问器属性,其configurable和enumerable默认为false。

数据属性与访问器属性的相互转换

Object.getOwnPropertyDescriptor 读取属性的特性

使用Object.getOwnPropertyDescriptor可以获取到属性的描述符:

Object.getOwnPropertyDescriptor(obj, prop)

  obj:属性所在的对象;

  prop:要访问的属性名。

数据属性 -> 访问器属性

属性的特性只能是访问器描述符和数据描述符中的一种,给已有的数据属性加get或set转换为访问器属性时,其属性的value、writable就会被废弃。

如下代码,将对象原有的数据属性year转换为访问器属性:

*注:在访问器属性的get和set中,不可以使用this访问属性本身,否则会无限递归而导致内存泄漏。

// 设置get和set其中任意一个即可转换为访问器属性
Object.defineProperty(person, "year", {
get: function() {
// return this,year; // error
return this._year;
},
set: function(value) {
// this.year = value;  // error
this._year= value;
}
}) var descriptor = Object.getOwnPropertyDescriptor(person, 'year');
console.log(descriptor); // {get: ƒ, set: ƒ, enumerable: true, configurable: true}

在原有的数据属性year中,使用Object.defineProperty()为属性设置get 或 set,都可以将其转换为访问器属性。

访问器属性 -> 数据属性

将访问器属性转换为数据属性,只需要给现有访问器属性设置value或writable这两个属性描述符中的任意一个即可,其原有的get和set就会被废弃,从而转换为数据属性。

上面为person定义的访问器属性age,通过Object.defineProperty()只设置了get和set,所以configurable默认为false,不可以将其转换为数据属性。可以在访问器属性和数据属性间相互转化的属性其configurable特性值必须为true。

如下代码,我们为person新定义一个访问器属性job,将其configurable设置为true ,并将其转换为数据属性:

Object.defineProperty(person, "job", {
configurable: true,
enumerable: true,
get: function() {
return this._job;
},
set: function(value) {
this._job = value;
}
}) // 设置value和writable其中任意一个即可转换为数据属性
Object.defineProperty(person, "job", {
value: 'worker',
writable: true
}) var descriptor = Object.getOwnPropertyDescriptor(person, 'job');
console.log(descriptor); // {value: "worker", writable: true, enumerable: true, configurable: true}

数据描述符value、writable 和访问器描述符get、set不能同时设置,否则会报错。

Object.defineProperties()

通过Object.defineProperties()可以一次性为对象定义多个属性。

var person = {};
Object.defineProperties(person, {
name: {
value: 'Nicy',
writable: true
},
_age: {
value: 21,
enumerable: true,
writable: true,
configurable: true
},
age: {
get: function() {
return this._age;
},
set: function(value) {
this._age = value;
}
}
});

js对象的属性:数据(data)属性和访问器(accessor)属性的更多相关文章

  1. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

  2. JavaScript 属性类型(数据属性和访问器属性)

    数据属性 数据属性包含一个数据值的位置.在这个位置可以读取和写入值.数据属性有 4 个描述其行为的特性. [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修 ...

  3. WCF服务中,[DataMember]属性标记的属性一定要有set访问器

    WCF服务中,如果实体类中,包含有[DataMember]属性标记时,该属性一定要有set访问器.当系统必须调用到[DataMember]标记的属性时,如果该属性没有set访问器,则会出错.

  4. Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令

    1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...

  5. js 对象方法、类方法、原型方法的区别;私有属性、公有属性、公有静态属性的区别

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. js中属性类型:数据属性与访问器属性

    js中属性类型分为两种:数据属性和访问器属性 在js中,对象都是由名值对构成的,名:就是我们所说的属性名,值就是属性对应的值(基本值.对象.方法). ECMA-262第5版定义了只有内部才用的特性,描 ...

  7. 关于get和set访问器以及属性和字段变量的区别问题

    属性是对一个或者多个字段的封装.      类里面为什么要用一个共有的属性来封装其中的字段,也可以这样说用共有属性来封装私有变量,其中的好处应该大家都说的出来,就是为了实现数据的封装和保证了数据的安全 ...

  8. Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解

    先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...

  9. JS的数据属性和访问器属性

    ECMA-262第5版在定义只有内部才用的特性(attribute)时,描述了属性(property)的各种特征.ECMA-262定义这些特性是为了实现javascript引擎用的,因此在javasc ...

随机推荐

  1. laravel Collection mapToDictionary 例子

    源码 示例 <?php require __DIR__ . '/bootstrap/app.php'; $arr = [ [ 'name' => 'John', 'age' => 2 ...

  2. mysql 优化之查询缓存(mysql8已经废弃这个功能)

    对于缓存,一般人想到的是 redis.memcache 这些内存型的缓存. 但是实际上 mysql 也提供了缓存,mysql 里面的缓存是查询缓存,可以把我们查询过的语句缓存下来,下一次查询的时候有可 ...

  3. ubuntu thrift

    1.下载 http://www.apache.org/dyn/closer.cgi?path=/thrift/0.9.2/thrift-0.9.2.tar.gz 2.解压 tar -xvf thrif ...

  4. P3924 康娜的线段树

    P3924 康娜的线段树 题目描述 小林是个程序媛,不可避免地康娜对这种人类的"魔法"产生了浓厚的兴趣,于是小林开始教她OI. 今天康娜学习了一种叫做线段树的神奇魔法,这种魔法可以 ...

  5. Sitemesh 3使用及配置

    1:Sitemesh简介 SiteMesh是一个网页布局和修饰的框架,利用它可以将网页的内容和页面结构分离,以达到页面结构共享的目的. SiteMesh是基于Servlet的filter的,即过滤流. ...

  6. oracle进阶之分析函数

    本博客是自己在学习和工作途中的积累与总结,纯属经验之谈,仅供自己参考,也欢迎大家转载,转载时请注明出处. http://www.cnblogs.com/king-xg/p/6797119.html 分 ...

  7. Vue入坑教程(一)——搭建vue-cli脚手架

    1. Vue简介 详细内容可以参考官网Vue.js 1)兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMA ...

  8. 洛谷 p2066 机器分配(资源型)

    机器分配 https://www.luogu.org/problem/show?pid=2066 题目描述 总公司拥有高效设备M台,准备分给下属的N个分公司.各分公司若获得这些设备,可以为国家提供一定 ...

  9. 穷竭搜索: POJ 2718 Smallest Difference

    题目:http://poj.org/problem?id=2718 题意: 就是输入N组数据,一组数据为,类似 [1  4  5  6  8  9]这样在0~9之间升序输入的数据,然后从这些数据中切一 ...

  10. mysql自学路线

    入门: -Head First:PHP & MySQL.Lynn Beighley -MySQL必知必会 -MySQL5.5从零开始学.刘增杰 -MYSQL完全手册 (the Complete ...