vue3.0都用Proxy 了,还不来学一波?

vue3.0 已经和大家见面了，在新的版本中 vue对于数据监听有了新的改动;使用了较为新的方案:Proxy 。此文章不涉及到 vue部分（手动狗头），即是一次复习也是一次记录；以下内容为阮一峰-proxy文档整理 阮一峰-proxy文档

概述

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

实例方法 (13种)

get(target, propKey, receiver)
set(target, propKey, value, receiver)
has(target, propKey)
deleteProperty(target, propKey)
ownKeys(target)
getOwnPropertyDescriptor(target, propKey)
defineProperty(target, propKey, propDesc)
preventExtensions(target)
getPrototypeOf(target)
isExtensible(target)
setPrototypeOf(target, proto)
apply(target, object, args)
construct(target, args)

get()

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

var superStar = {
  name: "渣渣辉"
};

var proxy = new Proxy(superStar, {
  get: function(target, propKey,receiver) {
    console.log(target) // superStar 对象 
    console.log(propKey) // name 属性
    console.log(receiver) // 当前操作Proxy 对象
    console.log(proxy == receiver) //true
  }
});
proxy.name
复制代码

set()

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

var superStar = {
 name: "渣渣辉"
};

var proxy = new Proxy(superStar, {
  set: function(target, propKey,value,receiver) {
    console.log(propKey) // name 属性
    console.log(value) // 张加辉
  }
});

proxy.name =  '张加辉'
复制代码

如果目标对象自身的某个属性，不可写且不可配置，那么set方法将不起作用。严格模式下，set代理如果没有返回true，就会报错。set代理返回false或者undefined，都会报错。

apply()

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

apply方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。

var say = function(str){
  console.log(`${str} 我是渣渣辉`)
}
 
var proxy = new Proxy(say, {
  apply: function(target, cont,arys) {
    console.log(target) // 目标方法
    console.log(arys) //['大家好']
  }
});

proxy('大家好')
复制代码

直接调用Reflect.apply方法，也会被拦截。

has()

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

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

var superStar = {
  bigName: "渣渣辉",
  smallName:"辉"
};

var proxy = new Proxy(superStar, {
  has(target, key) {
    if(key == 'smallName'){
      return false
    }
    return key in target;
  }
});

console.log('bigName' in proxy) // true
console.log('smallName' in proxy) // false
复制代码

如果原对象不可配置或者禁止扩展，这时has拦截会报错Object.preventExtensions(target)

如果某个属性不可配置（或者目标对象不可扩展），则has方法就不得“隐藏”（即返回false）目标对象的该属性。

has拦截只对in运算符生效，对for...in循环不生效，导致不符合要求的属性没有被for...in循环所排除。

construct()

construct方法用于拦截new命令，接受两个参数目标对象和构造函数的参数对象。

var say = function(){};

var proxy = new Proxy(say, {
  construct:function() {
   return {value:'我是渣渣辉'}
  }
});

console.log(new proxy().value) //我是渣渣辉
复制代码

construct方法返回的必须是一个对象，否则会报错。

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
复制代码

目标对象自身的不可配置（configurable）的属性，不能被deleteProperty方法删除，否则报错。

defineProperty()

defineProperty方法拦截了Object.defineProperty操作

