[技术分享]JavaScript 杂谈系列之 Getter,Setter 和 Proxy

shangjin发布于3 个月前 • 197 次阅读

今天小编心血来潮,想着写写getter,setter和proxy,修道之人偶尔会出现这种情况,心血来潮想做点啥,还好,不瞎扯了,进入正题。getter和setter说白了就是js底层提供了一些方法,方便大家去取值和赋值,如果想了解更多,自行百度!因为小编也很讨厌概念性的东西,觉得还是代码看着有意思!proxy呢,大家可以把它看成是代理,返回一个代理后,也就是包装后的新对象。今天小编用getter,setter和proxy来分别实现一个对象的取值和赋值,下面上代码!

image

上图我们创造了一个obj对象,同时绑定了getter和setter方法,这个时候我们可以直接通过obj.value获得里面的_value的值,同时可以通过obj.value = 6修改里面的_value的值,那么小伙伴们可能要问了,我通过obj._value也能获得,为啥要这么麻烦,注意,这里的写法是能获得,但是我们有的时候需要保护私有变量,不想让外界随意修改,这个时候就需要getter和setter了。

image

大家看图中的私有变量_value,fn是构造函数的实例,通过fn.value和fn.value=4分别调用getter和setter方法获取私有变量_value的值,修改私有变量_value的值。但是不能通过外面fn._value访问到_value的值,很好的保护了私有变量,毕竟只能通过我们的方法修改嘛!下面我们来看看proxy如何实现类似的效果!

image

这里我们定义了一个p函数,返回被new Proxy代理后的obj对象,我们假设用户无法接触到obj对象,只能接触到p函数返回的值,也就是_proxy,我们通过_proxy._value获得obj对象中_value的值,通过_proxy._value=6修改obj对象中_value值,同时如果我们赋值的属性不存在,_proxy会给obj自动添加新属性和值,方便管理。

总结下,使用proxy会消耗一定的性能,但是方便属性管理,还有其他功能,便于对象扩展应用。使用getter和setter的性能消耗低,但是扩展和维护不如proxy,具体看大家自己取舍把。

共收到 0 条回复