×

理解JS中getter和setter的应用

作者:天空2020.07.02来源:Web前端之家浏览:6053评论:0

getter 和 setter 存在于大多数面向对象的编程语言里,包括JavaScript。借助于它们以安全的方式来访问对象的属性。使用 getter 可以访问属性值,而 setter 可以修改属性值。本文中,我们会介绍如何在 JavaScript 中创建 getter 和 setter。

如何在JavaScript中创建 getter 和 setter?

一个 JavaScript 对象可以有多个属性和方法,其中属性是键值对格式,而方法是应用在该对象上的函数。

例如 Car.color 是一个属性,而 Car.drive() 是 Car 对象的一个方法。使用 getter 可以访问 Car 对象的 color 属性,你可以修改它的值(例如,从 blue 改为 black)。

使用 getter 和 setter,你只能查询和设置对象中属性的值,但是不适用于对象的方法,因为方法不是静态的。

创建 getter 和 setter 有三种不同的方式:

· 默认的句法(getter 和 setter 方法)

· 使用 get 和 set 关键字

· 使用 Object.defineProperty() 方法

Getter 方法

访问对象属性最容易的方式是为每个属性定义一个获取其值的方法。在下面的例子中,myCar 对象有两个属性:color 和 make。这是以对象字面量的方式创建的对象:

你可以这样直接访问color和make属性:

虽然这样可以工作,不过使用方法来访问而不是直接访问属性有一些好处。例如,你可以在获取属性值之前做一些检查。

你可以为color和make属性定义getter方法,如下:

上面的getter方法中使用了 this 关键字来指向属性所属的对象(在这个例子中是 myCar)。getter 中的 return 语句意味着返回当前对象的 color 或者 make 属性的值。

要访问 myCar 对象的属性,你需要调用这些 getter 方法:

如果需要的话,可以在 getter 方法中增加额外的逻辑。例如,你可以编写一个 getCar() 方法来同时获取这两个属性值:

Setter 方法

除了 getter,你可以使用JavaScript函数来创建 setter 方法。

因为 setter 存在的目的是修改属性的值,它们会以新的参数值为参数。

设置了新的值之后,你可以调用 getter 方法来检查一下是否成功修改了。

get 关键字

使用 get 关键字是创建 getter 的另一种方式。你可以用 get 关键字来定义 myCar.color 和 myCar.make 属性:

get 句法将对象属性绑定到了查询该属性时会被调用的函数。在上面的代码中,查询 myCar 的 color 属性时,会调用对应的函数来返回存储于 defColor 中的数据。

由于旧版 IE (IE 8-)不支持 get 关键字,如果你需要支持旧版浏览器的话,需要使用上面讲到的 getter 方法。

set 关键字

和 get 对应,当你尝试设置属性时,set 句法会对象的属性绑定到要调用的函数。

Object.defineProperty() 方法

你可以用 Object 全局对象的 defineProperty() 方法来为已有的对象设置属性。假设你已经有了一个对象 myCar,它有两个属性 defColor 和 defMake。稍后,我们使用 Object.defineProperty() 方法来增加 getter 和 setter:

实际上,Object.defineProperty() 不仅可以用于已有的对象上,也可以为新对象设置getter 和 setter。这种方式非常强大,特别是你想使用属性描述符时,例如 writable 或者 configurable。

总结

创建JavaScript对象时 getter 和 setter 不是必须的,不过它们在许多场景下很有用。最常见的使用场景是 (1)以安全的方式访问属性(2)在获取和设置属性值之前增加额外的处理逻辑。

您的支持是我们创作的动力!
温馨提示:本文作者系,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js20200702a1.html

网友评论文明上网理性发言已有0人参与

发表评论:

最新留言

  • Web前端之家

    已经加上了。...

  • 访客

    wordpress主题https://www.22vd.com,交换下友链麻烦通过...

  • Web前端之家

    你是可以试试的,其实用途有区别的。...

  • qdxx

    跟国内的比较Hchart等,如何?...

  • qdxx

    不错啊,收藏了!...

  • Web前端之家

    是的,多学习吧!...

  • qdxx

    这个的确坑,我也是刚遇到,感谢分享。...

  • 访客

    大苏打...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1