大家好,欢迎来到IT知识分享网。
defineproperty 简单的用defineProperty实现了双向绑定
//defineproperty 有个定义object属性的功能,应该没几个人用,因为相对于obj.a = 1这种方式简直不能再难用。
//通常我们定义obj属性
let obj = {
a:1
}
obj.b = 2
obj['c'] = 3
console.log(obj)//{a: 1, b: 2,c: 3}
Object.defineProperty(obj,'d',{
value: 4
})
console.log(obj)//{a: 1, b: 2,c: 3,d:4} //defineProperty可以定义对象属性
//也可以修改
Object.defineProperty(obj,'b',{
value: 5
})
console.log(obj)//{a: 1, b: 5, c: 3, d: 4}
//对你没看错defineProperty有这个功能,不知可以定义新的属性还可以修改,这么逆天难用的功能为什么还要造出来?说这个有什么用?别急往下看
descriptor详解
defineProperty 接收三个参数
object (必须有 操作的对象本身 这个很容易理解不传它操作谁?)
propertyname (必须有 属性名 添加修改属性得有属性名)
descriptor (必须有 官方说的我理解不了,我理解的是 属性描述
1、简单点就是 设置属性的值value,
2、是否可操作属性值 writable,
3、是否可修改配置configurable如果值为false descriptor内的属性都不可操作)
4、是否可枚举enumerable
*descriptor内配置可有可无,value默认undefind,其余默认为false
先做了介绍我们下边来证明下
writable
//栗子还是这个栗子
let obj = {
a: 1
}
Object.defineProperty(obj, 'b', {
value: 2,
writable: false//不可修改
})
obj.b = 3
console.log(obj) //{a: 1, b: 2} 还真是不可以
//难道是姿势不对?
Object.defineProperty(obj, 'b', {
value: 3
})
console.log(obj)//{a: 1, b: 2} 一样的效果 和姿势无关。
configurable
//configurable 这个比较厉害 控制descriptor内属性都不可改变不知道是不是真的
//还是这个栗子
let obj = {
a: 1
}
Object.defineProperty(obj, 'b', {
value: 2,
//writable: false//不可修改
configurable: false
})
obj.b = 5
console.log(obj)//{a: 1, b: 2}
enumerable
对否可枚举
let obj = {
a: 1
}
Object.defineProperty(obj, 'b', {
value: 2,
//writable: false//不可修改
//configurable: false
enumerable: false
})
//obj.b = 5
console.log(Object.keys(obj))//["a"]
接了下来说到重点: set和get这也是vue3.0前observe的实现原理
let obj = {
a: 1
}
let newValue = 45
Object.defineProperty(obj, 'b', {
get(value) {
console.log('获取')
return value
},
set(newValue) {
console.log('设置')
value = newValue
}
})
obj.b = 6 //设置
obj.b //获取
接下来实践一下
//html
//js //类似 vue的data let obj = {}
/*
*obj 要劫持的对象
*name 要劫持对象的属性
*callback 劫持以后的操作
*/
function watch(obj, name, callback) {
let value = obj.name
Object.defineProperty(obj, name, {
set(msg) {
// 触发setter给obj赋值
value = msg
//执行劫持后的操作
callback(value)
},
get() {
//返回获取属性值
return value
}
})
}
//
function doSomething(value) {
document.querySelector('div').innerHTML = value
document.querySelector('input').value = value
}
//监听input变化
//可以参考全兼容版:https://segmentfault.com/a/1190000017524278
document.querySelector('input').addEventListener('input', (e) => {
obj['msg'] = e.target.value
})
watch(obj, 'msg', doSomething)
原文链接 :https://segmentfault.com/a/1190000017762618
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/11401.html