js对象的访问器属性和数据属性

JavaScript 数据属性和访问器属性

var obj = {name:"percy"};
console.log(obj.name);    // percy
obj.name = "zyj";
console.log(obj.name);    // zyj

// 这里借 Math 对象来举例
// 首先说明一下, Math 对象和上面定义的 obj 对象都只是 Object 对象的一个实例
console.log(Math.PI);    // 3.1415926...
Math.PI = 1234;
console.log(Math.PI);    // 3.1415926...

同样是 Object 的实例,obj 对象的属性却可以被改写,而 Math 对象的属性去不能被改写。好,让我们来码一行,从而让 obj 对象的属性也不能被改写:

var obj = {name:"percy"};
console.log(obj.name);    // percy

Object.defineProperty(obj,"name",{writable:false});

obj.name = "zyj";
console.log(obj.name);    // percy

数据属性(Data Properties)

数据属性有4个描述其行为的特性:

[[Configurable]] : 表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。

[[Enumerable]] : 表示能否通过 for-in 循环返回属性。

[[Writable]] : 表示能否修改属性的值。

[[Value]] : 包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值时,把新值保存在这个位置。默认值是 undefined。

var person = {};   // 新建一个空对象
Object.defineProperty(person,"name",{
  value: "percy"
});
console.log(Object.getOwnPropertyDescriptor(person,"name"));
// 打印:Object {value: "percy", writable: false, enumerable: false, configurable: false}

没有按上面的2种方法为对象添加属性,而直接通过 Object.defineProperty() 为对象添加属性以及值,这种情况下,这个对象的这个属性的另外3个特性的默认值都是 false。

Object.defineProperty( obj, prop, descriptor)

obj:需要定义属性的对象。

prop:需定义或修改的属性的名字。

descriptor:一个包含设置特性的对象

var person = {name: "percy"};
Object.defineProperty(person,"name",{
  writable: false
});
console.log(person.name);  // percy
person.name = "zyj";
console.log(person.name);  // percy

for(let prop in person){
  console.log(prop + " : " + person[prop]);
}                   // name : percy 
Object.defineProperty(person,"name",{
  enumerable: false
});
for(let prop in person){
  console.log(prop + " : " + person[prop]);
}                   // 什么也没打印

Object.defineProperty(person,"name",{
  configurable: false
});
Object.defineProperty(person,"name",{
  configurable: true
}); // 报错:TypeError: Cannot redefine property: name(…)

// 一旦把属性定义为不可配置的,那么就再也不能把属性定义回可配置的了。

访问器属性(Accessor Properties)

访问器属性有如下4个特性:

[[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性。

[[Enumerable]]:表示能否通过 for-in 循环返回属性。

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

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

访问器属性不能直接定义,必须使用 Object.defineProperty() 来定义。


var book = {
    _year : 2004,
    edition : 1
};
Object.defineProperty(book,"year",{ 
    get : function () {
        alert(this._year);
    },
    set : function (newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});
book.year;      // 弹出窗口,显示 2004
book.year = 2005;
console.log(book.edition);   // 2

定义多个属性

Object.defineProperties(obj, props)

var obj = {};
Object.defineProperties(obj, {
  "property1": {
    value: true,
    writable: true
  },
  "property2": {
    value: "Hello",
    writable: false
  }
  // 等等.
});

console.log(obj); // Object {property1: true, property2: "Hello"}

读取属性的特性

Object.getOwnPropertyDescriptor(obj, prop) 返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

var girl = {name: "zyj"};
console.log(Object.getOwnPropertyDescriptor(girl,"name"));
// Object {value: "zyj", writable: true, enumerable: true, configurable: true}

Object.defineProperties(girl,{
  name:{
    writable: false
  },
  age:{
    writable: true,
    value: 22
  }
});

console.log(Object.getOwnPropertyDescriptor(girl,"name"));
// Object {value: "zyj", writable: false, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(girl,"age"));
// Object {value: 22, writable: true, enumerable: false, configurable: false}

var descriptor = Object.getOwnPropertyDescriptor(girl,"age");
console.log(descriptor.value);         // 22
console.log(descriptor.configurable);  // false
console.log(descriptor.writable);      // true
console.log(descriptor.get);           // undefined
console.log(descriptor.set);           // undefined
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值