133-重温基础:元编程

本文是重温基础系列文章的第十四篇。

这是第一个基础系列的最后一篇,后面会开始复习一些中级的知识了,欢迎持续关注呀

接下来会统一整理到我的【Cute-JavaScript】的JavaScript基础系列中。

今日感受:独乐乐不如众乐乐。

本章节复习的是JS中的元编程,涉及的更多的是ES6的新特性。

1. 概述

元编程,其实我是这么理解的:让代码自动写代码,可以更改源码底层的功能

元,是指程序本身。

有理解不到位,还请指点,具体详细的介绍,可以查看维基百科 元编程 。

从ES6开始,JavaScrip添加了对 和 对象的支持,允许我们连接并定义基本语言操作的自定义行为(如属性查找,赋值,枚举和函数调用等),从而实现JavaScrip的元级别编程。

: 用于替换直接调用 的方法,并不是一个函数对象,也没有 方法,所以不能用 操作符。

: 用于自定义对象的行为,如修改 和 方法,可以说是ES5中 方法的ES6升级版。

两者联系: API完全一致,但 一般在 需要处理默认行为的时候使用。

参考资料

本文主要从Proxy介绍,还会有几个案例,实际看下怎么使用。

2. Proxy介绍

用于修改某些操作的默认行为,可以理解为一种拦截外界对目标对象访问的一种机制,从而对外界的访问进行过滤和修改,即代理某些操作,也称“代理器”。

2.1 基础使用

基本语法:

实例化需要传入两个参数, 参数表示所要拦截的目标对象, 参数也是一个对象,用来定制拦截行为。

上述 实例中,在第二个参数中定义了 方法,来拦截外界访问,并且 方法接收两个参数,分别是目标对象所要访问的属性,所以不管外部访问对象中任何属性都会执行 方法返回 。

注意

只能使用 实例的对象才能使用这些操作。

如果 没有设置拦截,则直接返回原对象。

同个拦截器函数,设置多个拦截操作

这里还有一个简单的案例:

这里因为 定义了 中的 属性,值为 ,而没有定义 属性,所以 会得到 ,而 会得到 从而使用 返回的默认值 ;

支持的13种拦截操作

13种拦截操作的详细介绍:打开阮一峰老师的链接。

: 拦截对象属性的读取,比如proxy.foo和proxy['foo']。

: 拦截对象属性的设置,比如proxy.foo = v或proxy['foo'] = v,返回一个布尔值。

: 拦截propKey in proxy的操作,返回一个布尔值。

: 拦截delete proxy[propKey]的操作,返回一个布尔值。

: 拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。

: 拦截Object.getOwnPropertyDescriptor(proxy, propKey),返回属性的描述对象。

: 拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。

: 拦截Object.preventExtensions(proxy),返回一个布尔值。

: 拦截Object.getPrototypeOf(proxy),返回一个对象。

: 拦截Object.isExtensible(proxy),返回一个布尔值。

: 拦截Object.setPrototypeOf(proxy, proto),返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。

: 拦截 Proxy 实例作为函数调用的操作,比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

: 拦截 Proxy 实例作为构造函数调用的操作,比如new proxy(...args)。

2.2 取消Proxy实例

使用 方法取消 实例。

2.3 实现 Web服务的客户端

3. Proxy实践

3.1 数据拦截验证

通过 代理对象的 和 方法来进行拦截数据,像 就是用数据拦截来实现数据绑定。

3.2 函数节流

通过拦截 方法的调用,实现函数只能在1秒之后才能再次被调用,经常可以用在防止重复事件的触发。

3.3 实现单例模式

通过拦截 方法,让不同实例指向相同的 ,实现单例模式。

参考资料

1.MDN 元编程

2. ES6中的元编程-Proxy & Reflect

本部分内容到这结束

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190209G03SC500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券