【ES5新特性二】新增对象属性特性
一、Object 属性描述符相关方法
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象。
Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）
Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。
原生JavaScipt案例合集
JavaScript +DOM基础
JavaScript 基础到高级
Canvas游戏开发
在ES3.1中，只要对象能够访问到，就可以任意的去操作该对象，访问对象、添加属性、修改属性和删除属性，如下：
console.group("ES3对象操作");
var stu = {
name:"张三",
sex:"男",
age:23
}
console.log("原对象stu:",stu);
// 添加分数属性
stu.score = 100;
console.log("添加分数属性后stu:",stu);
// 删除年龄属性
delete stu.age;
console.log("删除年龄属性后stu:",stu);
// 修改性别属性
stu.sex = "女";
console.log("修改性别属性后stu:",stu);
console.groupEnd();
在ES5中，为对象拓展了一个叫做“特性”的东西，为对象中属性的可访问行进行了限制 如设置属性是否可以被枚举的特性enumerable [ɪ’njʊmərəbl],属性值为布尔值
console.group("ES5限制枚举特性");
// 使用for...in 枚举（一一列举）对象的属性
for(var i in stu){
console.log(i);//没有限制枚举的情况下，正常获取对象的每一个属性
}
// console.log("====== 开始限制某个独立属性的枚举 ======")
// // 使用ES5中对象的特性 enumerable限制枚举 属性值设置为false则对象属性不可枚举 默认true可枚举
// Object.defineProperty(stu,"score",{
// // 设置score属性不可枚举
// enumerable:false
// })
// for(var i in stu){
// console.log(i);//限制枚举的情况下，不能正常获取对象限制枚举的属性
// }
console.log("====== 限制多个属性的枚举 ======")
Object.defineProperties(stu,{
"name":{
enumerable:false
},
"sex":{
enumerable:false
}
})
for(var i in stu){
console.log(i);//限制枚举的情况下，不能正常获取对象限制枚举的属性
}
console.groupEnd();
总结：对象中的属性默认可以被枚举；但使用ES5方法限制枚举后，被限制枚举后的属性就不可以再次枚举了
对象中存在的属性描述符有两种主要类型：数据描述符和访问器描述符。数据描述符是一个具有可写或不可写值的属性。访问器描述符是由 getter/setter 函数对描述的属性。描述符只能是这两种类型之一，不能同时为两者。
数据描述符和访问器描述符都是对象。它们共享以下可选键（请注意：在使用 Object.defineProperty() 定义属性的情况下，下述所有键都是默认值）：
-
configurable
当设置为 false 时，
该属性的类型不能在数据属性和访问器属性之间更改，且
该属性不可被删除，且
其描述符的其他属性也不能被更改（但是，如果它是一个可写的数据描述符，则 value 可以被更改，writable 可以更改为 false）。
默认值为 false。 -
enumerable
当且仅当该属性在对应对象的属性枚举中出现时，值为 true。默认值为 false。
数据描述符还具有以下可选键值： -
value
与属性相关联的值。可以是任何有效的 JavaScript 值（数字、对象、函数等）。默认值为 undefined。 -
writable
如果与属性相关联的值可以使用赋值运算符更改，则为 true。默认值为 false。
访问器描述符还具有以下可选键值： -
get
用作属性 getter 的函数，如果没有 getter 则为 undefined。当访问该属性时，将不带参地调用此函数，并将 this 设置为通过该属性访问的对象（因为可能存在继承关系，这可能不是定义该属性的对象）。返回值将被用作该属性的值。默认值为 undefined。 -
set
用作属性 setter 的函数，如果没有 setter 则为 undefined。当该属性被赋值时，将调用此函数，并带有一个参数（要赋给该属性的值），并将 this 设置为通过该属性分配的对象。默认值为 undefined。
如果描述符没有 value、writable、get 和 set 键中的任何一个，它将被视为数据描述符。如果描述符同时具有 [value 或 writable] 和 [get 或 set] 键，则会抛出异常。
这些属性不一定是描述符本身的属性。继承的属性也会被考虑在内。为了确保这些默认值得到保留，你可以预先冻结描述符对象原型链中的现有对象，明确指定所有选项，或使用 Object.create(null) 指向 null。
二、关联知识点回顾
-
JS中的三类对象：
- 内置对象（native object）是由ECMAScript规范定义的对象或者类。例如：函数对象、数组对象、日期对象、正则表达式对象等等
- 宿主对象（host object） 是由js编译器所嵌入的宿主环境（web浏览器）所定义的。比如客户端js中表示网页结构的HTMLElement对象就是宿主环境创建的对象。宿主环境定义的对象可以直接使用的话，我们也可以把它们当做内置对象。
- 自定义对象（user-defined object） 由运行中的js创建的对象。
-
JS中的两类属性：
- 自有属性（own property） 直接在对象当中定义的属性，区别于继承属性。
- 继承属性（inherited property） 在对象原型中定义的属性。
-
JS中属性描述符对象(属性的特性描述)：
ES5中定义了一个属性描述符对象（property descriptor），这个对象属性和他们所描述的属性特性是同名的。
- value：属性的值。
- writable：可写性，是否可以设置值。
- enumerable：可枚举性，遍历对象时该属性会不会出现。
- configurable：可配置性。1. 通过设置为true，可以从对象删除通过特性定义的属性。如果是false，则不可以被删除。 2. 如果设置为true时，配置了指定数量的相关属性特性。那么下次可以进行任意的新特性的增加。如果设置为false，那么就不能对应这个属性已经有的特性基础上配置新的属性特性。但是可以继续修改已有的特性对应的那个值。
三、对象属性新增特性描述符
3.1 通过value特性配置值
在ES3.1中，只要对象能够访问到，就可以任意的去操作该对象，访问对象、添加属性、修改属性和删除属性，如下：
// console.group("ES3对象操作");
// var stu = {
// name:"张三",
// sex:"男",
// age:23
// }
// console.log("原对象stu:",stu);
// // 添加分数属性
// stu.score = 100;
// console.log("添加分数属性后stu:",stu);
// // 删除年龄属性
// delete stu.age;
// console.log("删除年龄属性后stu:",stu);
// // 修改性别属性
// stu.sex = "女";
// console.log("修改性别属性后stu:",stu);
// console.groupEnd();
在ES5中，为对象的属性配置值
console.group("ES5添加属性的值");
// 创建一个空对象
var stu = {}
// ES5方法为空对象添加属性和属性值
Object.defineProperty(stu,'name',{
// 配置值 添加属性值
value:"张翠花"
})
// 访问对象 通过这种方式添加的属性
console.log("stu:",stu);//stu: {name: "张翠花"}
// 删除属性 不能使用 delete 删除配置的属性
delete stu.name;
console.log("stu:",stu);//stu: {name: "张翠花"}
// 访问属性 可以访问配置的属性
console.log("stu.name:",stu.name);//stu.name: 张翠花
// 修改属性 不可以使用 obj.att 或 obj[att]方 式修改属性
stu.name = "张无忌";
// 访问属性 可以访问配置的属性
console.log("stu.name:",stu.name);//stu.name: 张翠花
//枚举属性 不可以被枚举
for(var i in stu){
console.log(i);
}
console.groupEnd();
// ES5，修改对象属性
var obj = {type:"未知"};
console.log(obj.type);//未知
Object.defineProperty(obj,"type",{
value:"狗"
});
console.log(obj.type);//狗
obj.type = "猫";
console.log(obj.type);//猫
delete obj.type;
console.log(obj.type);//undefined
总结:
- 当一个对象中没有任何原有属性，通过特性的方式 Object.definePeoperty方式添加的属性，里面属性的所有特性都是false:即：通过这种方式添加的属性不能够删除、修改和枚举。
- 如果一个对象中天生自带某个属性，此时对象属性的所有特性属性值为true： 即：只要对象能访问到，不管什么方式，都可以进行任意的操作
3.2 通过writable特性配置可读写性
// 创建一个对象
var obj = {type:"未知"}
// 将对象的属性type设置为不可写特性（即：不可修改）
Object.defineProperty(obj,"type",{
// 设置属性是否可写 true默认可写 false不可写
writable:false
})
console.log("修改前属性type:",obj.type);//修改前属性type: 未知
// 尝试使用普通的方式进行修改 结果不可修改
obj.type = "猫";
console.log("修改后属性type:",obj.type);//修改后属性type: 未知
3.3 通过enumerable配置可枚举性
// 创建一个对象
var obj = {
type:"未知",
color:"白色"
}
// 默认情况下，对象的属性可以被枚举
for(var i in obj){
console.log(i);
}
// 设置属性color特性 不可枚举
Object.defineProperty(obj,"color",{
// 默认true可被枚举 设置false不可被枚举
enumerable:false
})
// 设置color不可枚举后，尝试枚举，color不再出现
for(var i in obj){
console.log(i);
}
3.4 通过 configurable配置相关配置
var obj = {
name: "张三",
age: 23
}
console.log("初始对象：", obj)
// 普通对象属性可以访问、修改、新增、删除、枚举
Object.defineProperties(obj, {
name: {
value: "李四",
// 如果要修改的这个属性，原本就存在于对象中。那么对应的属性特性默认全部为true，可操作的
},
gender: {
value: "男",
// 如果这个属性，在原对象中不存在，那么此时作为新增属性。它的属性特性默认全部为false，不可操作的，但是可以访问这个属性
// 配置可被枚举
enumerable: true,
// 配置可以被修改
// writable: true,
// 可配置性：1. 通过设置为true，可以从对象删除通过特性定义的属性。
// 2. 如果设置为true时，配置了指定数量的相关属性特性。那么下次可以进行任意的新特性的增加。如果设置为false，那么就不能对应这个属性已经有的特性基础上配置新的属性特性。但是可以继续修改已有的特性对应的那个值。
// configurable: true
}
})
Object.defineProperty(obj, 'gender', {
value: "女",
writable: true
})
// 枚举
for (let k in obj) {
console.log(k)
}
3.5 存值器set和取值器get
单项数据绑定：通过修改JS中的数据，页面呈现最新修改的数据信息。这是一种映射关系，把JS数据的变化映射到DOM结构上
数据单项绑定呈现位置