Object.defineProperty是Vue中一个核心功能,用来实现数据劫持,对数据进行处理,转换为get和set
作用:直接在一个对象上定义一个新属性,或者修改一个对象的现有属性
语法:Object.defineProperty(obj,prop,descriptor)
参数:
obj要在其上定义属性的对象
prop要定义或修改的属性的名称
descriptor将被定义或修改的属性描述符
数据描述:
configurable 是否可以删除目标属性, 默认为false
enumerable 此属性是否可以被枚举(遍历),默认为false
value 该属性对应的值,默认为undefined
writable 属性的值是否可以被重写,默认为false
访问器描述:
getter是一种获得属性值的方法
setter是一种设置属性值的方法
可以写configurable、enumerable、
不能写value、writable
采用数据描述的方式修改数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//使用数据的时候,对数据进行劫持(代理)
//使用Object.defineProperty劫持属性,把属性转换成访问器的方式
/*
getter 获取属性触发的
setter 设置属性触发的
*/
let data = {
title: 'blog'
};
//定义属性,也可在原有的属性上描述(添加新的属性)
Object.defineProperty(data, 'myBlog', {
value: 'huanggr.cn',
})
//改变对象的属性值
Object.defineProperty(data, 'title', {
value: '改变你的属性值',
configurable: false, //该属性是否可以被删除
//enumerable:false, //是否可以被枚举
writable: false //设置false,不允许重新改
})
//writable为false表示在外面不能够改变值
data.title = "最后一次改变的值";
console.log(data);
//所谓枚举,实质上相当于遍历
for (let attr in data) {
console.log(attr);
}
//删除对象的属性
delete data.title
console.log(data); //configurable:false, //该属性是否可以被删除
//这个为数据描述,下面的一个为访问器描述
</script> |
采用访问器方式修改数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
//使用数据的时候,对数据进行劫持(代理)
//使用Object.defineProperty劫持属性,把属性转换成访问器的方式
/*
getter 获取属性触发的
setter 设置属性触发的
*/
let data = {
title: 'blog'
};
//定义属性,也可在原有的属性上描述(添加新的属性)
Object.defineProperty(data, 'myBlog', {
value: 'huanggr.cn'
})
//改变对象的属性值
let val = "新的值";
Object.defineProperty(data, 'title', {
//set设置之后get会再次获取,后面的 "//" 表示的就是程序执行的顺序
get() {
console.log('我访问数据了'); //1 //5
return val;
},
//不设置新值不会触发
set(newValue) {
console.log('我设置了新值'); //3
console.log(newValue); //4
val = newValue;
}
})
console.log(data.title + "-------"); //2
data.title = "111";
console.log(data.title); //6
</script> |
模仿Vue对数据进行处理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<button type="" id="btn">改变数据</button>
<h2 id="title">这是标题</h2>
</div>
</body>
</html>
<script type="text/javascript">
var data = {
title: "新闻",
myBlog: 'huanggr.cn'
};
//
observer(data);
function observer(obj) {
//Object.keys 拿到该对象上面的所有的key值
Object.keys(obj).forEach((item) => {
console.log(item + "======item");
defineReactive(obj, item, obj[item])
})
}
function defineReactive(obj, key, value) {
Object.defineProperty(obj, key, {
get() {
return value;
},
set(newValue) {
value = newValue;
//title变化,触发set,然后赋值
title.innerHTML = newValue;
}
})
}
console.log(data);
title.innerHTML = data.title;
btn.onclick = function () {
data.title = "数据变化了";
}
</script> |
一些方法
删除对象属性
1 2
| delect data.title //删除data对象的title属性
Object.keys(data) //获取data对象所有的下标 |
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"Object.defineProperty数据描述"
最新评论