理解概念:指的是ECMAScript对象的属性的特征,属性有哪些特征,属性有哪些分类。
一共分两类:数据属性和访问器属性。
[[Configurable]]
表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。默认true。
[[Enumerable]]
表示能否通过for-in循环返回属性。默认true。
[[Writable]]
表示能否修改属性的值。默认true。
[[Value]]
包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。默认true。
ECMAScript5的方法,Object.defineProperty(targetObject, targetProperty, descriptor):
//修改writable特性
var person = {};
Object.defineProperty(person, "name", {
writable: false;
value: "MirrorAvatar"
});
console.log(person.name); //MirrorAvatar
person.name = "Mudface"; //严格模式(use strict)下,这句会抛出错误
console.log(person.name); //MirrorAvatar
//修改configurable特性
var person ={};
Object.defineProperty(person, "name", {
configurable: false,
value: "MirrorAvatar"
});
console.log(person.name); //MirrorAvatar
delete person.name; //控制台会输出false,严格模式(use strict)下,这句会抛出错误
console.log(person.name); //MirrorAvatar
?
//configurable特性的不可逆性
var person = {};
Object.defineProperty(person, "name", {
configurable: false,
value: "MirrorAvatar"
});
//抛出错误,控制台输出:TypeError: Cannot redefine property: name
Object.defineProperty(person, "name", {
configurable: true,
value: "MirrorAvatar"
});
?
Object.defineProperty()方法若是不指定configurable、enumerable和writable的时候,都默认是false。
IE8对Object.defineProperty支持不好,请不要在此浏览器上用此方法。
[[Configurable]]
表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性。默认true。
[[Enumerable]]
表示能否通过for-in循环返回属性。对于直接在对象上定义的属性。默认值为true。
[[Get]]
在读取属性时调用的函数。默认值为undefined。
[[Set]]
在写入属性时调用的函数。默认值为undefined。
访问器属性不能直接定义,必须使用ECMAScript5的Object.defineProperty()来定义。
var blog = {
_year: 2015,
edition: 1
};
Object.defineProperty(blog, "year", {
get: function() {
return this._year;
},
set: function(newValue) {
if(newValue > 2015) {
this._year = newValue;
this.edition += newValue - 2015;
}
}
});
blog.year = 2016;
console.log(blog.edition); //2
?
_year前面的下划线是一种常用的记号,用于表示只能通过对象方法访问的属性。
year这个属性就是所谓的访问器属性。
由控制台输出结果可以发现:设置一个属性值会使其他属性值改变,这是访问器属性的常见使用方式。
不需要同时指定getter和setter方法。
只指定getter方法。
只能读不能写,如果写会被忽略。严格模式(use strict)下,尝试写会抛出错误。
只指定setter方法。
只能写不能读,如果读返回undefined。严格模式(use strict)下,尝试读会抛出错误。
defineGetter()和defineSetter()。两个下划线。
var blog = {
_year: 2015,
edition: 1
};
//定义访问器的旧方法
blog.__defineGetter__("year", function() {
return this._year;
});
blog.__defineSetter__("year", function(newValue) {
if(newValue > 2015) {
this._year = newValue;
this.edition += newValue - 2015;
}
});
blog.year = 2016;
console.log(blog.edition); //2
?
ECMAScript5定义的Object.defineProperties()方法。
var blog = {};
Object.defineProperties(blog, {
_year: {
value: 2015
},
edition: {
value: 1
},
year: {
get: function() {
return this._year;
},
set: function(newValue) {
if(newValue > 2015) {
this._year = newValue;
this.edition += newValue - 2015;
}
}
}
});
blog.year = 2016;
console.log(blog.edition); // 输出1。为什么是1?不是2?因为还有个属性writable未设置,默认false,不可写。
?
原文:http://mirroravatar.iteye.com/blog/2190282