一、 代理Proxy
1. 介绍
1. Proxy又称为代理。在现实生活中，大家对代理二字并不会太陌生，比如某产品的代理。打个比方来说，我们要买一台手机，我们不会直接到一家手机厂去买，会在手机的代理商中买。
2. 在JavaScript中，Proxy用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种元编程，即对编程语言进行编程。
3. Proxy可以理解成，在目标对象之前架设一层拦截，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy这个词的原意是代理，用在这里表示由它来代理某些操作，可以译为代理器。
2. 基本语法
1 // @param {Object} target 用来被代理的对象
2 // @param {Object} handler 用来设置代理的对象
3 let proxy = new Proxy(target, handler)
1 Proxy，见名知意，其功能非常类似于设计模式中的代理模式，该模式常用于三个方面：
2 拦截和监视外部对对象的访问
3 降低函数或类的复杂度
4 在复杂操作前对操作进行校验或对所需资源进行管理
5 在支持 Proxy 的浏览器环境中，Proxy 是一个全局对象，可以直接使用。Proxy(target, handler) 是一个构造函数，target 是被代理的对象，handlder 是声明了各类代理操作的对象，最终返回一个代理对象。外界每次通过代理对象访问 target 对象的属性时，就会经过 handler 对象，从这个流程来看，代理对象很类似 middleware（中间件）。那么 Proxy 可以拦截什么操作呢？最常见的就是 get（读取）、set（修改）对象属性等操作，完整的可拦截操作列表请点击这里。此外，Proxy 对象还提供了一个 revoke 方法，可以随时注销所有的代理操作。
一个代理的例子：
1 const target = { name: 'Billy Bob', age: 15 };
2 const handler = { get(target, key, proxy) { const today = new Date();
3 console.log(`GET request made for ${key} at ${today}`);
return Reflect.get(target, key, proxy); } };4 const proxy = new Proxy(target, handler);
5 proxy.name; // => "GET request made for name at Thu Jul 21 2016 15:26:20 GMT+0800 (CST)" // => "Billy Bob"
1.Reflect称为反射。它也是ES6中为了操作对象而提供的新的API，用来替代直接调用Object的方法。Reflect是一个内置的对象，它提供可拦截JavaScript操作的方法。方法与代理处理程序的方法相同。Reflect不是一个函数对象，因此它是不可构造的。
Reflect与大多数全局对象不同，Reflect没有构造函数。你不能将其与一个new运算符一起使用，或者将Reflect对象作为一个函数来调用。
1. 处理器对象handler
处理器对象handler一共提供了14种可代理操作，每种操作的代号（属性名/方法名）和触发这种操作的方式如下：
handler.getPrototypeOf()：在读取代理对象的原型时触发该操作，比如在执行Object.getPrototypeOf(proxy)时
handler.setPrototypeOf()：在设置代理对象的原型时触发该操作，比如在执行Object.setprototypeOf(proxy, null)时
handler.isExtensible()：在判断一个代理对象是否是可扩展时触发该操作，比如在执行Object.isExtensible(proxy)时
handler.preventExtensions()：在让一个代理对象不可扩展时触发该操作，比如在执行Object.preventExtensions(proxy)时
handler.getOwnPropertyDescriptor()：在获取代理对象某个属性的属性描述时触发该操作，比如在执行Object.getOwnPropertyDescriptor(proxy, 'foo')时
handler.defineProperty()：在定义代理对象某个属性时的属性描述时触发该操作，比如在执行Object.defineProperty(proxy,'foo',{})时
handler.has()：在判断代理对象是否拥有某个属性时触发该操作，比如在执行'foo' in proxy时
handler.get()：在读取代理对象的某个属性时触发该操作，比如在执行proxy.foo时
handler.set()：在给代理对象的某个赋值时触发该操作，比如在执行proxy.foo = 1时
handler.deleteProperty()：在删除代理对象的某个属性时触发该操作，比如在执行delete proxy.foo时
handler.ownKeys()：在获取代理对象的所有属性键时触发该操作，比如在执行Object.getOwnPropertyNames(proxy)时
handler.apply()：在调用一个目标对象为函数的代理对象时触发该操作，比如在执行proxy()时
handler.construct()：在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy()时
Reflect对象拥有对应的可以控制各种元编程任务的静态方法。这些功能和Proxy一一对应。
下面的这些名称你可能看起来很眼熟（因为他们也是Object上的方法）：
Reflect.getOwnPropertyDescriptor(..)
Reflect.defineProperty(..)
Reflect.getPrototypeOf(..)
Reflect.setPrototypeOf(..)
Reflect.preventExtensions(..)
Reflect.isExtensible(..)
这些方法和在Object上的同名方法一样。然后，一个区别在于，Object上这么方法的第一个参数是一个对象，Reflect遇到这种情况会扔出一个错误。
3. 陷阱代理
使用set陷阱验证属性
假设创建一个属性值是数字的对象，对象中每新增一个属性都要加以验证，如果不是数字必须抛出错误。为了实现这个任务，可以定义一个set陷阱来覆写设置值的默认特性。
set陷阱接受4个参数：
trapTaqget 用于接收属性(代理的目标)的对象
key 要写入的属性键(字符串或Symbol类型)
value 被写入属性的值
receiver 操作发生的对象(通常是代理)
Reflect.set()是set陷阱对应的反射方法和默认特性，它和set代理陷阱一样也接受相同的4个参数，以方便在陷阱中使用。如果属性已设置陷阱应该返回true，如果未设置则返回false。(Reflect.set()方法基于操作是否成功来返回恰当的值)。
可以使用set陷阱并检查传入的值来验证属性值：
1 //set陷阱并检查传入的值来验证属性值
2 let target = { name: "target" };
3 let proxy = new Proxy(target, {
4 set(trapTarget, key, value, receiver) {
5 // 忽略已有属性，避免影响它们
6 if (!trapTarget.hasOwnProperty(key)) {
7 if (isNaN(value)) { throw new TypeError("Property must be a number."); }
8 } // 添加属性
9 return Reflect.set(trapTarget, key, value, receiver);
10 }
11 });
12 // 添加一个新属性
13 proxy.count = 1;
14 console.log(proxy.count); // => 1
15 console.log(target.count); // => 1 // 你可以为 name 赋一个非数值类型的值，因为该属性已经存在
16 proxy.name = "proxy";
17 console.log(proxy.name); // => "proxy"
18 console.log(target.name); // => "proxy"
// 抛出错误 proxy.anotherName = "proxy";
这段代码定义了一个代理来验证添加到target的新属性，当执行proxy.count=1时，set陷阱被调用，此时trapTarget的值等于target，key等于"count"，value等于1，receiver等于proxy。
由于target上没有count属性，因此代理继续将value值传入isNaN()，如果结果是NaN，则证明传入的属性值不是数字，同时也抛出一个错误。在这段代码中，count被设置为1，所以代理调用Reflect.set()方法并传入陷阱接受的4个参数来添加新属性。
proxy.name可以成功被赋值为一个字符串，这是因为target已经拥有一个name属性，但通过调用trapTarget.hasownproperty()方法验证检查后被排除了，所以目标已有的非数字属性仍然可以被操作。
然而，将proxy.anotherName赋值为一个字符串时会抛出错误。目标上没有anotherName属性，所以它的值需要被验证，而由于"Proxy"不是一个数字值，因此抛出错误。
set代理陷阱可以拦截写入属性的操作，get代理陷阱可以拦截读取属性的操作
用get陷阱验证对象结构(Object Shape)
JS有一个时常令人感到困惑的特殊行为，即读取不存在的属性时不会抛出错误，而是用undefined代替被读取属性的值。
1 //用get陷阱验证对象结构(Object Shape)
2 let target = {};
3 console.log(target.name); // => undefined
对象结构是指对象中所有可用属性和方法的集合，JS引擎通过对象结构来优化代码，通常会创建类来表示对象，如果可以安全地假定一个对象将始终具有相同的属性和方法，那么当程序试图访问不存在的属性时会抛出错误。代理让对象结构检验变得简单。
因为只有当读取属性时才会检验属性，所以无论对象中是否存在某个属性，都可以通过get陷阱来检测，它接受3个参数：
trapTarget 被读取属性的源对象(代理的目标)
key 要读取的属性键(字符串或Symbol)
receiver 操作发生的对象(通常是代理)
由于get陷阱不写入值，所以它复刻了set陷阱中除value外的其他3个参数，Reflect.get()也接受同样3个参数并返回属性的默认值。
如果属性在目标上不存在，则使用get陷阱和Reflect.get()时会抛出错误：
let proxy = new Proxy({}, {
get(trapTarget, key, receiver) {
if (!(key in receiver)) {
throw new TypeError("Property " + key + " doesn't exist.");
}
return Reflect.get(trapTarget, key, receiver);
}
});
// 添加属性的功能正常
proxy.name = "proxy";
console.log(proxy.name); // => "proxy"
// 读取不存在属性会抛出错误
console.log(proxy.nme); // => 抛出错误
原型代理陷阱
Object.setPrototypeOf()方法被用于作为ES5中的Object.getPrototypeOf()方法的补充。通过代理中的setPrototypeOf陷阱和getPrototypeOf陷阱可以拦截这两个方法的执行过程，在这两种情况下，Object上的方法会调用代理中的同名陷阱来改变方法的行为。
两个陷阱均与代理有关，但具体到方法只与每个陷阱的类型有关，setPrototypeOf陷阱接受以下这些参数:
trapTarget 接受原型设置的对象(代理的目标)
proto 作为原型使用的对象
传入Object.setPrototypeOf()方法和Reflect.setPrototypeOf()方法的均是以上两个参数，另一方面，getPrototypeOf陷阱中的Object.getPrototypeOf()方法和Reflect.getPrototypeOf()方法只接受参数trapTarget。
原型代理陷阱的运行机制
原型代理陷阱有一些限制。首先，getPrototypeOf陷阱必须返回对象或null，否则将导致运行时错误，返回值检查可以确保Object.getPrototypeOf()返回的总是预期的值；其次，在setPrototypeOf陷阱中，如果操作失败则返回的一定是false，此时Object.setPrototypeOf()会抛出错误，如果setPrototypeOf返回了任何不是false的值，那么Object.setPrototypeOf()便假设操作成功。
以下示例通过总是返回null，且不允许改变原型的方式隐藏了代理的原型:
1 let target = {};
2 let proxy = new Proxy(target, {
3 getPrototypeOf(trapTarget) {
4 return null;
5 },
6 setPrototypeOf(trapTarget, proto) {
7 return false;
8 }
9 });
10 let targetProto = Object.getPrototypeOf(target);
11 let proxyProto = Object.getPrototypeOf(proxy);
12 console.log(targetProto === Object.prototype); // => true
13 console.log(proxyProto === Object.prototype); // => false
14 console.log(proxyProto); // => null
// 成功
15 Object.setPrototypeOf(target, {});
// 抛出错误
16 Object.setPrototypeOf(proxy, {});
代码强调了target和proxy的行为差异。Object.getPrototypeOf()给target返回的是值，而给proxy返回值时，由于getPrototypeOf陷阱被调用，返回的是null；同样，Object.setPrototypeOf()成功为target设置原型，而给proxy设置原型时，由于setPrototypeOf陷阱被调用，最终抛出一个错误。
一、 vue的$ref
一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>
ref属性不是一个标准的HTML属性，只是Vue中的一个属性。实际上，它甚至不会是DOM的一部分，所以在浏览器中你查看渲染的HTML，你是看不到有关于ref的任何东西。因为在它前面没有添加:，而且它也不是一个指令
<div ref="demo"></div>
document.querySelector('[ref=demo]');