Proxy 对象拦截器

Proxy 对象拦截器

“ ES6的对象拦截器，可以拦截哪些情况呢**”**

01 前言

---

自从ES6诞生以来，各种新特性也逐渐显现出来，比如ES6中的Proxy对象，是一个重要的技术。之前Vue的数据双向数据绑定是使用Object.defineProperty()来做的，而现在vue3.0使用的是代理Proxy来编写。原因是前者有一些对象或者数组的变化是监听不了的，但是Proxy可以监听整个对象。

Proxy可以理解为，当你试图访问一个对象的时候必须先经过一个拦截或者代理，你才可以进行对对象的操作。这种机制的好处就是可以对外界的访问进行过滤和改写。

02 Proxy实例的方法

---

proxy实例的构造

ES6提供一个原生的Proxy构造函数，用于生成Proxy实例。

var proxy = new Proxy ( target, handler ) ;

参数解析：

• target：所要拦截（代理）的对象
• 处理函数，拦截对应的操作

利用Proxy对象可以拦截的方法有一下13种，下面一一来介绍一下。

1、get()

get方法是意思是读取对象，那么相应的拦截就是在读取对象的时候进行拦截。

var person = {
   
    name:'alanwu'
}
var proxy = new Proxy(person, {
   
    get:function(target, property){
   
        if(property in target){
   
            return target[property]
        }else{
   
            throw new Error('对象属性不存在')
        }
    }
})
proxy.name  //'alanwu'
proxy.age   //错误

假如上述代码访问不存在的属性的时候，没有抛出错误的话就会返回undefined。

2、set()

set拦截操作用于拦截对对象赋值的操作。

const obj = {
   
    a: 101,
    b: 46,
    c: 200
}
var proxy = new Proxy(obj, {
   
    set(target, key, value) {
   
        if (value < 100) {
   
           throw Error(`${
     value}值不能小于100`)
        } 
        target[key] = value
    }
})

3、apply()

apply方法用于拦截函数的调用、call、apply操作。

const sum = (num1, num2) =>