ES12 的 Setter & Getter 方法详解

阅读时长 4 分钟读完

在 JavaScript 的对象中,我们经常需要对某些属性进行监听或者限制,以保证程序的正确性和安全性。ES6 引入了 Proxy 对象来实现这一功能,但是它的使用成本较高,而且不兼容低版本浏览器。ES12 中新增的 Setter & Getter 方法,提供了一种更加简单、易用、兼容性更好的解决方案。

Setter & Getter 方法的定义

Setter & Getter 方法是一种特殊的方法,它们分别用于设置和获取对象属性的值。在 ES12 中,我们可以通过 setget 关键字来定义 Setter & Getter 方法,示例如下:

-- -------------------- ---- -------
----- --- - -
  ------ ---
  --- ----------- -
    ------------------- -- ---------
    ---------- - ------
  --
  --- ------ -
    ------------------- -- ---------
    ------ -----------
  -
--

-------- - -------- -- ------ -- ------
---------------------- -- ------ -- ------- -----

在上面的示例中,我们定义了一个对象 obj,其中包含了一个 _name 属性和一个 Setter & Getter 方法。Setter 方法用于设置 _name 属性的值,Getter 方法用于获取 _name 属性的值。当我们给 objname 属性赋值时,Setter 方法会被调用,当我们获取 objname 属性值时,Getter 方法会被调用。

Setter & Getter 方法的应用场景

Setter & Getter 方法可以应用于多种场景,例如:

监听对象属性的变化

我们可以利用 Setter 方法来监听对象属性的变化,从而在属性值发生变化时执行一些操作。例如:

-- -------------------- ---- -------
----- --- - -
  ------ ---
  --- ----------- -
    ------------------- -- ------- ----- -- -----------
    ---------- - ------
    ---------------- ---- -- ----------------
  --
  --- ------ -
    ------------------- -- ---------
    ------ -----------
  -
--

-------- - -------- -- ------ -- ------- ----- -- ------ --- ---- -- -----
---------------------- -- ------ -- ------- -----

在上面的示例中,我们利用 Setter 方法来监听 objname 属性的变化,当 name 属性被赋值时,Setter 方法会被调用,并打印出属性值的变化情况。

对象属性的限制

我们可以利用 Setter 方法来对对象属性的值进行限制,从而保证程序的正确性和安全性。例如:

-- -------------------- ---- -------
----- --- - -
  ----- --
  --- ---------- -
    -- ------ - -- -
      ----- --- ---------- ------ -- -----------
    -
    --------- - ------
  --
  --- ----- -
    ------ ----------
  -
--

------- - ---
--------------------- -- --

------- - --- -- ------ --- ------ -- --------

在上面的示例中,我们利用 Setter 方法对 objage 属性的值进行了限制,当属性值小于 0 时,会抛出一个错误。

总结

Setter & Getter 方法是 ES12 中的一个新增特性,它可以用于监听对象属性的变化、限制属性的值等多种场景。Setter & Getter 方法的使用比 Proxy 对象更加简单、易用、兼容性更好,是一个非常实用的特性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/662e87e7d3423812e4c604dc

纠错
反馈