es6 --- Proxy实例的get方法

写一个拦截函数,访问目标对象不存在属性时,会抛出不存在该属性的错误
如果存在该属性时,就返回其值.

var person = {name: "张三"
};var proxy = new Proxy(person, {get: function(target, property) {if (property in target) {return target[property];} else {throw new ReferenceError("property \"" + property + "\" dose not exist." );}}
});
console.log(proxy.name);
console.log(proxy.age);// 注: 拦截读取属性使用get,
// target在本例中指向person,第一个console中的property是name,故返回其值
// 第二个console的中的property是age,在person里面不存在,故抛出错误.

效果如下:

使用get拦截实现数组负数索引
即:当输入A[-1]时(假定A.length = 3),返回A[-1 + 3] = A[2]
输入正常时,返回正常位

function createArray(...elements) {let handler = {get(target, propKey, receiver) {let index = Number(propKey);if (index < 0) {propKey = String(target.length + index);}return Reflect.get(target, propKey, receiver);}};let target = [];target.push(...elements);return new Proxy(target, handler);
}let arr = createArray('a', 'b', 'c');
console.log(arr[-1]);
console.log(arr[1]);// 注:createArray()函数使用扩展运算符(...)接收参数, 里面创建了一个代理Proxy,并将其实例返回,提供了一个很友好的接口.,
// 代理:Propxy接收了2个参数,第一个是目标,第二个参数,设置了一个监听获取操作的拦截器.即在读取数据元素时执行.
// 拦截器检查索引,若为负数将其与数组长度相加.并返回长度...
// Reflect...暂时不懂..

使用get操作实现属性的链式操作 (神仙实现…)

var pipe = (function () {return function (value) {var funcStack = [];var oproxy = new Proxy({}, {get: function ({}, fnName) {if (fnName === 'get' ) {return funcStack.reduce(function (val, fn) {console.log("val >>>", val);console.log("fn >>>", fn);return fn(val);}, value);}funcStack.push(window[fnName]);console.log("fnName >>> ",fnName);return oproxy;}});return oproxy;}
}());
var double = n => n * 2;
var pow = n => n * n;
var reverseInt= n => n.toString().split("").reverse().join("") | 0;
console.log(pipe(3).double.pow.reverseInt.get);
// 注: 首先定义了一个立即执行的函数pipe,pipe函数内部有一个变量funcStack用于保存链式执行的方法(.double.pow.reverseInt)
// 在Proxy的实例oproxy里面,设置了一个get拦截(可以理解为在执行.操作时执行函数),第二个参数(fnName)用于接收.操作的名称
// 首先判断fnName是否为get(此处的get是链式操作结束的标志),若不是,就将当前操作入栈funcStack.push
// 若fnName 为get，则将保存在funcStack里面的操作取出来,对value值依此执行最后返回这个值.

使用get拦截实现一个生成各种DOM节点的通用函数dom
具体来说就是,dom.div({},‘Hello World’)就会生成一个<div>Hello World</div>

// 定义dom
const dom = new Proxy({}, {get(target, property) {return function (attrs = {}, ...children) {console.log(attrs,...children);const el = document.createElement(property);for (let prop of Object.keys(attrs)) {el.setAttribute(prop, attrs[prop]);}for (let child of children) {if (typeof child === 'string') {child = document.createTextNode(child);}el.appendChild(child);}return el;}}
});// 使用dom
const el = dom.div({},'Hello, my name is ',dom.a({href: '//example.com'}, 'Marron.L'),'. I like:',dom.ul({},dom.li({}, 'The Web'),dom.li({}, 'Food'),dom.li({}, '...actually that\'s it))
);
document.body.appendChild(el)

这个是控制台打印内容

这个是页面显示内容

参考《ES6标准入门》(第3版) P237~P240

es6 --- Proxy实例的get方法相关推荐

es6 Proxy 实例的方法
Proxy 实例的方法下面是上面这些拦截方法的详细介绍. get() get方法用于拦截某个属性的读取操作,可以接受三个参数,依次为目标对象.属性名和 proxy 实例本身(即this关键字指向的那 ...
es6 Proxy.revocable()方法
Proxy.revocable()方法 Proxy.revocable()方法返回一个可取消的 Proxy 实例. let target = {}; let handler = {}; let {pr ...
ES6 Proxy和Reflect (上)
Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...
es6 Proxy 简介
Proxy 简介 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy ...
深入实践 ES6 Proxy Reflect
原文: https://zhuanlan.zhihu.com/p/60126477 引言 Vue中的数据绑定 Vue作为前端框架的三驾马车之一,在众多前端项目中具有极其重要的作用. Vue中具有一个重 ...
ES6 Proxy 和 Reflect 的理解
Vue中的数据绑定 ps:观察者模式 (下面有重点) Vue作为前端框架的三驾马车之一,在众多前端项目中具有极其重要的作用. Vue中具有一个重要的功能点--"数据绑定".使用者无 ...
ES6 Proxy和Reflect
目录 Proxy 概述基本用法 Proxy 实例方法 1.get(target, propKey, receiver) 2.set(target, propKey, value, receiver) ...
ES6 Proxy 性能之我见
ES6 Proxy 性能之我见本文翻译自https://thecodebarbarian.com/thoughts-on-es6-proxies-performance Proxy是ES6的一个强力 ...
proxy connect abort处理方法_Vue 3.0 初探 - Proxy
前言 4 月 17 日,尤大在微博上宣布 Vue 3.0 beta 版本正式发布. 在尤大发布的< Vue3 设计过程>文章中提到之所以重构 Vue 一个考量就是JavaScript新的语 ...

es6 --- Proxy实例的get方法

es6 --- Proxy实例的get方法相关推荐

最新文章

热门文章