在 ES7 中,类的 getter 和 setter 升级了。过去,我们在类中使用 getter 和 setter 的时候,需要使用 Object.defineProperty() 函数来进行定义;而在 ES7 中,我们可以通过直接使用 @ 属性标记符来实现 getter 和 setter。
getter 和 setter 的基本使用:
getter 和 setter 可以让我们在访问一个类的成员变量时添加一些自己的逻辑,从而对数据进行处理。
下面是一个使用 getter 和 setter 的示例代码:
-- -------------------- ---- ------- ----- ------ - ----------------- ---- - ---------- - ----- --------- - ---- - --- ------ - ------ ----------- - --- ---------- - ---------- - ----- - --- ----- - ------ ---------- - --- -------- - -- ---- - -- - --------- - ---- - - - --- - - --- -------------- ---- -------------------- -- ------ ------ - ------- -- -------- -------------------- -- ------ ------------------- -- ---- ----- - ---- -- --------------- ------------------- -- ----
在上面的代码中,我们使用了 getter 和 setter 来更加灵活地处理数据。get name()
和 set name(name)
分别用来获取和设置 name 属性,get age()
和 set age(age)
分别用来获取和设置 age 属性。在上面代码的执行过程中,我们可以看到,通过 getter 和 setter 我们可以动态地修改属性的值,并在修改属性之前进行一些自己的业务逻辑处理。
使用装饰器语法:
在 ES7 中,我们可以使用装饰器语法来定义 getter 和 setter。下面是使用装饰器语法定义 getter 和 setter 的示例代码:
-- -------------------- ---- ------- ----- ------ - ----------------- ---- - ---------- - ----- --------- - ---- - --------- --- ------ - ------ ----------- - --- ---------- - ---------- - ----- - --------- --- ----- - ------ ---------- - --- -------- - -- ---- - -- - --------- - ---- - - - -------- ---------------- ---- ----------- - ----------------------- - ----- ------ ----------- - --- - - --- -------------- ---- -------------------- -- ------ ------ - ------- -- -------- -------------------- -- ------ ------------------- -- ---- ----- - ---- -- --------------- ------------------- -- ----
在上述代码中,我们使用了 @property
装饰器来定义 getter 和 setter,同时通过 target
、key
和 descriptor
参数来进行属性描述符的设置。通过这种方式,我们可以更加自由和灵活地定义和修改类的 getter 和 setter。
总结
在 ES7 中,类的 getter 和 setter 升级了,并可以通过直接使用 @ 属性标记符来定义。通过使用 getter 和 setter,我们可以更加灵活地处理数据,并在获取和设置属性的过程中添加自己的业务逻辑。同时,我们也可以使用装饰器语法来更加高效、清晰地定义类的 getter 和 setter。通过学习 getter 和 setter,我们可以更好地掌握类的语法,并在实际应用中更加灵活地处理数据。
端点:
- https://sasenren.github.io/easier-than-ES6/chapter6/
- https://www.cnblogs.com/vicky084/p/9776279.html
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64740902968c7c53b017a2b1