浅谈JavaScript对象属性的特性和defineProperty方法

var obj = {name:'zwq',age:18};
console.log(Object.getOwnPropertyDescriptor(obj,'name')); //name属性属性
//{value: "zwq", writable: true, enumerable: true, configurable: true}

console.log(Object.getOwnPropertyDescriptor(window,'name')); //window上的name属性时访问器属性
//enumerable: true, configurable: true, get: ?, set: ?}

var obj = {name:'zwq',age:18};

 Object.defineProperty(obj,'name',{ 修改name属性的特性，值为haha,并且name属性不能修改值
 value:'haha',
 writable:false //默认值是true，改为false，不可写。
 })

 Object.defineProperty(obj,'sex',{创建一个sex属性，这个属性不可枚举
 value:'woman',
 writable:true,
 configurable:true,
 })

function Person(){
 this._name = 'zwq',
 this.age = 18
 }
 var person = new Person();
 
 
 Object.defineProperty(person,'name',{
 set(newValue){
 console.log('set');
 this._name = newValue //设置或修改属性时，会调用set函数，把设置的值通过参数传进去后，用一个变量或属性保存。并且当调用get，return就是返回的这个值
 },
 get(){
 return this._name; //当读取属性时 返回return的值
 }
 
 })

//检测对象的变化。
　　　　 var input = document.getElementById('Oinput');
 var view = document.getElementById('view');

 var data = {
 valueObj :{
 value:'zwq'
 }
 }
 //当输入框数据发生改变时，数据跟着改变
 input.oninput = function(){
 data.valueObj.value = this.value;
 }
 
 // 更新视图
 function upData(){ 
 view.innerText = data.valueObj.value;
 }
 
 upData(data);
 obServe(data);

 // 监控某个对象是否发生改变
 function obServe(data){
 //判断当前传的是否是对象，如果不是，直接return
 if(!data || !(data instanceof Object)){return data}
 　　　　　　//获取所有属性名。使用keys方法可以获取所有属性名（包括原型上的）并保存带数组中
 var arrProperty = Object.keys(data);
　　　　　　 //遍历数组，调用defindRective检测每一个属性值的改变　
 arrProperty.forEach(function(key){
　　　　　　　　　　defindRective(data,key,data[key]); //传入3个参数，当前对象，当前属性，当前属性值
 })
 }

 function defindRective(obj,key,val){
 obServe(val); //使用递归，当想上面的数组，对象套对象的形式，由于里面的对象是一个引用值，无法检测里面的数据变化，所以使用递归。
 Object.defineProperty(obj,key,{ //核心:使用Object,definPropert的set检测数据的改变。
 set(newValue){
 console.log(5);
 if(newValue == val) return val;
 val = newValue;
 upData(); //当数据变化，跟新视图
 },
 get(){
 return val;
 }
 })
 }

// 监测数组，将数组原型重写
// 当操作数组的arr push pop unshift slice...才会检测
 let {push} = Array.prototype;
 var arr = [1,2,3];
 function upData(){
 console.log('更新');
 }
 Object.defineProperty(Array.prototype,'push',{
 value:(function(){
 return (...arg) => {
 upData();
 push.apply(arr,arg);
 }
 })()
 })
 arr.push(8,9);

let data = {
 value:'zwq',
}
// let data = [1,2]；
let oProxyData = new Proxy(data,{
 set(target,key,value,receiver){ //传入4个参数 对象 属性 属性值 代理的对象
 // target[key] = value;
 Reflect.set(target,key,value); //等同于上一步
 upData();
　　},
 get(target,key,receiver){
 // console.log(target,key);
 Reflect.get(target, key);
 },
 has(target,key){ //当使用in时触发当前函数。
 return key in target; //in --检测对象能否访问该属性，能访问返回true，不能false，无论是在实例还是原型中。
 }
});

console.log('valu' in oProxyData);

function upData(){
 console.log("更新啦");
}

oProxyData.value = 20;