Object.defineProperty方法详解（全面）
一、Object.defineProperty的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
二、Object.defineproperty方法需要传递3个参数
Object.defineproperty（obj, prop, desc ）
参数1：obj 属性所在的对象
参数2：prop 属性名
参数3：desc 描述符 一般是一个对象
一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性
value:"苏有朋", // 包含这个属性的数据值。默认值为undefined enumerable:true, //控制属性是否可以枚举，能否通过for in循环访问属性，默认值为false writable:true, //控制属性是否可以被修改，默认值是false configurable:true //控制能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。
Object.defineProperty(person,'name',{
value:"苏有朋", // 包含这个属性的数据值。默认值为undefined
enumerable:true, //控制属性是否可以枚举，能否通过for in循环访问属性，默认值为false
writable:true, //控制属性是否可以被修改，默认值是false
configurable:true //控制能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。
})
三、设置好configurable 这个属性，delete就不能把name属性给删除掉了。例：
let name = "苏有朋"
let person = {
age:20,
sex:'男',
}
Object.defineProperty(person,'age',{
configurable:false //控制属性是否可以被删除，默认值是false
})
四、通过给enumerable设置为false，这样对象就不能通过迭代器遍历出age这个属性的值了。
Object.defineProperty(person,'age',{
enumerable:false
})
for(var i in person){
console.log(person[i]);
}
五、最重要的两个属性 set和get（即存取器描述：定义属性如何被存取），这两个属性是做什么用的呢？
注意：当使用了getter或setter方法，不允许使用writable和value这两个属性(如果使用，会直接报错滴)
get 是获取值的时候的方法，类型为 function ，获取值的时候会被调用，不设置时为 undefined
set 是设置值的时候的方法，类型为 function ，设置值的时候会被调用，undefined
get或set不是必须成对出现，任写其一就可以。案例如下：
let name = "苏有朋"
let person = { age:20, sex:'男', }Object.defineProperty(person,'name',{
//value:"苏有朋", // 包含这个属性的数据值。默认值为undefined//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ console.log('有人读取age属性了') return name },
//enumerable:true, //控制属性是否可以枚举，能否通过for in循环访问属性，默认值为false //writable:true, //控制属性是否可以被修改，默认值是false //configurable:true //控制能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值 set(value){ console.log('有人修改了age属性，且值是',value) name = value }
console.log(person) }
六、如何自定义多个属性？例：
let person = {
name:"苏有朋"
}
let person2 = {};
Object.defineProperties(person2,{
name:{
writable:false,
value:"王心凌"
},
age : {
writable:true,
value : 16,
},
sex:{
get(){
return '女';
},
set(value){
person.sex = value
}
}
})
七、模拟Vue中v-module数据双向绑定的原理：（下面案例为了方便，摘取他人代码片段）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#myInput {
width: 400px;
height: 50px;
font-size: 40px;
color: red;
}
#contain {
margin-top: 20px;
width: 400px;
height: 200px;
border: 1px solid salmon;
}
</style>
</head>
<body>
<input id="myInput" type="text" />
<div id="contain"></div>
<script>
var text;
window.data = {};
var oIn = document.getElementById("myInput");
var oDiv = document.getElementById("contain");
oIn.addEventListener("input", function (e) {
text = e.target.value;
console.log(text);
window.data.value = text;
});
Object.defineProperty(window.data, "value", {
get() {
return "";
},
set(v) {
oDiv.innerHTML = v;
},
});
</script>
</body>
</html>
效果图为：
有不懂的请加qq群学习讨论：854184700
标签：false,Object,value,person,详解,defineProperty,默认值,属性 From： https://www.cnblogs.com/yaosusu/p/16622408.html