es6 Proxy代理的常用拦截方法

代理

proxy在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截

var proxy = new Proxy(target, handler);

new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为

常用拦截方法

1.get 拦截对象属性的读取

let arr = [7, 8, 9];
arr = new Proxy(arr, {
    get(target, prop) {
        return prop in target ? target[prop] : 'error'
    }
})
console.log(arr[3]) //error
console.log(arr[1]) //8

2.set 拦截对象属性的设置，返回一个布尔值

let arr = [7, 8, 9];
newArr = new Proxy(arr, {
    set(target, prop, val) {
        if (typeof(val) === 'number') {
            target[prop] = val
            return true
        } else {
            return false
        }
    }
})
newArr.push(2)
console.log(newArr[1]) //8
console.log(arr) //[7, 8, 9, 2]
newArr.push(11)
console.log(arr) //[7, 8, 9, 2, 11]

3.has 拦截propKey in proxy 的操作，返回一个布尔值

let range = {
    start: 1,
    end: 5,
}

range = new Proxy(range, {
    has(target, prop) {
        return prop >= target.start && prop <= target.end;
    }
})
console.log(3 in range) //true
console.log(6 in range) //false

4. ownKeys 拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbol(proxy)、Object.keys(proxy)、 for.....in循环返回一个数组

let userinfo = {
    username: 'kiw',
    age: 18,
    _password: '***',
    [Symbol()]: '我是唯一的',
};

let p = new Proxy(userinfo, {
    ownKeys(target) {
        return Object.keys(target).filter(item => {
            return !item.startsWith('_')
        })
    }
})

console.log(Object.getOwnPropertyNames(p)) //["username", "age"]
console.log(Object.getOwnPropertySymbols(p)) //[]
console.log(Object.keys(p)) //["username", "age"]

for (const key in p) {
    const element = p[key];
    console.log(element) //kiw 18
}

5. deleteProperty 拦截delete proxy[propKey]的操作，返回一个布尔值

let obj = {
    username: 'kiw',
    age: 18,
}
let p = new Proxy(obj, {
    deleteProperty(target, prop) {
        delete target[prop]
        return true
    }
})
delete p.age;
console.log(obj) //{username:"kiw"}

6.apply 拦截函数的调用、call和apply操作

let sum = function(...args) {
    let count = 0;
    args.forEach((item) => {
        count += item
    })
    return count;
};

let p = new Proxy(sum, {
    apply(target, ctx, args) {
        return target(...args) * 2
    }
})
console.log(p(1, 2, 3, 4)) //20
console.log(p.call(null, 1, 2, 3, 4)) //20
console.log(p.apply(null, [1, 2, 3, 4])) //20

7.construct 拦截new命令，返回一个对象

let User = class {
    constructor(name) {
        this.name = name;
    }
}

User = new Proxy(User, {
    construct(target, args, newTarget) {
        return new target(...args)
    }
})

console.log(new User('kiw')) //{name: "kiw"}

proxy的作用

• 拦截和监视外部对对象的访问
• 降低函数或类的复杂度
• 在复杂操作前对操作进行校验或对所需资源进行管理