在
之前的文章《淺析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用法（程式碼分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
