ES6中的元编程-Proxy & Reflect

前言

ES6已经出来很久了，可是工做中比较经常使用的只有let const声明，经过箭头函数改this指向，使用promise + async 解决异步编程，还有些数据类型方法...因此单独写一篇文章学习ES6中的proxy 和 reflect。本文属于学习笔记，可能会有错误的理解，欢迎交流指正。

基本概念

什么是元编程？这是我在网上搜到的一句话。你们能够参考理解。个人简单理解就是》改源码底层的东西，对本来的功能进行了更改。

能“介入”的对象底层操做进行的过程当中，并加以影响。元编程中的 元 的概念能够理解为 程序 自己。”元编程能让你拥有能够扩展程序自身能力“。 ---- https://www.zhihu.com/question/23856985 知乎问答参考

Reflect： 用于替代直接调用Object的方法，它并非一个函数对象，没有constructor，全部不要使用new操做符。

Proxy： 用于自定义的对象的行为，好比修改set和get，感受是es5的Object.defineProperty()方法的es6升级版。

一些资料连接：

MDN-Reflect:MDN 上的 Reflect 官方文档

MDN-Proxy: MDN 上的 Proxy 官方文档

MDN-元编程:MDN 官方文档教程，介绍了元编程的概念

ECMAScript 6 入门 ：阮老师的es6入门，对es6还没入门的同窗能够全文阅读一番

Reflect & Proxy的联系：二者拥有彻底一致的API方法，具体可参考mdn，Reflect通常在Proxy中须要处理默认行为时使用。

编程案例

俗话说的好，理论只是纸上谈兵，仍是实践中学习这些元编程方法。

数据劫持，验证操做

let handler = {
    get: function(target, key){
        return key in target ? target[key] : 37;
    },
   set: function(target, key, value) {
    if (key === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // The default behavior to store the value
    target[key] = value;
  }
};
let p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;
person.age = 100;

console.log(person.age); 
// 100

person.age = 'young'; 
// 抛出异常: Uncaught TypeError: The age is not an integer

person.age = 300; 
// 抛出异常: Uncaught RangeError: The age seems invalid
console.log(p.a, p.b);    // 1, undefined

console.log('c' in p, p.c);    // false, 37

这是一个很是典型的案例，使用vue的同窗都知道vue是经过数据劫持的方法来完成数据绑定的，经过proxy代理对象的set，get方法一样能够完成数据劫持的目的，

函数节流

const createThrottleProxy = (fn, rate) => {
  let lastClick = Date.now() - rate;
  return new Proxy(fn, {
    apply(target, context, args) {
      if (Date.now() - lastClick >= rate) {
        fn.bind(target)(args);
        lastClick = Date.now();
      }
    }
  });
};

const handler = () => console.log('Do something...');
const handlerProxy = createThrottleProxy(handler, 1000);
document.addEventListener('scroll', handlerProxy);

该实例经过proxy的handler.apply()拦截了函数调用，当只有时间超过1s时候函数才会再次被调用

单例模式

// makes a singleton proxy for a constructor function
function makeSingleton(func) {
    let instance,
        handler = {
            construct: function (target, args) {
                if (!instance) {
                    instance = new func();
                }
                return instance;
            }
        };
    return new Proxy(func, handler);
}


// 以这个为 constructor 为例
function Test() {
    this.value = 0;
}

// 普通建立实例
const t1 = new Test(),
    t2 = new Test();
t1.value = 123;
console.log('Normal:', t2.value);  // 0 - 由于 t一、t2 是不一样的实例

// 使用 Proxy 来 trap 构造函数, 完成单例模式
const TestSingleton = makeSingleton(Test),
    s1 = new TestSingleton(),
    s2 = new TestSingleton();
s1.value = 123;
console.log('Singleton:', s2.value);  // 123 - 如今 s一、s2 是相同的实例。

经过proxy的construct方法 拦截，让不一样的实例指向了相同的constructer，达到单例模式的目的。

后记

不得不说实践出真知啊，行文至此，参考了mdn，网上也搜了不少相关资料，案例借鉴，本身对Proxy的理解也上了一个层次，最近本想深刻canvas，但感受不作图形方面的工做的话，真的难以应用。下篇文章先预约写全栈应用或者 vue源码方面的。

最近想深刻一下计算机原理，请大佬推荐一些计算机原理方面的书籍，固然不限于计算机，前端方面也能够。红宝书，精粹，dom编程艺术，js忍者秘籍，你不知道的js，css揭秘，node实战这些已经看过了，就不要重复推荐了，这些都是我看过以为不错的书。本人零基础，大学自学的一点前端知识，感受须要扩展一下。