浅谈es6中的元编程


Posted in Javascript onDecember 01, 2020

何为元编程?

「编写能改变语言语法特性或者运行时特性的程序」。换言之,一种语言本来做不到的事情,通过你编程来修改它,使得它可以做到了,这就是元编程。

meta-programming元编程中的 元 的概念可以理解为 程序 本身。”元编程能让你拥有可以扩展程序自身能力

举个例子:

if (a == 1 && a == 2 && a == 3) {
  console.log("done");
}

怎样才能让这个条件满足,输出done。按照正常的逻辑是无法完成的,毕竟一个值不可能同时满足等于1、2、3

这是就可以用到元编程来改变这个不可能

let a = {
  [Symbol.toPrimitive]: ((i) => () => ++i)(0)
}

if (a == 1 && a == 2 && a == 3) {
  console.log("done");
}
// done

Symbol.toPrimitive在对象转换为原始值的时候会被调用,初始值为1,调用一次+1,就可以满足a == 1 && a == 2 && a == 3,同时Symbol.toPrimitive也可以接受一个参数hint,hint的取值为number、string、default

let obj = {
  [Symbol.toPrimitive](hint) {
    switch (hint) {
      case "number":
        return 123;
      case "string":
        return "str";
      case "default":
        return "default";
    }
  }
}
console.log(1-obj); // -122
console.log(1+obj); // 1default
console.log(`${obj}`); // str

还有哪些元编程?

proxy

es5的Object.defineProperty()方法的es6升级版,用于自定义的对象的行为

let leon = {
  age: 30
}
const validator = {
  get: function(target, key){
    // 若没这个属性返回37
    return key in target ? target[key] : 37;
  },
  set(target,key,value){
    if(typeof value!="number" || Number.isNaN(value)){
      throw new Error("年龄得是数字");
    }
  }
}
const proxy = new Proxy(leon,validator);
console.log(proxy.name);
// 37
proxy.age = "hi";
// Error: 年龄得是数字

reflect-metadata

你可以通过装饰器来给类添加一些自定义的信息。然后通过反射将这些信息提取出来。当然你也可以通过反射来添加这些信息

require("reflect-metadata")
class C {
  // @Reflect.metadata(metadataKey, metadataValue)
  method() {
  }
}
Reflect.defineMetadata("name", "jix", C.prototype, "method");

let metadataValue = Reflect.getMetadata("name", C.prototype, "method");
console.log(metadataValue);
// jix

应用

拓展数组索引访问

负索引访问,使array[-N] 与 array[array.length - N] 相同

let array = [1, 2, 3];

array = new Proxy(array, {
 get(target, prop, receiver) {
  if (prop < 0) {
   console.log(prop, 'prop')
   prop = +prop + target.length;
  }
  return Reflect.get(target, prop, receiver);
 }
});


console.log(array[-1]); // 3
console.log(array[-2]); // 2

数据劫持

let handlers = Symbol('handlers');

function makeObservable(target) {
 // 初始化存储 handler 的数组
 target[handlers] = [];

 // 存储 handler 函数到数组中以便于未来调用
 target.observe = function(handler) {
  this[handlers].push(handler);
 };

 // 创建代理以处理更改
 return new Proxy(target, {
  set(target, property, value, receiver) {
   // 转发写入操作到目标对象
   let success = Reflect.set(...arguments);
   // 如果设置属性的时候没有报错
   if (success) {
    // 调用所有 handler
    target[handlers].forEach(handler => handler(property, value));
   }
   return success;
  }
 });
}

let user = {};

user = makeObservable(user);

user.observe((key, value) => {
 console.log(`SET ${key}=${value}`);
});

user.name = "John";
// SET name=John

到此这篇关于浅谈es6中的元编程的文章就介绍到这了,更多相关es6 元编程内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
Javascript中replace()小结
Sep 30 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
Vue-CLI3.x 设置反向代理的方法
Dec 06 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 #Vue.js
微信小程序轮播图swiper代码详解
Dec 01 #Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 #Javascript
layui使用及简单的三级联动实现教程
Dec 01 #Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 #Vue.js
编写v-for循环的技巧汇总
Dec 01 #Javascript
jquery实现拖拽添加元素功能
Dec 01 #jQuery
You might like
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
python实现在目录中查找指定文件的方法
2014/11/11 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
如何将python中的List转化成dictionary
2016/08/15 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
python url 参数修改方法
2018/12/26 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
django-filter和普通查询的例子
2019/08/12 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
Java的类与C++的类有什么不同
2014/01/18 面试题
入党申请书自我鉴定
2013/10/12 职场文书
清明节演讲稿
2014/05/27 职场文书
农村文化活动总结
2014/08/28 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
同意转租证明
2015/06/24 职场文书
学校远程教育工作总结
2015/08/11 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers