灵魂问题 面向对象设计和原型链-程序都有对象,你有对象了吗? 要了解原型的先了解对象
对象
对象就是无序属性的集合
对象中的属性
属性有2种:数据属性和访问器属性
数据属性
数据属性包含一个数据值的位置。这个位置可以读取和写入数据。它有4个可配置的描述符分别为 1. configurable: 能否被delete删除这个数据,默认是true 2. enumerable: 能不能在在for in中获取到这个值,默认是true 3. writable: 能否修改这个值,默认是true 4. value: 这个值的数据是啥,默认是undefined
顶个栗子:
var Persion = {
name: 'mars'
}
这里的Persion中的name就是一个数据属性,且[configurable],[enumerable],[writable]为默认值true,[value]为'mars'
上面的例子是直接定义的属性,如果需要修改属性特性,那么就要使用Object.defineProperty()和Object.defineProperties() 方法
Object.defineProperty() 和 Object.defineProperties()
Object.defineProperty()只能用于数据属性哟,它接收3个参数,分别为,对象,属性名,描述符(Configurable,Enumerable,Writable,Value)
Object.defineProperties() 接受2个参数 分别为,对象和要操作的数据
顶个栗子
// 创建一个对象
var Persion = {}
Object.defineProperty(Persion, "name", {
// 配置描述符
configurable: false, // 配置不能被delete删除
enumerable: true, // 可以被遍历获取到key
writable: false, //不能修改
value: 'mars'
})
// 这个时候 Persion 为{name: "mars"}
// 尝试删除 name
delete Persion.name // 输出false
console.log(Persion) // {name: "mars"}
Persion.name = 'gg'
console.log(Persion) // {name: "mars"}
// 这里如果我们再配置一个值 让他不可以被获取到
Object.defineProperty(Persion, "age", {
// 配置描述符
configurable: false, // 配置不能被delete删除
enumerable: false, // 不可以被遍历获取到key
writable: false, //不能修改
value: '25'
})
Object.keys(Persion) // ["name"]
// 这两个可以合并使用 defineProperties
Persion = {} //重新定义Persion
Object.defineProperties(Persion,{
'name': {
// 配置描述符
configurable: false, // 配置不能被delete删除
enumerable: true, // 可以被遍历获取到key
writable: false, //不能修改
value: 'mars'
},
"age": {
// 配置描述符
configurable: false, // 配置不能被delete删除
enumerable: false, // 不可以被遍历获取到key
writable: false, //不能修改
value: '25'
}
})
访问器属性
访问器属性不包含value值,但是有get和set函数 它有4个描述符
- configurable
- enumerable
- get
- set
小贴士 Vue 2.X 版本对象的双向数据绑定就是通过这个实现的哟 不顶个栗子,拿下来吃了
var Persion = {
_name:'mars',
age:'25'
}
Object.defineProperty(Persion, "name",{
// 监听一下 get set
get: function(){
return this._name
},
set: function(newValue){
// 这里展示一下 set可以自定义
this._name = newValue
this.age = '23'
}
})
Persion.name = 'zy'
console.log(Persion)
// {_name: "zy", age: "23"}
Persion.name
// "zy"
读取属性的描述符
Object.getOwnPropertyDescriptor()方法可以完整的获取到给定的属性的描述符。需要传入2个参数,对象和属性名称
顶个李子
// 那上面的Persion 举例 不重复写了
var descriptor = Object.getOwnPropertyDescriptor(Persion, "_name");
console.log(descriptor)
// {value: "zy", writable: true, enumerable: true, configurable: true}
下一篇为设计模式