Proxy - 学习笔记

var proxy = new Proxy({}, {
    get: function (target, propKey) {
        console.log('target:', target, ' propKey:', propKey)
        return 111
    }
})
console.log(proxy.time)
console.log(proxy.a)
// 注意，要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是空对象）进行操作。

//-------------------------------------------------------------------------
var handler = {
    get: function (target, name) {
        if (name === 'prototype') {
            return Object.prototype;
        }
        return 'Hello, ' + name;
    },

    apply: function (target, thisBinding, args) {
        return args[0];
    },

    construct: function (target, args) {
        return { value: args[1] };
    }
};

var fproxy = new Proxy(function (x, y) {
    return x + y;
}, handler);

fproxy(1, 2) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo === "Hello, foo" // true
//-------------------------------------------------------------------------
// 
// 
// 下面是 Proxy 支持的拦截操作一览，一共 13 种。

//     get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy['foo']。
//     set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值。
//     has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
//     deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
//     ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
//     getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
//     defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
//     preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
//     getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
//     isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
//     setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
//     apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。
//     construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

//-------------------------------------------------------------------------
// get()
// 可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象)
var person = {
    name: 'zhangsan'
}

var proxy = new Proxy(person, {
    get: function (target, propKey) {
        if (propKey in target) {
            return target[propKey]
        } else {
            return '不存在这个属性'
        }
    }
})
console.log(proxy.name)
console.log(proxy.age)

//get方法可以继承
const obj = Object.create(proxy)
console.log(obj.name)
obj.name = 'lisi'
console.log(obj.name)
//-------------------------------------------------------------------------




//-------------------------------------------------------------------------
// set()
// set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。
let person = new Proxy({}, {
    set: function (target, key, value) {
        if (key == 'age') {
            if (value <= 200) {
                target[key] = value
                return true
            } else {
                throw new RangeError('这年龄太大了');
            }
        }
    }
})
person.age = 2200
//-------------------------------------------------------------------------



//-------------------------------------------------------------------------

// apply()
// apply方法拦截函数的调用、call和apply操作。 可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。
var target = function () { return 'I am the target'; };
var handler = {
    apply: function () {
        return 'I am the proxy';
    }
};

var p = new Proxy(target, handler);

p()//拦截了函数的调用
// "I am the proxy"

//-------------------------------------------------------------------------