一、属性标志和属性描述符
1. 属性标志
- 对象属性所具有的标志有:
1)value : 获取对象属性的值;
2)writable — 如果为 true,则值可以被修改,否则它是只可读的。
3)enumerable — 如果为 true,则会被在循环中列出,否则不会被列出。
4)configurable — 如果为 true,则此特性可以被删除,这些属性也可以被修改,否则不可以
后三个通常不会出现,因为常规创建对象的时候,三者默认为true,但我们也可以随时更改它们,
2. 属性描述符
- 获取对象属性标志=语法如下:
let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);
语法说明:
obj:需要从中获取信息的对象;
propertyName:属性的名称;
let user = {
name:'john'
}
let mytest = Object.getOwnPropertyDescriptor(user,'name');
console.log(mytest);
- 修改对象属性标志语法如下:
Object.defineProperty(obj, propertyName, descriptor);
语法说明:
==obj 和 propertyName ==:要应用描述符的对象及其属性;
descriptor:要应用的属性描述符对象;
具体使用:
如果对象属性已存在,会更新其值;否则会根据给定的值和标志,创建新的属性,这样一来,没有提供的标志则会被定为false
let user = {
name:'john'
}
Object.defineProperty(user,'name',{value:'Kanno'});
Object.defineProperty(user,'age',{value:'24'});
let mytest = Object.getOwnPropertyDescriptor(user,'name');
let mytest2 = Object.getOwnPropertyDescriptor(user,'age');
console.log(mytest );
console.log(mytest2 );
- 只读
可以通过设置 writable 标志来设置属性的值 是否可重新赋值
let user = {
name: "John"
};
Object.defineProperty(user, "name", {
writable: false
});
user.name = "Pete"; // Error: Cannot assign to read only property 'name'
二、属性的 getter 和 setter
1. getter 和 setter
let obj = {
get propName() {
// 当读取 obj.propName 时,getter 起作用
},
set propName(value) {
// 当执行 obj.propName = value 操作时,setter 起作用
}
};
2. 访问器描述符
访问属性 与 数据属性 的描述符不同;
访问属性 没有 value 和 writable, 但是有 ** get** 和 set 函数
所以访问器描述符可能有:
- get —— 一个没有参数的函数,在读取属性时工作,
- set —— 带有一个参数的函数,当属性被设置时调用,
- enumerable —— 与数据属性的相同,
- configurable —— 与数据属性的相同。
3. 使用
Getter/setter 可以用作“真实”属性值的包装器,以便对它们进行更多的控制。
案例 1 : 禁止太短的 user 的 name,我们可以创建一个 setter name,并将值存储在一个单独的属性 _name 中:
let user = {
get name() {
return this._name;
},
set name(value) {
if (value.length < 4) {
alert("Name is too short, need at least 4 characters");
return;
}
this._name = value;
}
};
user.name = "Pete";
alert(user.name); // Pete
user.name = ""; // Name 太短了……
所以,name 被存储在 _name 属性中,并通过 getter 和 setter 进行访问。
从技术上讲,外部代码可以使用 user.name 直接访问 name。但是,这儿有一个众所周知的约定,即以下划线 "" 开头的属性是内部属性,不应该从对象外部进行访问。
案例 2 : 访问器允许随时通过使用 getter 和 setter 替换“正常的”数据属性,来控制和调整这些属性的行为
1)一开始我们使用数据属性 name 和 age 来实现 user 对象:
function User(name, age) {
this.name = name;
this.age = age;
}
let john = new User("John", 25);
alert( john.age ); // 25
2)但是现在我们决定存储 birthday,而不是age了
function User(name, birthday) {
this.name = name;
this.birthday = birthday;
}
let john = new User("John", new Date(1992, 6, 1));
2)现在问题来了:那些仍使用 age 属性的旧代码,万一很多地方用,不方便改呢,换句话说就是 == 我还想留着 age==, 可以通过为age 添加一个getter 解决
function User(name, birthday) {
this.name = name;
this.birthday = birthday;
// 年龄是根据当前日期和生日计算得出的
Object.defineProperty(this, "age", {
get() {
let todayYear = new Date().getFullYear();
return todayYear - this.birthday.getFullYear();
}
});
}
let john = new User("John", new Date(1992, 6, 1));
console.log(john.age); // 29
console.log(john.birthday); //Wed Jul 01 1992 00:00:00 GMT+0800 (中国标准时间)