一、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
<body>
<h2>单项数据绑定:通过修改JS中的数据,页面呈现最新修改的数据信息。这是一种映射关系,把JS数据的变化映射到DOM结构上</h2>
<div id="box">数据单项绑定呈现位置</div>
<input type="text" id="ipt">
</body>
<script src="./js/jquery-1.12.3.min.js"></script>
<script>
// 创建对象
// var obj = {
// des:"把Model的变化映射到DOM结构上"
// }
// 获取元素
// var box = document.getElementById("box");
// // 设置元素的内部文本
// box.innerHTML = obj.des;
// 普通的方式,修改对象的值,查看页面DOM数据变化
// obj.des = "新的数据";//页面不会发生改变,除非通过innerHTML重新写入
// 通过set方法设置单项绑定
// Object.defineProperty(obj,'des',{
// //赋值器
// set:function(value){
// // 当设置或修改新的值时,将最新的值输出到页面
// box.innerHTML = value;
// // 备用属性赋值
// this.oDes = value;
// },
// // 取值器
// get:function(){
// return this.oDes;
// }
// });
// 再次修改以下值试试
// obj.des = "新的值";//发现页面内容更新了
// 现在我们做这样一个修改,页面添加一个输入框,随着输入框内容的输入,上面呈现输入框中的内容,修改如下:
// 创建对象
var obj = {
des:"把Model的变化映射到DOM结构上"
}
// 获取元素
var box = document.getElementById("box");
var ipt = document.getElementById("ipt");
// 设置元素的内部文本
box.innerHTML = obj.des;
Object.defineProperty(obj,'des',{
//赋值器
set:function(value){
// 当设置或修改新的值时,将最新的值输出到页面
box.innerHTML = value;
// 备用属性赋值
this.oDes = value;
},
// 取值器
get:function(){
return this.oDes;
}
});
// 新的值来自于页面输入框 触发正在输入事件
// ipt.oninput = function(){
// if(this.value === ""){
// box.innerHTML = "把Model的变化映射到DOM结构上";
// }else{
// obj.des = this.value;
// }
// }
// 含有输入法时,不能检测中文,改造并使用jQuery(使用js也可)如下:
3.6 对象所有特性相关应用:
// 创建一个对象
var obj = {
name:"张三",
age:25
}
// 设置多属性特性value
Object.defineProperties(obj,{
// 设置属性name的特性
name:{
// 配置值 设置或修改值
value:"张三丰",
// 是否可写配置 设置值为false后不可以再通过普通方式修改值
writable:false,
// 是否可枚举配置 设置值为false后 不可以枚举属性
enumerable:false,
// 是否可配置设置,设置为false后不能使用任何方式重复修改设置
configurable:false
},
// 设置属性age的特性
age:{
// 存值器
set:function(value){
this.oAge = value;
},
// 取值器
get:function(){
return this.oAge;
},
// 设置是否可枚举 设置false后,age属性不再被获取,只显示备用属性
enumerable:false,
// 注意:一旦设置set/get方法就是设置了设置值或修改值的配置,
// 一旦设置了set特性方法,就不能再设置相同功能的特性 writeable 与 value,否则配置冲突报错
// 设置是否可写
// writable:false,
// 配置新的值
// value:"张君宝"
}
})
// 尝试修改obj中的属性
obj.name = "张翠华";
obj.age = 23;
console.log(obj)
// 尝试枚举
for(var i in obj){
console.log(i,obj[i])
}