Object.defineProperty数据描述

2017-06-11 分类：Vue 作者：huanggr 阅读（1356）

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>