JS数据属性和访问器属性

JS-数据属性和访问器属性

1、属性类型

只有内部采用的特性。

1.1数据属性: 包含一个数据值的位置,在该位置可以对数据值进行读写。如下面第一张图的name、age均为数据属性,满足在这个位置可以对数据值读写。

(1)数据属性包含的四个特性(首字母小写)

1)configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为true

2)enumerable:表示能否通过for-in循环返回属性

3)writable:表示能否修改属性的值

4)value:包含该属性的数据值。默认为undefined

Object.getOwnPropertyDescriptor()方法可以获取指定属性的描述。

JS数据属性和访问器属性_第1张图片JS数据属性和访问器属性_第2张图片

(2)对数据属性进行修改:

对数据属性进行修改必须使用ECMAScript5的Object.defineProperty()方法,该方法接收三个参数:属性所在的对象、属性的名称、属性的定义描述符对象。

JS数据属性和访问器属性_第3张图片

writable为false,则name属性为只读的,不能修改。

configurable为false,则name属性不能是通过delete删除,非严格模式下什么也没发生,但是在严格模式下会报错,而且一旦把属性设置为不可配置的,就不能再把它变为可配置的啦(可以多次调用Object.defineProperty()修改其它属性。

JS数据属性和访问器属性_第4张图片

(3)如果直接通过defineProperty为对象添加属性,则默认为对象的数据属性为false。

JS数据属性和访问器属性_第5张图片

1.2访问器属性

访问器属性不包含数据值,它们包含一对getter和setter函数,通过定义访问器属性,可以实现设置一个属性的值会导致其它属性发生变化。下图程序中的year属性即为book对象的访问器属性。

JS数据属性和访问器属性_第6张图片

     直接调用book.year,即调用了这个访问器属性中定义的get方法,返回 book._year这个数据属性。如果给book.year赋值,就是调用了这个访问器属性中定义的set方法,打印出book对象也如上图所示。

    数据属性和访问器属性是同级别的关系,只是由于功能不同把它们分成两派,按照它们所谓的 “特征值” 定义这个属性的性质。访问器属性只是因为它带有可以访问对象内其它属性(比如作为数据属性中[[Value]]的值,即上面例子中 _year 的值)的功能(通过 getter、setter 函数),并经过一些处理(例子中的 get、set 内的处理)从而实现 “设置一个属性的值会导致其他属性发生变化”(高程原话)的效果,即 book.year 影响 book._year。

1.3 Object.defineProperties()设置多个属性

该方法包含两个参数:属性所在的对象,多个属性的名字和其描述符对象组成的对象。其作用于Object.defineProperty()相同,区别是可一次性定于多个属性。

    综述:数据属性在编码中的应用很容易想到,比如说定义一个常量PI=3.1415926,该常量不可以修改,可以数据属性中的writable设置为false,但是访问器属性是怎么用到的以及它的意义是什么,暂且没有想到,另外访问器属性中的四个特性是怎么设置的,也没有想到。“getter和setter不一定要成对出现,只有getter函数证明该属性只读不可写,尝试写入在非严格模式下会被忽略,严格模式会抛出错误。相同,只有setter函数证明只写不能读,尝试读在非严格模式下返回undefined,严格模式则抛出错误”,感觉这一段话也没有什么实际的作用。有不同看法的大佬欢迎拍砖和留言。

 


你可能感兴趣的