深入浅出ES6的标准内置对象Proxy
Proxy是ES6规范定义的标准内置对象,可以对目标对象的读取、函数调用等操作进行拦截。一般来说,通过Proxy可以让目标对象“可控”,比如是否能调用对象的某个方法,能否往对象添加属性等等。
const originalObj = {
name: 'xialei'
};
const publicObj = new Proxy(originalObj, {
set(target, prop, value) {
// 将属性值转化为大写
target[prop] = value.toString().toUpperCase();
}
});
publicObj.name = 'xialei';
console.log(publicObj.name); // XIALEI
从上例可以看出Proxy不需要更改目标对象(也就是originalObj),就可以对originalObj的行为进行拦截。
语法
let obj = new Proxy(target, handler);
- target
Object
目标对象。可以是任何类型的对象,甚至包括原生对象(比如数组,函数,另一个Proxy对象) - handler
Object
代理行为对象。访问目标对象时会自动触发该handler的对应属性。
和大多数开发者一样,刚开始学习Proxy的时候,这个handler不知道是个什么东西,什么时候能触发。
先看一个简单的例子,看看handler到底是什么东西。假设我们开发一个游戏脚本,由于内存修改器的盛行,我们需要对内存中的数据进行安全处理,但是不能影响外部使用,我们使用Proxy完成这个功能。
const gameObj = {
hp: 0
};
const publicGameObj = new Proxy(gameObj, {
get(target, prop) {
return target[prop]/2;
},
set(target, prop, value) {
target[prop] = value*2;
}
});
publicGameObj.hp = 10000;
console.log(publicGameObj.hp, gameObj); // 10000 {hp: 20000}
gameObj是我们在内存中真实存储数据的地方,可以看到HP是20000,但是publicGameObj.hp是10000,外部使用publicGameObj.hp即可(比如UI层展示HP为10000);
例程handler使用到的属性
- get
publicGameObj.hp
进行了读取操作,因此会自动触发handler的get方法 - set
publicGameObj.hp=10000
进行了赋值操作,因此为自动触发handler的set方法
handler对象
handler对象是Proxy的核心基础,所有对目标对象的操作都需要通过handler来处理,虽然内容有点多,但是常用的不多。
说明
- 目标对象 被代理的对象。外部不能直接访问(当然语法上是可以访问的,你都用上Proxy了,还访问他干嘛?)
- 代理对象 new Proxy的返回值。外部直接访问。目标对象会作为handler对应函数的参数传入
- 带*号的是常用属性
所有访问都是对代理对象访问才会触发,直接访问目标对象不会触发(代理对象压根没参与进来,如果触发那一定是出bug了)
handler.getPrototypeOf(target)
说明:获取目标对象的原型
触发时机:Object.getPrototypeOf(代理对象)
参数:
- target
Object
目标对象
返回值:
Object
对象的原型
const array = [];
const myArray = new Proxy(array, {
getPrototypeOf(target) {
console.log('读取对象原型');
return Object.getPrototypeOf(array);
}
});
console.log(Object.getPrototypeOf(myArray));
// 输出
// 读取对象原型
// []
handler.setPrototypeOf(target, prototype)
说明:设置对象的原型
触发时机:Object.setPrototypeOf(代理对象, 原型)
参数:
- target
Object
目标对象 - prototype
Object
原型对象或null
返回值:
boolean
设置成功返回true,否则返回false(比如不让设置)
const array = [];
const myArray = new Proxy(array, {
setPrototypeOf(target, prototype) {
Object.setPrototypeOf(target, prototype);
return true;
}
});
Object.setPrototypeOf(myArray, Object.prototype);
console.log(Object.getPrototypeOf(myArray)); // {}
handler.isExtensible(target)
说明:检测对象是否可扩展(个人理解:也就是能否添加属性、函数)
触发时机:Object.isExtensible(代理对象)
参数:
- target
Object
目标对象
返回参数:
boolean
handler.preventExtensions(target)
说明:设置目标对象为不可扩展
触发时机:Object.preventExtensions(代理对象)
参数:
- target
Object
目标对象
返回值:
boolean
设置目标对象不可扩展后返回true,不管是否设置目标对象不可扩展,返回false都会报错
const obj = {};
const p = new Proxy(obj, {
preventExtensions(target) {
Object.preventExtensions(target);
return true;
}
});
Object.preventExtensions(p);
p.a = 1;
console.log(p); // {} 目标对象不可扩展,所以a属性设置不进去
*handler.getOwnPropertyDescriptor(target, prop)
说明:获取目标对象属性的描述符
触发时机:Object.getOwnPropertyDescriptor(代理对象)
参数:
- target
Object
目标对象 - prop
<string|Symbol|number>
属性名
返回参数:
Object
属性描述符
const obj = {
a: 1
};
const p = new Proxy(obj, {
getOwnPropertyDescriptor(target, prop) {
return target[prop];
}
});
console.log(Object.getOwnPropertyDescriptor(obj, 'a')); // { value: 1, writable: true, enumerable: true, configurable: true }
*handler.defineProperty(target,prop,properties)
说明:在对象上定义属性(添加新属性或修改现有属性)
触发时机:Object.defineProperty(代理对象,属性名,属性描述对象)
参数:
- target
Object
目标对象 - prop
string|number|Symbol
属性名 - properties
Object
属性描述对象
返回值:
boolean
定义成功返回true,定义失败或不允许定义返回false
const obj = {
name: 'xialei',
name2: 'xx'
};
const p = new Proxy(obj, {
defineProperty(target, prop, properties) {
if (prop === 'name') {
Object.defineProperty(target, prop, properties);
return true;
}
return false;
}
});
Object.defineProperty(p, 'name', {
value: 'aaa',
});
Object.defineProperty(p, 'name2', { // TypeError
value: 'aaa',
});
*handler.has(target, prop)
说明:判断对象是否有指定属性
触发时机:prop in 代理对象
参数:
- target
Object
目标对象 - prop
string|number|Symbol
属性名
返回值:
boolean
*handler.get(target, prop, receiver)
说明: 属性读取器
触发时机:读取代理对象的属性时触发
参数:
- target
Object
目标对象 - prop
string|number|Symbol
属性名 - receiver
Proxy
代理对象或者原型链上的代理对象
返回值:
- 任何值
const obj = {
name: 'xialei'
};
const p = new Proxy(obj, {
get(target, prop) {
if(prop in target) {
return target[prop].toUpperCase();
}
return undefined;
}
});
console.log(p.name); // XIALEI
*handler.set(target, prop, value, receiver)
说明:属性写入访问器
触发时机:对代理对象的属性进行赋值时触发
参数:
- target
Object
目标对象 - prop
string|number|Symbol
属性名 - value
any
属性值 - receiver
Proxy
代理对象或原型链上的代理对象
返回值:
boolean
赋值成功返回true,否则返回false。严格模式下返回false会抛出TypeError
*handler.deleteProperty(target, prop)
说明:删除对象属性
触发时机:对代理对象的属性进行delete时触发
参数:
- target
Object
目标对象 - prop
string|number|Symbol
属性名
返回值:
boolean
删除成功返回true,否则返回false。严格模式下返回false会抛出TypeError
*handler.apply(target, thisArg, args)
说明:拦截函数调用,被代理对象必须是函数
触发时机:
- 直接调用函数 obj.xxx()或xxx()
- apply/call
参数:
- target
Object
目标函数 - thisArg
Object
this对象 - args
Array
参数列表
返回值:
any
任何值
function sum(a, b) {
return a + b;
}
const absSum = new Proxy(sum, {
apply(target, thisArg, args) {
const value = target.apply(thisArg, args);
return value < 0 ? -value : value;
}
});
console.log(absSum(-1, -2)); // 3,因为被拦截了
*handler.construct(target,args)
说明:拦截构造过程
触发时机:new 目标构造函数(...args)
参数:
- target
Function
构造函数 - args
Array
构造函数的参数
返回值:
Object
对象
function Person(name) {
this.name = name;
}
const P = new Proxy(Person, {
construct(target, args, newTarget) {
console.log(newTarget, newTarget === P, newTarget === Person); // [Function: Person] true false
return new target(args[0].toUpperCase());
}
});
const p = new P('xialei');
console.log(p); // Person { name: 'XIALEI' }
使用场景
保护目标对象(通过钩子方法进行拦截)
数据转换(上文有一个内存保护的例子)
数据验证(不符合规则的值不允许设置)
const privateUser = {
name: 'xialei',
phone: '13888888888'
}; const user = new Proxy(privateUser, {
set(target, prop, value) {
if (prop === 'phone' && !/^(\+86)?1[\d]{10}$/.test(value)) {
return false;
}
target[prop] = value;
return true;
}
}); user.phone = '13666666666';
console.log(user.phone); // 13666666666
user.phone = '+8613777777777';
console.log(user.phone); // +8613777777777
user.phone = '1';
console.log(user.phone); // +8613777777777
数据修正(也做数据标准化)
const privateUser = {
name: 'xialei',
phone: '13888888888'
}; const user = new Proxy(privateUser, {
set(target, prop, value) {
if (prop === 'phone' && !/^(\+86)?1[\d]{10}$/.test(value)) {
return false;
}
target[prop] = value.replace('+86','');
return true;
}
}); user.phone = '+8613666666666';
console.log(user.phone); // 13666666666
添加实用方法
const list = [
{ name: 'xialei', phone: '13888888888' },
{ name: 'xialei1', phone: '13899999999' },
]; const mList = new Proxy(list, {
get(target, prop) {
if (prop in target) {
return target[prop];
} for (const item of target) {
if (item.name === prop) {
return item;
}
}
return undefined;
}
}); const firstItem = mList[0];
const itemXialei = mList["xialei"]; console.log(firstItem); // { name: 'xialei', phone: '13888888888' }
console.log(itemXialei);// { name: 'xialei', phone: '13888888888' }
提供易用API
// 本例对localStorage做了封装,可以像普通对象一样操作localStorage,而不需要调用方法
const storage = new Proxy(localStorage, {
get(target, prop) {
return localStorage.getItem(prop);
},
set(target, prop, value) {
localStorage.setItem(prop, value);
return true;
},
deleteProperty(target, prop) {
localStorage.removeItem(prop);
},
has(target, prop) {
return localStorage.getItem(prop) !== null;
}
}); storage.aaa = '1';
console.log(storage.aaa); // '1'
delete storage.aaa;
console.log(storage.aaa); // undefined
总结
Proxy的语法虽然简单,但是可谓前途无量,比如开了一个Virtual Dom框架也是可以的。
深入浅出ES6的标准内置对象Proxy的更多相关文章
- JavaScript 标准内置对象
JavaScript 标准内置对象或称全局的对象(global objects)不要和 全局对象(global object)混淆.这里说的全局的对象是说在全局作用域里的对象,全局作用域包含了全局对象 ...
- JavaScript 标准内置对象Promise使用学习总结
Javascript标准内置对象Promise使用学习总结 by:授客 QQ:1033553122 1. 基础用法 var condition = true; let p = new Prom ...
- js002---- 标准内置对象
1. js全局的对象(全局作用域里的对象,而不是全局对象), 或者叫标准内置对象 2, 全局对象 是一个Global类的对象. 标准内置对象的分类: 1. 值属性 infinity Na ...
- javascript中的内置对象总结
内置对象 标准内置对象 Object Object.create Object.prototype.toString Object.prototype.hasOwnProperty Boolean S ...
- ES6新增语法和内置对象(let,const, Array/String/Set 扩展方法(解构赋值,箭头函数,剩余参数))
1.let ES6中新增的用于声明变量的关键字. let 声明的变量只在所处于的块级有效. 注意:使用 let 关键字声明的变量才具有块级作用域,var 关键字是不具备这个特点的. 1. 防止循环变量 ...
- Js基础知识7-JavaScript所有内置对象属性和方法汇总
对象什么的,程序员可是有很多呢... JS三大对象 对象,是任何一个开发者都无法绕开和逃避的话题,她似乎有些深不可测,但如此伟大和巧妙的存在,一定值得你去摸索.发现.征服. 我们都知道,JavaScr ...
- js简介 基本操作 以及循环语句 内置对象 函数044
js 全称 javascript 从交互的角度 描述行为 一 .js注释方法: //单行注释 声明变量 var 二 .声明多个变量 : var a = '2' ,b = 4, c = tru ...
- Spring,SpringMVC,MyBatis,Hibernate,Servlet的生命周期,jsp有哪些内置对象,Tomcat,Cookie和Session的作用以及区别,oracle,MYSQL等面试题总结
1. 什么是Spring,谈谈你对Spring的理解 Spring是我们JAVA开发人员在搭建后台时选用的一个轻量级的开源框架,Spring框架目前也是功能丰富,十分优秀企业级采用最多的一个框架. S ...
- 170104、js内置对象与原生对象
内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集:而后者包括了一些在运行过程中动态创建的对象. 原生对象 ...
随机推荐
- 提高webpack的构建速度的几种方法概括
通过externals配置来提取常用库 利用DllPlugin和DllReferencePlugin预编译资源模块,通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译,再通过 ...
- 【NS2】新协议的添加示例(转载)
1. 下表显示了 NS2 和 TCP/IP.OSI七层网络结构的大致对应关系(这个表很有好处哦) TCP NS2 OSI 应用层 应用层 应用层 表示层 会话 ...
- Java“封装”的例子
/*功能:Java"封装"的典型例子*/ public class Demo3_5{ public static void main(String args[]){ ...
- TCP/IP网络编程 读书笔记1
本篇主干内容是TCP/IP网络编程1-9章学习笔记 1. linux文件描述符 描述符从3开始以由小到大的顺序编号,0,1,2,分配给标准I/O用作标准输入.标准输出和标准错误. 2. 协议族与套接字 ...
- 05Redis入门指南笔记(持久化)
Redis的强劲性能很大程度上是由于将所有数据都存储在了内存中,然而当Redis重启后,所有存储在内存中的数据就会丢失.在一些情况下,希望Redis能将数据从内存中以某种形式同步到硬盘中,使得重启后可 ...
- HZOJ 星际旅行
正解欧拉路,其实看完题解还是挺简单的,由于对欧拉路这种东西没怎么接触过,所以考试时没想出来,知识还是有漏洞啊. 另外这题的题解写的也不是很清楚(可能大佬作者觉得这是一道送分题……),首先判断联通(注意 ...
- uva 10253 Series-Parallel Networks (整数划分+多重集)
UVa Online Judge 题意是计算给定数量的边通过串联并联两种方式,能组成多少种不同的网络.将它转化为一个树形结构,也就是求有多少不同构的树. 代码如下: #include <cstd ...
- uva 11806 Cheerleaders (容斥)
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...
- poj 1436 && zoj 1391 Horizontally Visible Segments (Segment Tree)
ZOJ :: Problems :: Show Problem 1436 -- Horizontally Visible Segments 用线段树记录表面能被看见的线段的编号,然后覆盖的时候同时把能 ...
- 【Vue】基于nodejs的vue项目打包编译部署
一·项目编译 1·进入项目目录下的终端执行命令 npm run build 正常情况如下图,如遇到错误不会编译成功,且编译后的html文件不能正常渲染. 2·编译完成后进入项目下的dist目录运行生成 ...