在 ES9 中,JavaScript 增加了一种新的对象属性访问方法,即 getters 和 setters。使用这种方法,我们可以更加灵活地访问和更新对象的属性值。
什么是 getters 和 setters
getters 和 setters 是 JavaScript 中的两个特殊函数,通过这两个函数我们可以对对象属性进行更加灵活的访问和更新。
- getters: 读取对象属性值时调用的函数。
- setters: 更新对象属性值时调用的函数。
使用 getters 和 setters 可以帮助我们更好地控制属性的访问和更新,避免一些潜在的问题。
如何使用 getters 和 setters
使用 getters 和 setters 很简单,我们只需要在对象中定义一个属性,并将其设置为一个函数即可。这个函数就是我们的 getter 或 setter。
下面是一个使用 getter 和 setter 的示例:
----- --- - - ------ ------ --- ------ - ---------------- ------- ------ ----------- -- --- ----------- - ---------------- ------- ---------- - ------ - -- ---------------------- -- -- ---- ----- - ----- -------- - -------- -- -- ---- ----- ---------------------- -- -- ---- ----- - -------
在上面的示例中,我们定义了一个对象 obj
,其中包含一个属性 name
。name
的值实际上是 _name
,而使用 getter 和 setter 可以帮助我们更好地控制对 _name
的访问和更新。
在 get name()
中,我们输出了一段信息并返回了 _name
的值。在 set name(value)
中,我们同样输出了一段信息,并将 _name
的值设置为了 value
。
使用 console.log(obj.name)
可以看到,在访问 obj.name
时,会先调用 get name()
,输出一段信息,然后返回 _name
的值。
使用 obj.name = 'Jerry'
可以看到,在更新 obj.name
时,会先调用 set name(value)
,输出一段信息,然后将 _name
的值设置为 value
。
getters 和 setters 的指导意义
使用 getters 和 setters 可以帮助我们更好地控制对象属性的访问和更新,避免一些潜在的问题。
例如,我们可以在 setter 中对属性值进行验证,防止非法的值被设置。又例如,我们可以使用 getter 计算属性值,而不需要在对象中保存额外的变量。
下面是一个使用 getter 计算属性值的示例:
----- --- - - -------- -- --- ---------- - ------ ------------ - -- -- --- --------------- - ------------ - ----- - -- - -- -------------------------- -- -- - ------------ - -- ------------------------- -- -- -
在上面的示例中,我们定义了一个对象 obj
,其中包含一个属性 diameter
。diameter
的值实际上是 _radius
的两倍,而使用 getter 可以帮助我们计算出这个值。
在 get diameter()
中,我们返回了 _radius
的两倍。在 set diameter(value)
中,我们将 _radius
的值设置为了 value / 2
。
使用 console.log(obj.diameter)
可以看到,在访问 obj.diameter
时,会计算出 _radius
的两倍的值,然后返回。
使用 obj.diameter = 4
可以看到,在更新 obj.diameter
时,会将 _radius
的值设置为 4 / 2
,即 2
。
总结
getters 和 setters 是 JavaScript 中的两个特殊函数,通过这两个函数我们可以对对象属性进行更加灵活的访问和更新。使用 getters 和 setters 可以帮助我们更好地控制属性的访问和更新,避免一些潜在的问题。在实际开发中,我们可以使用 getters 和 setters 来提高代码的可读性和可维护性。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65d0191badd4f0e0ff92906a