用于拦截设置属性值的操作,参数于 get
方法相比,多了一个 value
,即要设置的属性值~
在严格模式下,set
方法需要返回一个布尔值,返回 true
代表此次设置属性成功了,如果返回false
且设置属性操作失败,并且会抛出一个TypeError
。
let proxy = new Proxy({},{
set : function (target,prop,value) {
if( prop === ‘count’ ){
if( typeof value === ‘number’){
console.log(‘success’)
target[prop] = value;
}else{
throw new Error(‘The variable is not an integer’)
}
}
}
})
proxy.count = ‘10’; // The variable is not an integer
proxy.count = 10; // success
上述我们通过修改 set
方法,对 目标对象中的 count
属性赋值做了限制,我们要求 count
属性赋值必须是一个 number
类型的数据,如果不是,就返回一个错误 The variable is not an integer
,我们第一次为 count
赋值字符串 '10'
, 抛出异常,第二次赋值为数字 10
, 打印成功,因此,我们可以用 set
方法来做一些数据校验!
同样,如果目标属性是不可写及不可配置的,则不能改变它的值,即赋值无效,如下:
let obj = {};
Object.defineProperty(obj, “count”, {
configurable: false,
enumerable: false,
value: 10,
writable: false
});
let proxy = new Proxy(obj,{
set : function (target,prop,value) {
target[prop] = 20;
}
})
proxy.count = 20 ;
console.log(proxy.count) // 10
上述 obj
对象中的 count
属性,我们设置它不可被修改,并且默认值,我们给定为 10
,那么即使给其赋值为 20
,结果仍旧没有变化!
handler.apply(target, thisArg, argumentsList)
用于拦截函数的调用,共有三个参数,分别是目标对象(函数)target
,被调用时的上下文对象 thisArg
以及被调用时的参数数组 argumentsList
,该方法可以返回任何值。
target
必须是是一个函数对象,否则将抛出一个TypeError
;
function sum(a, b) {
return a + b;
}
const handler = {
apply: function(target, thisArg, argumentsList) {
console.log(Calculate sum: ${argumentsList}
);
return target(argumentsList[0], argumentsList[1]) * 2;
}
};
let proxy = new Proxy(sum, handler);
console.log(sum(1, 2)); // 3
console.log(proxy(1, 2)); // Calculate sum:1,2
// 6
实际上,apply
还会拦截目标对象的 Function.prototype.apply()
和 Function.prototype.call()
,以及 Reflect.apply()
操作,如下:
console.log(proxy.call(null, 3, 4)); // Calculate sum:3,4
// 14
console.log(Reflect.apply(proxy, null, [5, 6])); // Calculate sum: 5,6
// 22
handler.construct(target, argumentsList, newTarget)
construct
用于拦截 new
操作符,为了使 new
操作符在生成的 Proxy
对象上生效,用于初始化代理的目标对象自身必须具有[[Construct]]
内部方法;它接收三个参数,目标对象 target
,构造函数参数列表 argumentsList
以及最初实例对象时,new
命令作用的构造函数,即下面例子中的 p
。
let p = new Proxy(function() {}, {
construct: function(target, argumentsList, newTarget) {
console.log(newTarget === p ); // true
console.log(‘called: ’ + argumentsList.join(’, ')); // called:1,2
return { value: ( argumentsList[0] + argumentsList[1] )* 10 };
}
});
console.log(new p(1,2).value); // 30
另外,该方法必须返回一个对象,否则会抛出异常!
var p = new Proxy(function() {}, {
construct: function(target, argumentsList, newTarget) {
return 2
}
});
console.log(new p(1,2)); // Uncaught TypeError
handler.has(target,prop)
has
方法可以看作是针对 in
操作的钩子,当我们判断对象是否具有某个属性时,这个方法会生效,典型的操作就是 in
,改方法接收两个参数 目标对象 target
和 要检查的属性 prop
,并返回一个 boolean
值。
let p = new Proxy({}, {
has: function(target, prop) {
if( prop[0] === ‘_’ ) {
console.log(‘it is a private property’)
return false;
}
return true;
}
});
console.log(‘a’ in p); // true
console.log(‘_a’ in p ) // it is a private property
// false
上述例子中,我们用 has
方法隐藏了属性以下划线_
开头的私有属性,这样在判断时候就会返回 false
,从而不会被 in
运算符发现~
要注意,如果目标对象的某一属性本身不可被配置,则该属性不能够被代理隐藏,如果目标对象为不可扩展对象,则该对象的属性不能够被代理隐藏,否则将会抛出 TypeError
。
let obj = { a : 1 };
Object.preventExtensions(obj); // 让一个对象变的不可扩展,也就是永远不能再添加新的属性
let p = new Proxy(obj, {
has: function(target, prop) {
return false;
}
});
console.log(‘a’ in p); // TypeError is thrown
上面介绍了这么多,也算是对 Proxy
又来一个初步的了解,那么我们就可以利用 Proxy
手动实现一个极其简单数据的双向绑定
主要看功能的实现,所以布局方面我就随手一挥了~
页面结构如下:
主要还是得看逻辑部分:
//获取段落的节点
const paragraph = document.getElementById(‘paragraph’);
//获取输入框节点
const input = document.getElementById(‘input’);
//需要代理的数据对象
const data = {
text: ‘hello world’
}
const handler = {
//监控 data 中的 text 属性变化
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
最后
资料过多,篇幅有限
CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!**
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
[外链图片转存中…(img-E84XT51R-1711821470024)]
最后
[外链图片转存中…(img-EjuOaIOB-1711821470025)]
[外链图片转存中…(img-80nLEVWQ-1711821470025)]
资料过多,篇幅有限
CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。