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);
和大多数开发者一样,刚开始学习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对象是Proxy的核心基础,所有对目标对象的操作都需要通过handler来处理,虽然内容有点多,但是常用的不多。
所有访问都是对代理对象访问才会触发,直接访问目标对象不会触发(代理对象压根没参与进来,如果触发那一定是出bug了)
说明:获取目标对象的原型
触发时机:Object.getPrototypeOf(代理对象)
参数:
返回值:
const array = [];
const myArray = new Proxy(array, {
getPrototypeOf(target) {
console.log('读取对象原型');
return Object.getPrototypeOf(array);
}
});
console.log(Object.getPrototypeOf(myArray));
// 输出
// 读取对象原型
// []
说明:设置对象的原型
触发时机:Object.setPrototypeOf(代理对象, 原型)
参数:
返回值:
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)); // {}
说明:检测对象是否可扩展(个人理解:也就是能否添加属性、函数)
触发时机:Object.isExtensible(代理对象)
参数:
返回参数:
说明:设置目标对象为不可扩展
触发时机:Object.preventExtensions(代理对象)
参数:
返回值:
const obj = {};
const p = new Proxy(obj, {
preventExtensions(target) {
Object.preventExtensions(target);
return true;
}
});
Object.preventExtensions(p);
p.a = 1;
console.log(p); // {} 目标对象不可扩展,所以a属性设置不进去
说明:获取目标对象属性的描述符
触发时机:Object.getOwnPropertyDescriptor(代理对象)
参数:
返回参数:
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 }
说明:在对象上定义属性(添加新属性或修改现有属性)
触发时机:Object.defineProperty(代理对象,属性名,属性描述对象)
参数:
返回值:
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',
});
说明:判断对象是否有指定属性
触发时机:prop in 代理对象
参数:
返回值:
说明: 属性读取器
触发时机:读取代理对象的属性时触发
参数:
返回值:
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
说明:属性写入访问器
触发时机:对代理对象的属性进行赋值时触发
参数:
返回值:
说明:删除对象属性
触发时机:对代理对象的属性进行delete时触发
参数:
返回值:
说明:拦截函数调用,被代理对象必须是函数
触发时机:
参数:
返回值:
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,因为被拦截了
说明:拦截构造过程
触发时机:new 目标构造函数(...args)
参数:
返回值:
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框架也是可以的。
原文;https://www.ddhigh.com/2019/11/04/es6-proxy.html
ES6 中引入Proxies,让你可以自定义Object的基本操作。例如,get就是Object的基础操作方法。
ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作。这个功能非常的有用。每当代理对象被赋值,处理器函数就会调用,这样就可以用来调试某些问题。
Proxy是什么意思?Proxy是ES6中提供的新的API,可以用来定义对象各种基本操作的自定义行为,在我们需要对一些对象的行为进行控制时将变得非常有效。
我们或多或少都听过数据绑定这个词,数据绑定”的关键在于监听数据的变化,可是对于这样一个对象:var obj = {value: 1},我们该怎么知道 obj 发生了改变呢?ES5 提供了 Object.defineProperty 方法,该方法可以在一个对象上定义一个新属性
Proxy 用于修改某些操作的默认行为(基本操作有属性查找,赋值,枚举,函数调用等)。get(target, propKey, receiver):拦截对象属性的读取;set: function(obj, prop, value,receive) : 拦截某个属性的赋值操作
使用Proxy,你可以将一只猫伪装成一只老虎。下面大约有6个例子,我希望它们能让你相信,Proxy 提供了强大的 Javascript 元编程。尽管它不像其他ES6功能用的普遍,但Proxy有许多用途
这篇文章提到 Proxy 这种语法可以用来封装 sessionStorage、 localStorage 甚至是 IndexedDB。可以使用 Proxy 代理来使 API 更容易使用。首先介绍一下 Proxy 的基本用法:
通常,当谈到JavaScript语言时,我们讨论的是ES6标准提供的新特性,本文也不例外。 我们将讨论JavaScript代理以及它们的作用,但在我们深入研究之前,我们先来看一下Proxy的定义是什么。
通过调用new proxy()你可以创建一个代理来替代另一个对象(被称为目标),这个代理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当做同一个对象来对待。
Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种『元编程』即对编程语言进行编程。Proxy 是在目标对象之前架设一层『拦截』,外部对对象的访问,都需要经过该层拦截。因此在拦截中对外界的访问进行过滤和改写。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!