ES 6 系列 - Proxy
Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以是一种“元编程”,即对编程语言进行编程。
简单地理解,就是在目标对象之前假设一层“拦截”,外界对改对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤。基本就想字面意思:代理。
1.概述
es 6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。
var proxy = new Proxy(target, handler);
其中,target、handler 均为对象,target 指目标对象(需要拦截的),handler 中定义拦截行为。
var obj = new Proxy({}, {
get: function (target, key, receiver) {
console.log(`getting ${key}!`); // es 6 新増的字符串拓展写法
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log(`setting ${key}!`);
return Reflect.set(target, key, value, receiver);
}
}); obj.count = 1
// setting count!
++obj.count
// getting count!
// setting count!
// 2
二、支持的拦截操作
一共有13中拦截操作,具体移步 Proxy 概述 。这里解释 api 中几个参数的含义:
target : 目标对象,简单来说就是 new Proxy(target, handler) 中的 target 对象;
propKey : 这个解释起来有点复杂,理解很容易,如上例中的 count 就是 propKey;
value : 同样拿上例来看,obj.count = 1 , 那么 value 就是 1;
receiver : 就是 new 出来的 Proxy 对象本身;
this 指针的指向变化:
一旦 proxy 代理了目标对象(target),那么 target 对象中的 this ,就指向了 proxy 对象,而不在指向 target 对象:
const target = {
m: function () {
console.log(this === proxy);
}
};
const handler = {}; const proxy = new Proxy(target, handler); target.m() // false
proxy.m() // true
ES 6 系列 - Proxy的更多相关文章
- OpenGL ES教程系列(经典合集)
为了搞透播放器的开发,花了些时间收集这些资料,虽然我已经搞定opengles渲染视频的内容,但是想玩玩opengles,往深里玩,图像处理这块是个好的方向,所以opengles是值得好好学的. O ...
- Android OpenGL ES 入门系列(二) --- 环境搭建
转载请注明出处 本文出自Hansion的博客 本章介绍如何使用GLSurfaceView和GLSurfaceView.Renderer完成在Activity中的最简单实现. 1.在AndroidMan ...
- Android OpenGL ES 入门系列(一) --- 了解OpenGL ES的前世今生
转载请注明出处 本文出自Hansion的博客 OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三维图形 API 的子集,针对手机.PDA和游戏主机等嵌 ...
- ES 6 系列 - Module 的语法
es 6 大幅度优化了模块化编程的规范. 写在前面:在 es6 之前,说起 js 的模块化,一般都避不开 CommonJs 和 AMD 两种方案.这两种方案,前者应用于服务器,后者应用于浏览器.而 e ...
- ES 6 系列 - Promise
一.含义 是异步编程的一种解决方案,es 6 将其变成了标准. 简单的说是一个容器,里面保存了某个未来才会结束的事件(通常是一个异步操作)的结果.语法上, Promise 是一个对象,从它可以获取异步 ...
- ES 6 系列 - 对于常用对象的拓展 api
本篇中学习并记录可能会比较常用的 api ,详细请自行查找相关资料. 一.字符串的拓展 es 6 加强了对于 Unicode 的支持.javascript 允许采用 \uxxxxx 的方式表示一个字符 ...
- ES 6 系列 - 赋值的新方式:解构赋值
变量的解构赋值 es 6 允许按照一定的模式,从数组和对象中提取值,然后对变量进行赋值,这被称之为解构: 一.数组的解构赋值 最基本写法: let [a, b, c] = [1, 2, 3]; a / ...
- ES 6 系列 - 变量声明
let 和 const let 声明 (一)基本用法 let 声明的变量只在块级作用域内有效,出了该块则报错,最常见且适合的地方在 for 循环中: var a = []; for (var i = ...
- JavaScript ES 数组系列
正文从这开始- ECMAScript 5.1 中提供的数组方法 其中部分方法,ECMAScript 3 就出现了,但是本文不再细分. ECMA-262/5.1 规范:https://www.ecma- ...
随机推荐
- IDEA+JUnit
1.入门 https://blog.csdn.net/smxjant/article/details/78206279 2.比较好的JUnit例子:https://github.com/aws/aws ...
- pyspider环境部署1--python3安装
爬虫是一个既好玩又好用的东西,接触它有1年多了,了解一些,算不上精通.爬过新闻.微信公众号,主要用pyspider,scrapy也了解过,python2和3都尝试过.公司业务规模不大,基于 pytho ...
- windows下数据挖掘相关包numpy、pandas的安装
安装Anaconda的绕道 这里介绍如何在windows下安装numpy/scipy/matplotlib/pandas/scikit_learn等数据分析相关包 相关环境: win7 64位 pyt ...
- jquery()后续版本中,live()取消后使用on()实现功能写法
今天做项目想用live()功能,写完打开浏览器发现报错 然后查了查发现自己用的是jquery是jquery-2.1.1.min.js,而jquery早就取消了live()方法,在后续版本里都已经没有使 ...
- IntelliJ IDEA(一) :安装与破解
前言 我是从eclipse转IDEA的,对于习惯了eclipse快捷键的我来说,转IDEA开始很不习惯,IDEA快捷键多,组合多,记不住,虽然可以设置使用eclipse的快捷键,但是总感觉怪怪的.开始 ...
- JenKins自动化构建部署流程参考
Jenkins工作流程 程序员提交代码到Git/SVN仓库,触发钩子程序向 JenKins 进行通知,Jenkins 调用Git/SVN插件获取源码,调用Maven打包为war包,调用Deploy t ...
- Linux 用户身份与进程权限
在学习 Linux 系统权限相关的主题时,我们首先关注的基本都是文件的 ugo 权限.ugo 权限信息是文件的属性,它指明了用户与文件之间的关系.但是真正操作文件的却是进程,也就是说用户所拥有的文件访 ...
- .net core实践系列之短信服务-架构设计
前言 上篇<.net core实践系列之短信服务-为什么选择.net core(开篇)>简单的介绍了(水了一篇).net core.这次针对短信服务的架构设计和技术栈的简析. 源码地址:h ...
- Microsoft Tech Summit 2018 课程简述:利用 Windows 新特性开发出更好的手绘视频应用
概述 Microsoft Tech Summit 2018 微软技术暨生态大会将于10月24日至27日在上海世博中心举行,这也会是国内举办的最后一届 Tech Summit,2019 年开始会以 Mi ...
- 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽
本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) ...