-
Notifications
You must be signed in to change notification settings - Fork 1
/
Object.defineProperty.html
168 lines (149 loc) · 3.39 KB
/
Object.defineProperty.html
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var pattern = {
get: function () {
console.log('I alway return this string,whatever you have assigned')
return 'I alway return this string,whatever you have assigned';
},
set: function () {
this.myname = 'this is my name string';
}
}
function TestDefineSetAndGet() {
Object.defineProperty(this, 'myproperty', pattern);
}
var instance = new TestDefineSetAndGet();
instance.myproperty = 'test';
instance.myproperty = 'test2';
// 'I alway return this string,whatever you have assigned'
// console.log(instance.myproperty);
// 'this is my name string'
// console.log(instance.myname);
//和new Proxy 类似 监控属性变化
var bValue;
var o = {}
o.b = 3
Object.defineProperty(o, "b", {
get : function(){
console.log('this',this)
console.log(bValue)
return bValue;
},
set : function(newValue){
console.log('set')
console.log('obj43')
console.log(newValue)
bValue = newValue;
},
enumerable : true,
configurable : true
});
o.b = 38;
console.log(o.b)
var bValuea;
var oa = [0]
Object.defineProperty(oa, 0, {
get : function(){
console.log('arr define')
return bValue;
},
set : function(newValue){
console.log('set define')
console.log(newValue)
bValue = newValue;
},
enumerable : true,
configurable : true
});
oa[0] = 38;
oa.push(3)
// console.log(oa)
// / 还是老套路，定义一个observe方法
function defineReactive(data, key, val) {
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function defineGet() {
console.log(`get key: ${key} val: ${val}`)
return val
},
set: function defineSet(newVal) {
console.log(`set key: ${key} val: ${newVal}`)
// 还记得我们上面讨论的闭包么
// 此处将新的值赋给val，保存在内存中，从而达到赋值的效果
val = newVal
}
})
}
function observe(data) {
let c = []
Object.keys(data).forEach(function(key) {
c.push(key)
defineReactive(c, key, c[key])
})
}
let test = [1, 2, 3]
// 初始化
observe(test)
var a = {};
bValue =1;
Object.defineProperty(a,"b",{
set:function(value){
bValue = value;
console.log("setted");
},
get:function(){
return bValue;
}
});
console.log(a.b); //1
a.b=[]; //setted
a.b=[1,2,3]; //setted
a.b[1]=10; //无输出
a.b.push(4); //无输出
a.b.length=5; //无输出
console.log(a.b); //[1,10,3,4,undefined];
/*--------------------
对象
可以检测到
数组同一个下标 def 可以检测到
push
length
不同下标不能检测
----------------------*/
let acd = {c: 1};
Object.defineProperty(acd, "c",{
set:function(value){
console.log("setted");
},
get:function(v){
console.log(v)
}
});
acd.c = 3;
console.log(acd)
const obj = {name: 'yyyy'};
let initValue = 'kongzhi';
Object.defineProperty(obj, 'name', {
// 当我们使用 obj.name 获取该值的时候，会自动调用 get 函数
get: function() {
return initValue;
},
set: function(value) {
console.log('setName');
initValue = value;
}
});
// 我们来获取值，会自动调用 Object.defineProperty 中的 get函数方法。
console.log(obj.name); // 打印出kongzhi
// 设置值的话，会自动调用 Object.defineProperty 中的 set方法。
obj.name = 'xxxxx';
console.log(obj); // 打印出 xxx
</script>
</html>