通过Object.defineProperty向数组中添加属性和值
1、只能被调用，但不参与遍历数组，也就是遍历数组，遍历不到这个键Key值.如果想被遍历，增加enumerable:true // 是否可以遍历
2、默认不能被修改，如果想修改，需要加上writable:true
3、默认不能被删除，如果想删除，需要加上：configurable:true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Hello World</title>
<script src="vue.js"></script>
</head>
<body>
</body>
<script>
let bpp = {
message: 'Hello world',
name: "张飞",
sex: "男",
age:"18岁"
}
let app = {
message: 'Hello world',
name: "张飞",
sex: "男"
}
// 通过Object.defineProperty向app的数组中添加属性和值
Object.defineProperty(app, "age", {
value: "18岁",
enumerable:false, // 是否可以遍历
writable:false, // 是否可以被修改
configurable:false // 是否被删除
})
console.log("===【bpp】原数组====");
console.log(bpp);
console.log("===【app】defineProperty数组====");
console.log(app);
console.log("===【遍历bpp】原数组====");
console.log(Object.keys(bpp));
console.log("===【遍历app】defineProperty数组====");
console.log(Object.keys(app));
</script>
</html>二、通过Object.defineProperty向数组中添加属性，把【值】设成一个动态函数返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Hello World</title>
<script src="vue.js"></script>
</head>
<body>
</body>
<script>
let old_1 = 18;
let old_2=2;
let app = {
message: 'Hello world',
name: "张飞",
sex: "男"
}
// 通过Object.defineProperty向app的数组中添加属性和值
Object.defineProperty(app, "age", {
get: function () {
return old_1+old_2;
}
})
</script>
</html>三、数据代理简单示例
数据代理：通过一个对象代理 对另一个对象中的属性和值操作（读和写操作）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Hello World</title>
<script src="vue.js"></script>
</head>
<body>
</body>
<script>
// 数据代理：通过一个对象代理 对另一个对象中的属性和值操作（读和写操作）
let obj_1 = { x: 88 };
let obj_2 = { y: 200 };
Object.defineProperty(obj_2, 'z',{
get() {
return obj_1.x;
},
set(value) {
obj_1.x = value;
// 通过修改obj_2.z的值来自动修改obj_1.x的值
}
})
</script>
</html>
