前戏
JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。
例子1:如何申明一个对象及其属性
const person = new Object()
person.name = 'Zhang Min' // 名字
person.age = 18 // 年龄
person.introduce = 'I am a boy, and remains single' // 个人简介
// 虚报年龄,这里纠正一下
person.age = 27
复制代码
为什么这里的年龄【属性】可以随便修改呢
主角登场
Object.defineProperty()
官方说法:在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象
/**
** obj 要在其上定义属性的对象
** prop 要定义或修改的属性的名称
** descriptor 将被定义或修改的属性描述符
**/
Object.defineProperty(obj, prop, descriptor)
复制代码
例子2:
const person = new Object()
Object.defineProperty(person, 'age', {
writable: false,
value: 18
})
person.age = 27 // 严格模式下,报错
复制代码
为什么这里修改年龄会报错呢
正式介绍
descriptor:属性描述符,定义或修改属性的描述信息。对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符
数据描述符:
- configurable 当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除,默认为 false
- enumerable 当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中,默认为 false
- value 该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等,默认为 undefined
- writable 当且仅当该属性的writable为true时,value才能被赋值运算符改变,默认为 false
存取描述符:
- configurable 当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除,默认为 false
- enumerable 当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中,默认为 false
- get 一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象(由于继承关系,这里的this并不一定是定义该属性的对象)
- set 一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值
回到例子1
我们获取一下age的属性描述符
const descriptor = Object.getOwnPropertyDescriptor(window.person, 'age')
console.table(descriptor)
// {
// value: 18,
// writable: true, // 可更改
// enumerable: true, // 可枚举
// configurable: true, // 可修改描述符
// }
复制代码
这也解释了为什么例子2的age不可被修改了
实现一个数据双向绑定的mini框架
class Index {
constructor(obj) {
this.state = new Object()
for (const key in obj) {
console.log(key)
Object.defineProperty(this.state, key, {
configurable: true,
enumerable: true,
set: (value) => {
obj[key] = value
this.update()
},
get: () => {
return obj[key]
}
})
}
this.update()
}
update() {
document.getElementById('input1').value = this.state.random
document.getElementById('input2').value = this.state.age
}
}
const index = new Index({
age: 18,
name: 'zhang min'
})
// 改变数据,自动更新视图
index.state.age = 27
复制代码
一些思考
Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.defineProperty()方法来绑定所有数据,并在数据变化的同时修改虚拟节点,最终修改页面的Dom结构
- 如何降低频繁操作dom产生巨大的性能开销(延迟发生变化,如setTimeout)
- 如何监听数组的变化(重新赋值/修改数组的push等方法)
下一篇文章:decorator修饰器及mobx的应用