JavaScript?Object.defineProperty與proxy代理模式的使用詳細分析
1. Object.defineProperty
const obj = {};
Object.defineProperty(obj,prop,descript);
- 參數 obj 要定義屬性的對象
- prop 要定義的屬性
- descript 屬性描述符
返回值:被傳遞給函數的對象
descript接收一個對象作為配置:
- writable
屬性是否可寫 默認值fasle
- value
屬性的值 默認值false
- enumerable
屬性是否可枚舉,關系到能否被for…in、Object.keys()以及in關鍵字遍 默認值false
- configurable 屬性是否可以被defineProperty定義
- set setter函數
- get getter函數
使用defineProperty定義的屬性descript默認值全為false
const obj = {};
obj.name = 'a';
//等同于
Object.defineProperty(obj,'name',{
configurable: true,
value: 'a',
writable: true,
enumerable: true,
});
conts obj1 = Object.defineProperty({},'name',{value: 'jack'});
//等同于
Object.defineProperty({},'name',{
value: 'jack',
enumerable: false,
writable: false,
configurable: fasle,
})value和writable不能和setter與getter一起使用
const obj = Object.defineProperty({},name,{
writable:true,
value: 'jack',
set:function(newVal){
return newVal;
},
get:function(val){
return val;
}
});執(zhí)行上面的代碼出現異常:
Uncaught TypeError: property descriptors must not specify a value or be writable when a getter or setter has been specified.
也就是說我們使用writable和value或者set和get去定義屬性的讀寫,不能混合使用
const obj = Object.defineProperty({},name,{
writable:true,
});
const obj1 = Object.defineProperty({},name,{
set:function(newVal){
return newVal;
},
get:function(val){
return val;
}
});
obj.name = 'ian';
obj1.name = 'jack';2. Object.defineProperties
Object.defineProperties用法與Object.definePropert一致,可以同時定義多個屬性
const obj = Object.defineProperties(obj, {
name: {
configurable: true,
enumerable: true,
writable: true,
value: 'ian',
},
gender: {
writable: false,
value: 'male'
},
age: {
set: function (val) { return val },
set: function (val) { return val },
}
});
3. proxy
proxy的功能是代理對象,用于攔截對象的基本操作和自定義,與Object.defineProperty類似,區(qū)別是proxy代理整個對象,defineProperty只能代理某個屬性。
語法
const obj = {};
const proxyObj = new Proxy({obj, handler});
handler 對象的方法:
- setProptotypeOf()
Object.setPropertyOf的捕捉器
- isExtensible()
Object.isExtensible的捕捉器
- preventExtensions()
Object.preventExtensions方法的捕捉器
- getOwnPropertyDescritor()
Object.getOwnPropertyDescriptor方法的捕捉器
- defineProperty()
Object.definePropert方法的捕捉器
- has()
in操作符的捕捉器
- deleteProperty()
delete操作符的捕捉器
- set
屬性設置操作的捕捉器
- get
屬性獲取操作的捕捉器
- onwKeys
Object.getOwnPropertyNames和Object.getOwnSymbos的捕捉器
- apply
函數調用操作的捕捉器
- constructor
new操作符的捕捉器
使用get捕捉器
const obj = { name: 'ian', age: 21 };
const proxyObj = new Proxy(obj, {
get: function (obj, prop) {
return prop in obj ? obj[prop] : 'prop not existent';
},
});
console.log(proxyObj.gender); //prop not existent
使用set捕捉器驗證屬性值
const obj = { name: 'ian' };
const proxyObj = new Proxy(obj, {
set: function (obj, prop, value) {
if (prop === 'age') {
if (typeof value !== 'number') {
throw new TypeError('The age is not Integer');
};
if (value > 200) {
throw new RangeError('The age is not invalid');
};
}
obj[prop] = value;
//標識修改成功
return true;
}
});
proxyObj.gender = 'male'; //male
proxyObj.age = '二十'; // Uncaught TypeError: The age is not Integer
proxyObj.age = 201; //Uncaught RangeError: The age is not invalid
proxyObj.age = 20; //20捕獲new操作符
function Person(name) {
this.name = name;
};
const ProxyPerson = new Proxy(Person, {
construct: function (target, args) {
//使用原本的構造函數
return new Person(...args);
}
})
var jack = new ProxyPerson('jack');
console.log(jack);//Object { name: "jack" }捕獲函數調用
//執(zhí)行原本的函數
const proxyFoo = new Proxy(log,{
apply:function(target,that,args){
target(args);
}
});
proxyFoo('foo'); //foo
//自定義函數
const proxyFoo1 = new Proxy(log, {
apply: function (target, that, args) {
//將log改成alert執(zhí)行
alert(args);
}
});
proxyFoo1('foo'); //foo代理模式
當我們去訪問一個數據的時候,不直接去訪問數據,而是通過代理(Proxy)作為一個中間者替我們去獲取和設置數據,在proxy層可以做一些訪問控制等, 例如進行數據的校驗數,據合法后再設置給原數據,起到一個保護和校驗的功能。常見的代理模式有:
- 保護代理
給被調用者提供訪問控制,確認調用者的權限
- 遠程代理
- 虛擬代理
用來代替巨大的對象,確保在需要的時候才被創(chuàng)建
- 智能引用代理
總結
- proxy是瀏覽器提供的代理方式,相比較defineProperty來說Proxy更加靈活,能代理對象的多個屬性
- proxy還能捕捉和攔截數組、函數、構造器、以及Object的一些方法和操作符
到此這篇關于JavaScript Object.defineProperty與proxy代理模式的使用詳細分析的文章就介紹到這了,更多相關JS Object.defineProperty與proxy內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Bootstrap柵格系統使用方法及頁面調整變形的解決方法,需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細介紹了bootstrap css樣式之表單的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
平時項目中筆者也常用dayjs,它確實很好用,Day.js有著幾乎和Moment.js一樣的API,因此如果你用過Moment.js,那么也可以輕松使用Day.js,這篇文章主要給大家介紹了關于時間處理工具day.js常用方法的相關資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了javascript批量修改文件編碼格式的方法,分析了使用javascript第三方包批量修改文件編碼的技巧,需要的朋友可以參考下2015-01-01
cssSlidy是一款支持手機移動端的焦點圖輪播插件，支持標題設置，滑動動畫，間隔時間等。這篇文章主要基于cssSlidy.js插件實現響應式手機圖片輪播效果，2016-08-08
這篇文章主要介紹了理解JavaScript設計模式中的單例模式，單例模式即Singleton?Pattern是最簡單的設計模式之一，下文更多相關介紹感興趣的小伙伴可以參考一下2022-04-04
常用js,css文件統一加載方法(推薦) 并在加載之后調用回調函數
下面小編就為大家?guī)硪黄Ｓ胘s,css文件統一加載方法(推薦) 并在加載之后調用回調函數。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了通過偽協議解決父頁面與iframe頁面通信的問題,需要的朋友可以參考下2015-04-04
下面小編就為大家?guī)硪黄猨s學習階段總結(必看篇)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了JS簡單實現tab切換效果的多窗口顯示功能,可實現響應鼠標事件的文字切換顯示效果,涉及javascript頁面元素遍歷與樣式變換相關操作技巧,需要的朋友可以參考下2016-09-09