为了账号安全,请及时绑定邮箱和手机立即绑定

# ES6中的元编程-Proxy & Reflect

标签:
CSS3

前言

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); 
// 100person.age = 'young'; 
// 抛出异常: Uncaught TypeError: The age is not an integerperson.age = 300; 
// 抛出异常: Uncaught RangeError: The age seems invalidconsole.log(p.a, p.b);    // 1, undefinedconsole.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时候函数才会再次被调用

图片懒加载

 const IMG_LOAD = 'https://img.alicdn.com/tfs/TB11rDdclLoK1RjSZFuXXXn0XXa-300-300.png';  
  const imageProxy = (loadingImg) => {    return new Proxy(Image, {
      construct(target, args){        const instance = Reflect.construct(target, args);
        instance.src = loadingImg;        return instance;
      }
    });
  };  const ImageProxy = imageProxy(IMG_LOAD);  const createImageProxy = (realImg) =>{    const img = new ImageProxy();    const virtualImg = new Image();
    virtualImg.src = realImg;
    virtualImg. = () => {
      hasLoaded = true;
      img.src = realImg;
    };    return img;
  }  var img = createImageProxy('https://cdn.dribbble.com/users/329207/screenshots/5289734/bemocs_db_dribbble_03_gold_leaf.jpg');  document.body.appendChild(img);

通过proxy构造默认Image对象,在加载完成时替换默认图片

单例模式

// makes a singleton proxy for a constructor functionfunction 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 - 因为 t1、t2 是不同的实例// 使用 Proxy 来 trap 构造函数, 完成单例模式const TestSingleton = makeSingleton(Test),
    s1 = new TestSingleton(),
    s2 = new TestSingleton();
s1.value = 123;console.log('Singleton:', s2.value);  // 123 - 现在 s1、s2 是相同的实例。

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

后记

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



作者:不止前端
链接:https://www.jianshu.com/p/ced536ab5ddf


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消