var handler = {
  defineProperty (target, key, descriptor) {
    return false; //返回false 设置属性不会生效
  }
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar' // 不会生效
复制代码

如果目标对象不可扩展（non-extensible），则defineProperty不能增加目标对象上不存在的属性，否则会报错。另外，如果目标对象的某个属性不可写（writable）或不可配置（configurable），则defineProperty方法不得改变这两个设置。

getOwnPropertyDescriptor()

getOwnPropertyDescriptor方法拦截Object.getOwnPropertyDescriptor()，返回一个属性描述对象或者undefined

var handler = {
  getOwnPropertyDescriptor (target, key) {
    if (key[0] === '_') {
      return;
    }
    return Object.getOwnPropertyDescriptor(target, key);
  }
};
var target = { _foo: 'bar', baz: 'tar' };
var proxy = new Proxy(target, handler);
Object.getOwnPropertyDescriptor(proxy, '_foo')
// undefined
Object.getOwnPropertyDescriptor(proxy, 'baz')
// { value: 'tar', writable: true, enumerable: true, configurable: true }

复制代码

getPrototypeOf()

getPrototypeOf方法主要用来拦截获取对象原型。具体来说，拦截下面这些操作。

Object.prototype.proto
Object.prototype.isPrototypeOf()
Object.getPrototypeOf()
Reflect.getPrototypeOf()
instanceof

var proto = {};
var p = new Proxy({}, {
  getPrototypeOf(target) {
    return proto;
  }
});
Object.getPrototypeOf(p) === proto // true
复制代码

注意，getPrototypeOf方法的返回值必须是对象或者null，否则报错。另外，如果目标对象不可扩展（non-extensible）， getPrototypeOf方法必须返回目标对象的原型对象。

isExtensible()

isExtensible方法拦截Object.isExtensible操作。

var p = new Proxy({}, {
  isExtensible: function(target) {
    console.log("called");
    return true;
  }
});

Object.isExtensible(p) // true

复制代码

该方法只能返回布尔值，否则返回值会被自动转为布尔值。

这个方法有一个强限制，它的返回值必须与目标对象的isExtensible属性保持一致，否则就会抛出错误。

Object.isExtensible(proxy) === Object.isExtensible(target)
复制代码

ownKeys()

ownKeys方法用来拦截对象自身属性的读取操作。具体来说，拦截以下操作。

Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.keys()
for...in循环

let target = {
  a: 1,
  b: 2,
  c: 3
};

let handler = {
  ownKeys(target) {
    return ['a']; //target 有的属性 
  }
};

let proxy = new Proxy(target, handler);
Object.keys(proxy)

//['a']
复制代码

ownKeys方法返回的数组成员，只能是字符串或 Symbol 值。如果有其他类型的值，或者返回的根本不是数组，就会报错。

如果目标对象自身包含不可配置的属性，则该属性必须被ownKeys方法返回，否则报错。

如果目标对象是不可扩展的（non-extensible），这时ownKeys方法返回的数组之中，必须包含原对象的所有属性，且不能包含多余的属性，否则报错。

preventExtensions()

preventExtensions方法拦截Object.preventExtensions()。该方法必须返回一个布尔值，否则会被自动转为布尔值

这个方法有一个限制，只有目标对象不可扩展时（即Object.isExtensible(proxy)为false），proxy.preventExtensions才能返回true，否则会报错。

var proxy = new Proxy({}, {
  preventExtensions: function(target) {
    return true;
  }
});

Object.preventExtensions(proxy)
// Uncaught TypeError: 'preventExtensions' on proxy: trap returned truish but the proxy target is extensible
复制代码

上面代码中，proxy.preventExtensions方法返回true，但这时Object.isExtensible(proxy)会返回true，因此报错。

为了防止出现这个问题，通常要在proxy.preventExtensions方法里面，调用一次Object.preventExtensions。

setPrototypeOf()

setPrototypeOf方法主要用来拦截Object.setPrototypeOf方法。

var handler = {
  setPrototypeOf (target, proto) {
    throw new Error('Changing the prototype is forbidden');
  }
};
var proto = {};
var target = function () {};
var proxy = new Proxy(target, handler);
Object.setPrototypeOf(proxy, proto);
// Error: Changing the prototype is forbidden
复制代码

上面代码中，只要修改target的原型对象，就会报错。

注意，该方法只能返回布尔值，否则会被自动转为布尔值。另外，如果目标对象不可扩展（non-extensible），setPrototypeOf方法不得改变目标对象的原型。