目录1. Object.defineProperty2. Object.defineProperties3. proxy代理模式总结1. Object.defineProperty
const obj = {};
Object.defineProperty(obj,prop,descript);
返回值:被传递给函数的对象
descript接收一个对象作为配置:
属性是否可写 默认值fasle
属性的值 默认值false
属性是否可枚举,关系到能否被for…in、Object.keys()以及in关键字遍 默认值false
使用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;
}
});
执行上面的代码出现异常:
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';
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 },
}
});
proxy的功能是代理对象,用于拦截对象的基本操作和自定义,与Object.defineProperty类似,区别是proxy代理整个对象,defineProperty只能代理某个属性。
语法
const obj = {};
const proxyObj = new Proxy({obj, handler});
handler 对象的方法:
Object.setPropertyOf的捕捉器
Object.isExtensible的捕捉器
Object.preventExtensions方法的捕捉器
Object.getOwnPropertyDescriptor方法的捕捉器
Object.definePropert方法的捕捉器
in操作符的捕捉器
delete操作符的捕捉器
属性设置操作的捕捉器
属性获取操作的捕捉器
Object.getOwnPropertyNames和Object.getOwnSymbos的捕捉器
函数调用操作的捕捉器
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" }
捕获函数调用
//执行原本的函数
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执行
alert(args);
}
});
proxyFoo1('foo'); //foo
当我们去访问一个数据的时候,不直接去访问数据,而是通过代理(Proxy)作为一个中间者替我们去获取和设置数据,在proxy层可以做一些访问控制等, 例如进行数据的校验数,据合法后再设置给原数据,起到一个保护和校验的功能。常见的代理模式有:
给被调用者提供访问控制,确认调用者的权限
用来代替巨大的对象,确保在需要的时候才被创建
到此这篇关于javascript Object.defineProperty与proxy代理模式的使用详细分析的文章就介绍到这了,更多相关js Object.defineProperty与proxy内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: JavaScript Object.defineProperty与proxy代理模式的使用详细分析
本文链接: https://lsjlt.com/news/169403.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0