浅谈es6中的元编程

这篇文章主要介绍了浅谈es6中的元编程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

何为元编程?

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

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 元编程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

来源:脚本之家

链接:https://www.jb51.net/article/201101.htm

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:SEO优化专员,转转请注明出处:https://www.chuangxiangniao.com/p/896967.html

(0)
上一篇 2025年1月4日 00:49:08
下一篇 2025年1月4日 00:49:41

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • GTK treeview原理及使用方法解析

    这篇文章主要介绍了GTK treeview原理及使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 GtkTreeView 构件是一个高级的构件,利用他你就可以制作出漂亮的普通列表…

    2025年1月4日
    100
  • js实现特别简单的钟表效果

    这篇文章主要为大家详细介绍了js实现特别简单的钟表效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了js实现钟表效果的具体代码,供大家参考,具体内容如下                *…

    2025年1月4日
    100
  • JavaScript 如何计算文本的行数的实现

    这篇文章主要介绍了JavaScript 如何计算文本的行数的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 需求:根据行数决定是否限制展开和收起。 思路:用2个块统…

    2025年1月4日
    100
  • JavaScript实现串行请求的示例代码

    这篇文章主要介绍了JavaScript实现串行请求的示例代码,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下 使用async和await var fn = async function(promiseArr) { fo…

    编程技术 2025年1月4日
    100
  • 浅谈JavaScript 声明提升

    这篇文章主要介绍了JavaScript 声明提升的相关资料,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下 1 引例及基本原理 在学习JavaScript声明提升之前,我们先看下面这个例子: console.log(a…

    编程技术 2025年1月4日
    100
  • js+canvas实现画板功能

    这篇文章主要为大家详细介绍了js+canvas实现画板功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了js+canvas实现画板功能的具体代码,供大家参考,具体内容如下 1.实现了画图…

    编程技术 2025年1月4日
    100
  • 原生JS实现九宫格抽奖

    这篇文章主要为大家详细介绍了原生JS九宫格抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下 上代码:     谢谢惠顾     十…

    编程技术 2025年1月4日
    100
  • js实现3D粒子酷炫动态旋转特效

    这篇文章主要为大家详细介绍了js实现3D粒子酷炫动态旋转特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 js实现3D粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜…

    2025年1月4日
    100
  • 解决js中的setInterval清空定时器不管用问题

    这篇文章主要介绍了解决js中的setInterval清空定时器不管用问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 使用场景:我在函数A中调用定时器函数,定时器是单独写的一个函数 原因: 页面加载时我调用了1次函数A,…

    编程技术 2025年1月4日
    100
  • JS如何监听div的resize事件详解

    这篇文章主要给大家介绍了关于JS如何监听div的resize事件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 需求 开发过程中经常遇到的一个问题就是如何监听…

    编程技术 2025年1月4日
    100

发表回复

登录后才能评论

联系我们

156-6553-5169

在线咨询: QQ交谈

邮件:253000106@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

联系微信