JavaScript的Proxy對象詳解
更新時間:2022年01月07日 15:26:57 作者:Learn-anything
這篇文章主要為大家介紹了JavaScript的Proxy對象,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
一、Proxy 是什么?
Proxy 對象用于攔截并修改目標(biāo)對象的指定操作。
// 語法 const p = new Proxy(target, handler)
- target :目標(biāo)對象(可以是任何類型的對象,包括原生數(shù)組,函數(shù),甚至另一個代理)。
- handler :以函數(shù)作為屬性的對象,實現(xiàn)攔截和自定義操作。
二、怎么用?
1、使用 Proxy 的簡單實例
訪問不存在的屬性,設(shè)置默認(rèn)值返回而不返回 undefined
// 1、找到合適的 handler 并編寫代碼
const handler = {
get: function(obj, prop) {
return prop in obj ? obj[prop] : 37;
}
};
// 2、新建 Proxy 對象
const p = new Proxy({}, handler);
// 3、執(zhí)行操作
p.a = 1;
p.b = undefined;
// 4、查看結(jié)果
console.log(p.a, p.b); // 1, undefined
console.log('c' in p, p.c); // false, 37
2、目標(biāo)對象被正確修改
let target = {};
let p = new Proxy(target, {});
p.a = 37; // 操作轉(zhuǎn)發(fā)到目標(biāo)
console.log(target.a); // 37. 操作已經(jīng)被正確地轉(zhuǎn)發(fā)
3、使用 set handler 做數(shù)據(jù)驗證
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');
}
}
// The default behavior to store the value
obj[prop] = value;
// 表示成功
return true;
}
};
let person = new Proxy({}, validator);
person.age = 100;
console.log(person.age);
// 100
person.age = 'young';
// 拋出異常: Uncaught TypeError: The age is not an integer
person.age = 300;
// 拋出異常: Uncaught RangeError: The age seems invalid
4、擴展構(gòu)造函數(shù)
function extend(sup, base) {
var descriptor = Object.getOwnPropertyDescriptor(
base.prototype, "constructor"
);
base.prototype = Object.create(sup.prototype);
var handler = {
construct: function(target, args) {
var obj = Object.create(base.prototype);
this.apply(target, obj, args);
return obj;
},
apply: function(target, that, args) {
sup.apply(that, args);
base.apply(that, args);
}
};
var proxy = new Proxy(base, handler);
descriptor.value = proxy;
Object.defineProperty(base.prototype, "constructor", descriptor);
return proxy;
}
var Person = function (name) {
this.name = name
};
var Boy = extend(Person, function (name, age) {
this.age = age;
});
Boy.prototype.sex = "M";
var Peter = new Boy("Peter", 13);
console.log(Peter.sex); // "M"
console.log(Peter.name); // "Peter"
console.log(Peter.age); // 13
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
fiv.js實現(xiàn)flv文件blob流實時播放的項目實踐
本文主要介紹了fiv.js實現(xiàn)flv文件blob流實時播放的項目實踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
封裝一個vue中也可使用的uniapp的全局彈窗組件(任何頁面都可以彈出)
在寫uniapp小程序的時候,彈窗提醒經(jīng)常會用到,雖然彈窗的組件很多,但是通常別人封裝好的彈窗組件自定義度不高,很難匹配自己的ui需求,這篇文章主要給大家介紹了封裝一個vue中也可使用的uniapp的全局彈窗組件的相關(guān)資料,這個組件在任何頁面都可以彈出,需要的朋友可以參考下2023-02-02
Javascript在IE和Firefox瀏覽器常見兼容性問題總結(jié)
這篇文章主要介紹了Javascript在IE和Firefox瀏覽器常見兼容性問題,結(jié)合實例形式總結(jié)分析了javascript在IE與Firefox瀏覽器中常見的各種兼容性問題與相應(yīng)的解決方法,需要的朋友可以參考下2016-08-08

