其他回答《浅析vue中web前端项目优化（附代码）》中，来给大家了解到了vue中web前端项目优化。下边本文来给大家了解一下JS中ES6代理商Proxy使用方法，小伙伴们一起来看看一下。
proxy这个概念
proxy英语本意是代理含意，在ES6中，可以翻译为"代理器"。它主要运用于更改一些操控的默认设置个人行为，相当于在语言层面作出改动，因此属于一种“元编程”（meta programming），即对计算机语言开展程序编写。
proxy在目标用户的表层构建了一层阻拦，大众对目标用户的某个实际操作（后文会表明，有什么实际操作能够阻拦），需要通过这一层阻拦。词法
var proxy = new Proxy(target, handler);
根据对象形成proxy，target主要参数一定要阻拦的目标用户，handler主要参数也是一个目标，用于订制阻拦个人行为。
事例
var obj = new Proxy(
{},
{
get: function (target, key, receiver) {
console.log(`getting ${key}!`);
return Reflect.get(target, key, receiver);
},
set: function (target, key, value, receiver) {
console.log(`setting ${key}!`);
return Reflect.set(target, key, value, receiver);
},
}
);一般将handle主要参数称作配备目标，在配置目标中，能够界定必须阻拦的操作。假如配备目标为空，这样对于proxy的操作将直达目标用户。
对proxy实际操作才会有阻拦实际效果，而非目标用户。
Proxy案例的办法
当载入不可能的特性情况下，抛出去不正确而非回到undefined
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 '" does not exist.');
}
},
});
proxy.name; // "张三"
proxy.age; // 抛出去一个错误阻拦载入传承特性
let proto = new Proxy(
{},
{
get(target, propertyKey, receiver) {
console.log("GET " propertyKey);
return target[propertyKey];
},
}
);
let obj = Object.create(proto);
obj.xxx; // "GET xxx"二维数组载入负值检索（负值检索表明倒着取数）
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");
arr[-1]; // c实现数据限制
let validator = {
set: function (obj, prop, value) {
if (prop === "age") {
if (!Number.isInteger(value)) {
throw new TypeError("The age is not an integer");
}
if (value > 200) {
throw new RangeError("The age seems invalid");
}
}
// 针对age之外的特性，立即储存
obj[prop] = value;
},
};
let person = new Proxy({}, validator);
person.age = 100;
person.age; // 100
person.age = "young"; // 出错
person.age = 300; // 出错避免内部结构特性“\_”被外界读写能力（一般就以下横线开始，表明实际上内部结构特性）
var handler = {
get(target, key) {
invariant(key, "get");
return target[key];
},
set(target, key, value) {
invariant(key, "set");
target[key] = value;
return true;
},
};
function invariant(key, action) {
if (key[0] === "_") {
throw new Error(`Invalid attempt to ${action} private "${key}" property`);
}
}
var target = {};
var proxy = new Proxy(target, handler);
proxy._prop;
// Error: Invalid attempt to get private "_prop" property
proxy._prop = "c";
// Error: Invalid attempt to set private "_prop" property阻拦——函数调用、call、apply实际操作
var twice = {
apply(target, ctx, args) {
return Reflect.apply(...arguments) * 2;
},
};
function sum(left, right) {
return left right;
}
var proxy = new Proxy(sum, twice);
proxy(1, 2); // 6
proxy.call(null, 5, 6); // 22
proxy.apply(null, [7, 8]); // 30错误...in...循环系统起效
var handler = {
has(target, key) {
if (key[0] === "_") {
return false;
}
return key in target;
},
};
var target = { _prop: "foo", prop: "foo" };
var proxy = new Proxy(target, handler);
"_prop" in proxy; // false错误for...in...循环系统起效
let stu1 = { name: "张三", score: 59 };
let stu2 = { name: "李四", score: 99 };
let handler = {
has(target, prop) {
if (prop === "score" && target[prop] < 60) {
console.log(`${target.name} 不过关`);
return false;
}
return prop in target;
},
};
let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);
"score" in oproxy1;
// 张三 不过关
// false
"score" in oproxy2;
// true
for (let a in oproxy1) {
console.log(oproxy1[a]);
}
// 张三
// 59
for (let b in oproxy2) {
console.log(oproxy2[b]);
}
// 李四
// 99阻拦object.keys()方式
let target = {
a: 1,
b: 2,
c: 3,
};
let handler = {
ownKeys(target) {
return ["a"];
},
};
let proxy = new Proxy(target, handler);
Object.keys(proxy);
// [ 'a' ]文中由来RYF详细地址：https://es6.ruanyifeng.com/#docs/proxy
强烈推荐学习培训：JS高级教程
以上就是关于一文解读JS中ES6代理商Proxy使用方法（编码共享）的具体内容，大量欢迎关注AdminJS其他类似文章！