1.数据属性特性
configurable:该属性是否可以删除和重新定义
是否能修改为访问器属性,当为false时,不能重新定义,不能删除
enumerable:该属性是否能通过for/in遍历
writable:该属性是否能够修改
value:该属性的数据值
2.为对象定义或修改单个属性的特性 Object.defineProperty()方法
语法:Object.defineProperty(obj,‘prop’,description)
obj:目标对象
‘prop’:需要定义或者修改的属性名
description:该属性的特性描述 作用:定义或者修改目标对象的属性特性 注意:在我们创建一个对象,并且为对象设置属性时,该属性的configurable,enumerable,writable的值默认为true
3.为对象定义或修改多个属性的特性 Object.defineProperties()方法
语法:Object.defineProperties(obj, props)
obj:目标对象
props: 为该对象定义或修改的具体配置 作用:为该对象定义或修改多个属性特性
4.读取单个属性特性描述 Object.getOwnPropertyDescriptor()方法
语法:Object.getOwnPropertyDescriptor(obj,prop)
obj:目标对象
prop:目标对象内属性名称 作用:读取该对象内的某个属性的特性描述
5.读取对象的自身属性特性描述 Object.getOwnPropertyDescriptors()方法
语法:Object.getOwnPropertyDescriptors(obj)
obj:目标对象 作用:读取该对象内的自有属性的特性描述,如果没有自身属性,返回空对象
6.访问器属性
configurable:该属性能否通过delete删除从而定义属性,能否修改,默认false
enumerable:能否通过for/in循环遍历,默认false get:在读取属性时调用的函数,默认undefined
set:在写入属性时调用的函数,默认undefined
案例:通过访问器属性来实现简单的双向数据绑定
<!-- 输入框 -->
<input type="text" id="input">
<!-- 内容展示区 -->
<div class="showContent"></div>
<script>
// 1.创建一个数据容器对象
var date = {};
// 2.访问器属性新增一个属性 用户的输入值
Object.defineProperty(data,'input',{
get:function(){
return 10;
},
set:function(newValue){
// 4.给div的内容进行赋值
document.getElementById('showContent').innerHTML = newValues
}
})
// 3.获取到用户输入的值 DOM 命令式编程
document.getElementById('input').addEventListener('input',function(event){
//event是在js中监听事件返回的参数
// 获取到输入框的值
data.input = event.target.value;
})
</script>
7.对象序列化和反序列化
概念:
将对象的状态转换为字符串
将字符串还原为对象函数 注意:RegExp,Error对象,undefined值不能序列化和反序列化 方法:
序列化:JSON.stringify(obj)将对象序列化为JSON字符串,只能序列化对象的可枚举属性
反序列化:JSON.parse(jsonStr)将JSON字符串反序列化为对象