前言

写本《JavaScript简餐》系列文章的目的是记录在阅读学习《JavaScript高级程序设计（第4版）》一书时出现的各个知识点。虽是对读书的笔记和总结，但是希望它轻量、简洁、犀利，不会引起阅读疲劳，可以在碎片化时间和闲暇之余轻巧地沐浴一下知识点。每篇文章只针对一个小部分进行讲解式的梳理，来达到个人复习总结和分享知识的目的。

首先，我们要知道代理可以捕获13种不同的基本操作方法：

get()
set()
has()
defineProperty()
getOwnPropertyDescriptor()
deleteProperty()
ownKeys()
getPrototypeOf()
setPrototypeOf()
isExtensible()
preventExtensions()
apply()
construct()

下面的部分会用一些比较常见的捕获器方法。

一、跟踪属性访问

使用代理可以在代码中实现一些有用的编程模式。通过捕获get、set、has等操作，可以知道对象属性什么时候被访问、被查询。把实现相应捕获器的某个对象代理放到应用中，可以监控这个对象在哪里被访问过。来看一下例子：

const person = {name: 'Lucy'
}const proxy = new Proxy(person, {get (target, property, receiver) {console.log(`Getting ${property}`);return Reflect.get(...arguments);},set (target, property, value, receiver) {console.log(`Setting ${property}=${value}`);return Reflect.set(...arguments);}
});proxy.name; // Getting name
proxy.age = 25; // Setting age=25

二、隐藏属性

代理内部实现对外部代码是不可见的，因此可以借此来隐藏目标对象上的属性。来看下面的代码：

const hiddenProperties = ['name', 'age'];
const person = {name: 'Lucy',age: 25,school: 'Tsinghua University'
}
const proxy = new Proxy (person, {get (target, property, receiver) {if (hiddenProperties.includes(property)) {return undefined;} else {return Reflect.get(...arguments);}},has (target, property, receiver) {if (hiddenProperties.includes(property)) {return false;} else {return Reflect.has(...arguments);}}
})console.log(proxy.name); // undefined
console.log(proxy.age); // undefined
console.log(proxy.school); // Tsinghua Universityconsole.log('name' in proxy); // false
console.log('age' in proxy); // false
console.log('school' in proxy); // true

三、属性验证

因为所有赋值操作都会触发set()捕获器，所以可以根据所赋的值决定是允许还是拒绝赋值：

const person = {name: 'Lucy'
}const proxy = new Proxy (person, {set (target, property, value, receiver) {if (typeof value === 'number') {return false;} else {return Reflect.set(...arguments);}}
});proxy.name = 59;
console.log(proxy.name); // Lucy（因为59不是Number数据类型，所以视作赋值无效，所以name还是Lucy）
proxy.name = 'Jack';
console.log(proxy.name); // Jack（赋值生效）

四、函数与构造函数参数验证

跟保护和验证对象属性类似，也可对函数和构造函数参数进行审查。比如，可以让函数只接收某种类型的值：

function doubleArray(...arr) {const newArray =  arr.map((item, index, array) => {return item*2;});return newArray;
}const proxy = new Proxy(doubleArray, {apply(target, thisArg, argArray) {for (const arg of argArray) {if (typeof arg !== 'number') {throw 'This function requires Number Array!!!'}}return Reflect.apply(...arguments);}
})//这里要分别写一下打印信息，两个一起写的话只会打印后一个的结果。
console.log(proxy(1, 2, 3)); // [ 2, 4, 6 ]
console.log(proxy(5, 'six', 7)); // This function requires Number Array!!!

还有一个有用的地方是，我们可以用来要求实例化时必须给构造函数传参：

class Person {constructor(name) {this.name = name;}
}const proxy = new Proxy(Person, {construct(target, argArray, newTarget) {if (argArray[0] === undefined) {throw 'Must give a argument when you are initializing a instance!!!'} else {console.log(Reflect.construct(...arguments));return Reflect.construct(...arguments);}}
});//这里要分别写一下打印信息，两个一起写的话只会打印后一个的结果。
new proxy('Lucy'); // Person { name: 'Lucy' }
new proxy(); // Must give a argument when you are initializing a instance!!!

五、数据绑定与可观察对象

通过代理可以把原本不相关的部分联系到一起。这样就可以实现各种模式，从而让不同的代码互操作。比如，可以将被代理的类绑定到一个全局实例集合，让所有创建的实例都被添加到这个集合中：

const personList = [];class Person {constructor(name) {this.name = name;}
}const proxy = new Proxy(Person, {construct(target, argArray, newTarget) {const newPerson = Reflect.construct(...arguments);personList.push(newPerson);return newPerson;}
})new proxy('Lucy');
new proxy('Jack');
new proxy('Bob');console.log(personList);
// [
//     Person { name: 'Lucy' },
//     Person { name: 'Jack' },
//     Person { name: 'Bob' }
// ]

另外，还可以把集合绑定到一个事件分派程序，每次插入新实例都会发送消息：

const personList = [];function printPersonName(name) {console.log(name);
}const proxy = new Proxy(personList, {set(target, property, value, receiver) {const result = Reflect.set(...arguments);if (result) {printPersonName(Reflect.get(target, property, receiver));}return result;}
});proxy.push('Lucy'); // Lucy
proxy.push('Jack'); // Jack

总结

以上就是今天要讲的内容，今天简单地介绍了一下proxy的各种使用场景。下一篇开始我们来回归本源，来看一下Javascript中的函数。撒花~

JavaScript简餐——代理Proxxy与反射（三）相关推荐

JavaScript简餐——代理Proxxy与反射（二）
文章目录前言一.可撤销代理二.代理另一个代理三.代理的问题与不足四.总结前言写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序 ...
JavaScript简餐——代理Proxy与反射（一）
文章目录前言一.代理Proxy基础二.定义捕获器三.捕获器参数和反射API 四.捕获器不变式五.总结前言写本<JavaScript简餐>系列文章的目的是记录在阅读学习< ...
JavaScript简餐——创建对象的三种模式
文章目录前言一.工厂模式二.构造函数模式三.原型模式总结前言写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计(第4版)& ...
JavaScript简餐——关于类的继承
文章目录前言一.继承基础二.super关键字三.抽象基类四.总结前言写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计(第 ...
JavaScript简餐——关于盗用构造函数
文章目录前言一.什么是盗用构造函数? 二.使用实例三.参数传递四.盗用构造函数的问题所在五.总结前言写本<JavaScript简餐>系列文章的目的是记录在阅读学习<Ja ...
JavaScript简餐——闭包
文章目录前言一.闭包概念二.闭包的副作用三.闭包的用途 1.在函数外部读取函数的内部变量 2.利用外部函数变量缓存值四.总结前言写本<JavaScript简餐>系列文章的目的 ...
JavaScript简餐——初见Promise
文章目录前言一.Promise基础 1.Promise状态机 2.通过执行函数控制Promise的状态 3.Promise.resolve() 4.Promise.reject() 5.同步/异 ...
JavaScript简餐——类构造函数
文章目录前言一.类的构造函数及其实例化二.把类当成特殊函数三.总结前言写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计(第 ...
JavaScript简餐——寄生组合继承
文章目录前言一.什么是寄生组合继承? 二.寄生组合继承的基本模式三.总结前言写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript高级程序设计 ...

JavaScript简餐——代理Proxxy与反射（三）

文章目录

前言