JavaScript Getter 和 Setter

x33g5p2x  于2022-04-19 转载在 Java  
字(2.2k)|赞(0)|评价(0)|浏览(486)

在本教程中,您将借助示例了解 JavaScript 的 getter 和 setter 方法。
    在 JavaScript 中,有两种对象属性:

  • 数据属性
  • 访问器属性
数据属性

这是我们在之前的教程中一直使用的数据属性示例。

  1. const student = {
  2. // data property
  3. firstName: 'Monica';
  4. };
访问器属性

在 JavaScript 中,访问器属性是获取或设置对象值的方法。为此,我们使用这两个关键字:

  • get - 定义一个 getter 方法来获取属性值
  • set - 定义一个 setter 方法来设置属性值
JavaScript Getter

在 JavaScript 中,getter 方法用于访问对象的属性。例如,

  1. const student = {
  2. // data property
  3. firstName: 'Monica',
  4. // accessor property(getter)
  5. get getName() {
  6. return this.firstName;
  7. }
  8. };
  9. // accessing data property
  10. console.log(student.firstName); // Monica
  11. // accessing getter methods
  12. console.log(student.getName); // Monica
  13. // trying to access as a method
  14. console.log(student.getName()); // error

在上面的程序中,创建了一个 getter 方法 getName() 来访问对象的属性。

  1. get getName() {
  2. return this.firstName;
  3. }

注意:要创建 getter 方法,请使用 get 关键字。
    而且在访问值时,我们将值作为属性访问。

  1. student.getName;

当您尝试将值作为方法访问时,会发生错误。

  1. console.log(student.getName()); // error
JavaScript Setter

在 JavaScript 中,setter 方法用于更改对象的值。例如,

  1. const student = {
  2. firstName: 'Monica',
  3. //accessor property(setter)
  4. set changeName(newName) {
  5. this.firstName = newName;
  6. }
  7. };
  8. console.log(student.firstName); // Monica
  9. // change(set) object property using a setter
  10. student.changeName = 'Sarah';
  11. console.log(student.firstName); // Sarah

在上面的示例中,setter 方法用于更改对象的值。

  1. set changeName(newName) {
  2. this.firstName = newName;
  3. }

注意:要创建 setter 方法,请使用 set 关键字。
    如上程序所示,firstName 的值为 Monica。
    然后将值更改为 Sarah。

  1. student.changeName = 'Sarah';

注意:Setter 必须只有一个形式参数。

JavaScript Object.defineProperty()

在 JavaScript 中,您还可以使用 Object.defineProperty() 方法来添加 getter 和 setter。例如,

  1. const student = {
  2. firstName: 'Monica'
  3. }
  4. // getting property
  5. Object.defineProperty(student, "getName", {
  6. get : function () {
  7. return this.firstName;
  8. }
  9. });
  10. // setting property
  11. Object.defineProperty(student, "changeName", {
  12. set : function (value) {
  13. this.firstName = value;
  14. }
  15. });
  16. console.log(student.firstName); // Monica
  17. // changing the property value
  18. student.changeName = 'Sarah';
  19. console.log(student.firstName); // Sarah

在上面的示例中,Object.defineProperty() 用于访问和更改对象的属性。
    使用 Object.defineProperty() 的语法是:

  1. Object.defineProperty(obj, prop, descriptor)

Object.defineProperty() 方法接受三个参数。

  • 第一个参数是 objectName (对象名称)。
  • 第二个参数是属性的名称。
  • 第三个参数是描述属性的对象。

上一教程 :JS Constructor Function                                          下一教程 :JS Prototype

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/getter-setter

相关文章

最新文章

更多