在 JavaScript 的对象中,我们经常需要对某些属性进行监听或者限制,以保证程序的正确性和安全性。ES6 引入了 Proxy
对象来实现这一功能,但是它的使用成本较高,而且不兼容低版本浏览器。ES12 中新增的 Setter & Getter 方法,提供了一种更加简单、易用、兼容性更好的解决方案。
Setter & Getter 方法的定义
Setter & Getter 方法是一种特殊的方法,它们分别用于设置和获取对象属性的值。在 ES12 中,我们可以通过 set
和 get
关键字来定义 Setter & Getter 方法,示例如下:
-- -------------------- ---- ------- ----- --- - - ------ --- --- ----------- - ------------------- -- --------- ---------- - ------ -- --- ------ - ------------------- -- --------- ------ ----------- - -- -------- - -------- -- ------ -- ------ ---------------------- -- ------ -- ------- -----
在上面的示例中,我们定义了一个对象 obj
,其中包含了一个 _name
属性和一个 Setter & Getter 方法。Setter 方法用于设置 _name
属性的值,Getter 方法用于获取 _name
属性的值。当我们给 obj
的 name
属性赋值时,Setter 方法会被调用,当我们获取 obj
的 name
属性值时,Getter 方法会被调用。
Setter & Getter 方法的应用场景
Setter & Getter 方法可以应用于多种场景,例如:
监听对象属性的变化
我们可以利用 Setter 方法来监听对象属性的变化,从而在属性值发生变化时执行一些操作。例如:
-- -------------------- ---- ------- ----- --- - - ------ --- --- ----------- - ------------------- -- ------- ----- -- ----------- ---------- - ------ ---------------- ---- -- ---------------- -- --- ------ - ------------------- -- --------- ------ ----------- - -- -------- - -------- -- ------ -- ------- ----- -- ------ --- ---- -- ----- ---------------------- -- ------ -- ------- -----
在上面的示例中,我们利用 Setter 方法来监听 obj
的 name
属性的变化,当 name
属性被赋值时,Setter 方法会被调用,并打印出属性值的变化情况。
对象属性的限制
我们可以利用 Setter 方法来对对象属性的值进行限制,从而保证程序的正确性和安全性。例如:
-- -------------------- ---- ------- ----- --- - - ----- -- --- ---------- - -- ------ - -- - ----- --- ---------- ------ -- ----------- - --------- - ------ -- --- ----- - ------ ---------- - -- ------- - --- --------------------- -- -- ------- - --- -- ------ --- ------ -- --------
在上面的示例中,我们利用 Setter 方法对 obj
的 age
属性的值进行了限制,当属性值小于 0 时,会抛出一个错误。
总结
Setter & Getter 方法是 ES12 中的一个新增特性,它可以用于监听对象属性的变化、限制属性的值等多种场景。Setter & Getter 方法的使用比 Proxy
对象更加简单、易用、兼容性更好,是一个非常实用的特性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/662e87e7d3423812e4c604dc