对象中的属性四大特征以及getter,setter

const obj = { ID: "01", Name: "张三", } obj.ID = "02"; obj.age = 20; delete (obj.Name); /* obj={ ID:"02", age:20 } */

在上面我们可以看出数据被直接添加，修改，删除，特别是ID。数据的创造的确就是为了增删改，但如何将一些数据变为私有的了？

defineProperty（）方法， defineProperties（）方法

用来修改对象中属性的特征,总体共四个特征分别为：

value 实际存储属性值writable 是否可以修改enumerable 是否可被枚举configurable 是否可修其他属性特征(value,writable,configuable)

当我们去改写特征是我们得将严格模式开启，将静默错误提升至报错（写在JS代码第一行或函数第一行 ‘user strict’）

'user strict' //定义一个对象 const obj = { Id: 1, Name: "张三", sex: "男", age: 20, fun() { console.log(`欢迎${this.Name}`); } } //defineProperties（）方法与 defineProperty（）方法意思一样，前者是对多个属性的设置，所以我们直接用前者 /* defineProperties接收两个参数（target(目标对象),{修改属性：{特征}}） defineProperty接收三个参数(target(目标对象),目标属性,{特征}) */ Object.defineProperties(obj, { Id: { writable: false,//为false时，属性的值就不能被重写,只能为只读了 enumerable: false//当为false时，则该属性不能被枚举 }, Name: { value: "李四" }, sex: { value:"男", configurable: false,//总开关 } }); console.log(obj);//Name属性值是否被修改 改变 obj["Id"] = 2 console.log(obj);//Id属性值是否只能读 没变 for (const key in obj) { console.log(key)//ID是否会被枚举 未被枚举 } Object.defineProperty(obj, "sex", { value:'女', configurable: true, })//当我试图改变时，会报错

还有一个sex属性的总开关

//之前设置fasle,再去改为true时 Object.defineProperty(obj, "sex", { configurable: true, })//当我试图改变时，会报错 //在哪设置，在哪修改

结果： /* 注：如果通过设置特征添加了属性，四个特征的默认值为false；而命名添加的属性（直接通过对象.写入的属性）四个特征的默认值 true */

'user strict' const obj = { ID: 1, Name: "张三" } //命名添加 obj.sex = "男"; //特征添加 Object.defineProperty(obj, "age", { value: 21 }) /* Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符 设置有多个，查看也不例外 Object.getOwnPropertyDescriptors()方法返回指定对象上多个自有属性对应的属性描述符 getOwnPropertyDescriptor两个参数目标对象，目标函数 getOwnPropertyDescriptors任意对象 */ console.log(Object.getOwnPropertyDescriptors(obj));

---

getter，setter 可以用来对数据进行双向绑定

<input type="text" id="username" placeholder="请输入姓名" value=""> <input type="text" id="usersex" placeholder="请输入性别" value=""> <script> const user = { }; Object.defineProperties(user, { name: { get() { return username.value; }, set(val) { username.value = val; } }, sex: { get() { return usersex.value; }, set(val) { usersex.value = val; } } }) for (let i = 0; i < 2; i++) { document.getElementsByTagName("input")[i].onblur = function () { console.log(user) } }; </script>

当你改变输入框内的值时，对象你面的值也会改变，对象改变，输入框内的值也会改变