ES6之Proxy

简介

Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种"元编程"（meta programming），即对编程语言进行编程。

Proxy可以理解为，在目标对象之前架设一层"拦截"，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy这个词的原意是代理，用在这里表示由它来"代理"某些操作，可以译为"代理器"。

简单来说Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

var obj = new Proxy({}, {
  get: function (target, propKey, receiver) {
    console.log(`getting ${propKey}!`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {
    console.log(`setting ${propKey}!`);
    return Reflect.set(target, propKey, value, receiver);
  }
});

上面代码对一个空对象架设了一层拦截，重定义了属性的读取（get）和设置（set）行为。这里暂时先不解释具体的语法，只看运行结果。对于设置了拦截行为的对象obj，去读取它的属性，就会得到下面的结果。

let obj
obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

上面代码说明，Proxy实际上重载了点运算符，即用自己的定义覆盖了语言的原始定义。

语法

ES6原生提供Proxy构造函数，用来生成Proxy实例。

var proxy = new Proxy(target, handler);

参数

target

要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）

handler

一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行个操作时代理P的行为

handler对象的方法

handler对象是一个容纳一批特定属性的占位符对象。它包含有Proxy的各个捕获器trap。
所有的捕捉器是可选的。如果没有定义某个捕捉器，那么就会保留源对象的默认行为。
下面是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, peopDescs)，返回一个布尔值
• 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()

get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和proxy实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选

let person = {
    name: '张三'
};

let proxy = new Proxy(person, {
    get: function(target, propKey){
        if(propKey in target){
            return target[propKey]
        }else{
            throw new ReferenceError("Prop name " + propKey + " does not exist.");
        }
    }
})

proxy.name // "张三"
proxy.age // Uncaught ReferenceError: Prop name age does not exist.

get方法可以继承。

let student = Object.create(proxy)

student.name // "张三"
student.age // Uncaught ReferenceError: Prop name age does not exist.

因为拦截操作定义在Prototype对象上，所以如果读取student对象继承的属性时，拦截器会生效。

set()

set方法用来拦截某个属性的赋值操作，可以接受四个参数，依次为目标对象、属性名、属性值和Proxy实例本身，其中最后一个参数可选。

有时，我们会在对象上面设置内部属性，属性名的第一个字符使用下划线开头，表示这些属性不应该被外部使用。结合get和set方法，就可以做到防止这些内部属性被外部读写。

const handler = {
    get(target, key){
        invariant(key, 'get');
        return target[key]
    },
    set(target, key, value){
        invariant(key, 'set');
        target[key] = value;
        return true
    }
}

function invariant (key, action){
    if(key[0] === '_'){
        throw new Error(`Invalid attempt to ${action} provate "${key}" property`);
    }
}

const target = {
    _prop: 1,
    prop: 2
}
const proxy = new Proxy(target, handler);

proxy.prop // 2
proxy.prop = 'c' // c
proxy._prop	// Uncaught Error: Invalid attempt to get provate "_prop" property
proxy._prop = 'c' // Uncaught Error: Invalid attempt to set provate "_prop" property

注意，如果目标对象自身的某个属性不可写，那么set方法将不起作用。

apply()

apply方法拦截函数的调用、call和apply操作。
apply方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。

var twice = {
  apply (target, ctx, args) {
    return Reflect.apply(...arguments) * 2;
  }
};
function sum (left, right) {
  return left + right;
};
var proxy = new Proxy(sum, twice);
proxy(1, 2) // 6
proxy.call(null, 5, 6) // 22
proxy.apply(null, [7, 8]) // 30

我们可以看到当我们执行proxy函数时，或者通过call、apply来执行该函数，都会触发apply拦截。

has()

has()方法用来拦截HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。

has()方法可以接受两个参数，分别是目标对象、需查询的属性名。

我们可以使用has()方法隐藏某些属性，不被in运算符发现。

var handler = {
  has (target, key) {
    if (key[0] === '_') {
      return false;
    }
    return key in target;
  }
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
'_prop' in proxy // false

值得注意的是，has()方法拦截的是HasProperty操作，而不是HasOwnProperty操作，即has()方法不判断一个属性是对象自身的属性，还是继承的属性。

construct()

construct()方法用于拦截new命令，下面是拦截对象的写法。

const handler = {
  construct (target, args, newTarget) {
    return new target(...args);
  }
};

construct()方法可以接受三个参数。

• target: 目标对象。
• args: 构造函数的参数数组。
• newTarget: 创建实例对象时，new命令作用的构造函数

deleteProperty()

deleteProperty方法用于拦截delete操作，如果这个方法抛出错误或者返回false，当前属性就无法被delete命令删除

var handler = {
  deleteProperty (target, key) {
    invariant(key, 'delete');
    delete target[key];
    return true;
  }
};
function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}

var target = { _prop: 'foo' };
var proxy = new Proxy(target, handler);
delete proxy._prop
// Error: Invalid attempt to delete private "_prop" property

剩下的api就不一一介绍了，有用到的可以看mdnhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

代理嵌套对象问题

当我们代理嵌套对象，深层修改对象是否能够监听到呢。

const handler = {
    get(target, key){
        console.log('get ' + key)
        invariant(key, 'get');
        return target[key]
    },
    set(target, key, value){
        console.log(target, 'set ' + key, value)

        invariant(key, 'set');
        target[key] = value;
        return true
    }
}

function invariant (key, action){
    if(key[0] === '_'){
        throw new Error(`Invalid attempt to ${action} provate "${key}" property`);
    }
}

const target = {
    _prop: 1,
    prop: {
        a: 1,
        b: {
            c: 2
        }
    }
}
const proxy = new Proxy(target, handler);
proxy.prop.b.c = 3 // get prop

我们发现只能触发proxy的第一层get，并不能触发set。我们发现proxy并不能直接深层监听访问和修改，那么vue3.0是怎么做到深度监听数据修改呢？

我们我们发现不管是深层访问还是深层修改，都会触发get，那么我们直到在get中去判断目标对象被访问的属性值为对象，则重新为其创建为一个proxy代理对象并返回出来。那么就会一层层触发get，直到最后一层，就可以得到我们想要的结果，具体看代码。

const handler = {
    get(target, key){
        console.log('get ' + key)
        invariant(key, 'get');
        if(target[key].constructor === Object){
            return new Proxy(target[key], handler);
        }
        return target[key]
    },
    set(target, key, value){
        console.log(target, 'set ' + key, value)

        invariant(key, 'set');
        target[key] = value;
        return true
    }
}

function invariant (key, action){
    if(key[0] === '_'){
        throw new Error(`Invalid attempt to ${action} provate "${key}" property`);
    }
}

const target = {
    _prop: 1,
    prop: {
        a: 1,
        b: {
            c: 2
        }
    }
}
const proxy = new Proxy(target, handler);
proxy.prop.b.c = 3
/*
get prop
get b
{c: 2} 'set c' 3
*/