proxy与Object.defineProperty

1.proxy

• 名称：代理
• 作用：外界访问目标对象时，添加的一层拦截。
• 如何使用：（Proxy 支持的拦截操作一共 13 种,当handler={}时，就相当于正常的对象操作流程，没有拦截处理这一层）。

var obj={
  name:"易洋千玺",
  skill:"can do anything"
}
var handler={
 set(target,key,value){
     target[key]=value;
 },
 get(target,key){
    if(key=="name"){
     return "少年的你"
    }
      return target[key];
 }
}
 var p = new Proxy(obj, handler);
 p.name;//少年的你
 p.skill="sing";
 p.skill;//sing
//var p = new Proxy(target, handler);
//handler表示的就是对应的拦截处理
//target表示目标对象

• 问题：能否正常拦截处理数组对象呢：

var arr=[];
var handler={
    set(target,key,value){
        debugger;
        console.log("setting进行中");
        if(typeof value !="number"){
            console.log("请输入数字");
            return true;
        }

        target[key]=value;
        return true 
    },
    get(target,key){
        console.log("getting进行中");
        return target[key];
    }
}
var p=new Proxy(arr,handler);
p.push(1);
//上述操作调用了两遍set,和get,第一次get表示获取数组的push方法，第二次get表示获取数组的长度，
//第一次的set表示设置数组具体项的值，第二次的set表示设置数组的长度,此情况下，在对set进行拦截处理时需要添加return true，否则会报错。
arr//[1];

2.Object.defineProperty:

• 作用：此方法会在当前对象上新添加一个属性或者对现有的属性进行修改并返回这个对象。
• 如何使用：

Object.defineProperty(obj,key,handler);
obj表示要进行属性监听的目标对象；
key表示新添加的属性或者是当前对象的现有属性
handler表示具体的处理对象：(拥有的属性如下：

拥有布尔值的键 configurable、enumerable 和 writable 的默认值都是 false。 属性值和函数的键
value、get 和 set 字段的默认值为 undefined。

• 实例：

demo1:

//首先介绍以下几个比较基础的属性：configurable，enumerable，writable

var obj={};
Object.defineProperty(obj,"tag",{
    writable:false,//该属性是否可以修改
    value:"star"

});
obj.tag="singer";
console.log(obj.tag);//star

demo2:

Object.defineProperty(obj,"tag",{
    writable:false,//该属性是否可以修改
    enumerable:false,//该属性是否可以枚举
    configurable:false,//该属性为true时，对象的属性才能被删除。
    value:"star"

});
for(let key in obj){
 console.log(key,obj[key]);
 }
 //结果是undefined,表明当前对象不可枚举--
delete obj.tag//false
console.log(obj.tag);//{tag:"star"},说明当前对象的属性无法删除。

demo3:

//此处介绍get和set:
//目标是：当或取对象的名称时，获取的只是对应的昵称，不能获取真正的名字。但可以修改自己的名字。
var obj={name:"易洋千玺"};
var v="";
Object.defineProperty(obj,"name",{
  set(data){//这里的参数就是用户实际设置的值
     v=data;
  },
  get(){
     return "singer"; 
  }
});
console.log(obj.name);//singer

• 问题：

  • 在处理数组上有什么问题:

var obj={
   
};
var v="";
Object.defineProperty(obj,"arr",{
    set(data){
      console.log("setting now...");
      v=data;
    },
    get(){
        console.log("getting now...");
        return v;
    }
});
obj.arr=[];
obj.arr.push(1);//只触发了对应的getting,并没有触发setting.