zoukankan      html  css  js  c++  java
  • 对象属性配置 属性的 getter 和 setter

    属性的 getter 和 setter

    有两种类型的对象属性

    第一种是 数据属性。我们已经知道如何使用它们了。到目前为止,我们使用过的所有属性都是数据属性。

    第二种类型的属性是新东西。它是 访问器属性(accessor properties)。它们本质上是用于获取和设置值的函数,但从外部代码来看就像常规属性。

    Getter 和 setter

    访问器属性由 “getter” 和 “setter” 方法表示。在对象字面量中,它们用 get 和 set 表示:

    let obj = {
      get propName() {
        // 当读取 obj.propName 时,getter 起作用
      },
    
      set propName(value) {
        // 当执行 obj.propName = value 操作时,setter 起作用
      }
    };

    当读取 obj.propName 时,getter 起作用,当 obj.propName 被赋值时,setter 起作用。

    例如,我们有一个具有 name 和 surname 属性的对象 user

    let user = {
      name: "John",
      surname: "Smith"
    };

    现在我们想添加一个 fullName 属性,该属性值应该为 "John Smith"。当然,我们不想复制粘贴已有的信息,因此我们可以使用访问器来实现:

     
    let user = {
      name: "John",
      surname: "Smith",
    
      get fullName() {
        return `${this.name} ${this.surname}`;
      }
    };
    
    alert(user.fullName); // John Smith

    从外表看,访问器属性看起来就像一个普通属性。这就是访问器属性的设计思想。我们不以函数的方式 调用 user.fullName,我们正常 读取 它:getter 在幕后运行。

    截至目前,fullName 只有一个 getter。如果我们尝试赋值操作 user.fullName=,将会出现错误:

     
    let user = {
      get fullName() {
        return `...`;
      }
    };
    
    user.fullName = "Test"; // Error(属性只有一个 getter)

    让我们通过为 user.fullName 添加一个 setter 来修复它:

     
    let user = {
      name: "John",
      surname: "Smith",
    
      get fullName() {
        return `${this.name} ${this.surname}`;
      },
    
      set fullName(value) {
        [this.name, this.surname] = value.split(" ");
      }
    };
    
    // set fullName 将以给定值执行
    user.fullName = "Alice Cooper";
    
    alert(user.name); // Alice
    alert(user.surname); // Cooper

    现在,我们就有一个“虚拟”属性。它是可读且可写的。

    访问器描述符

    访问器属性的描述符与数据属性的不同。

    对于访问器属性,没有 value 和 writable,但是有 get 和 set 函数

    所以访问器描述符可能有:

    • get —— 一个没有参数的函数,在读取属性时工作,
    • set —— 带有一个参数的函数,当属性被设置时调用,
    • enumerable —— 与数据属性的相同,
    • configurable —— 与数据属性的相同。

    例如,要使用 defineProperty 创建一个 fullName 访问器,我们可以使用 get 和 set 来传递描述符:

     
    let user = {
      name: "John",
      surname: "Smith"
    };
    
    Object.defineProperty(user, 'fullName', {
      get() {
        return `${this.name} ${this.surname}`;
      },
    
      set(value) {
        [this.name, this.surname] = value.split(" ");
      }
    });
    
    alert(user.fullName); // John Smith
    
    for(let key in user) alert(key); // name, surname

    请注意,一个属性要么是访问器(具有 get/set 方法),要么是数据属性(具有 value),但不能两者都是

    如果我们试图在同一个描述符中同时提供 get 和 value,则会出现错误:

     
    // Error: Invalid property descriptor.
    Object.defineProperty({}, 'prop', {
      get() {
        return 1
      },
    
      value: 2
    });

    更聪明的 getter/setter

    Getter/setter 可以用作“真实”属性值的包装器,以便对它们进行更多的控制。

    例如,如果我们想禁止太短的 user 的 name,我们可以创建一个 setter name,并将值存储在一个单独的属性 _name 中:

     
    let user = {
      get name() {
        return this._name;
      },
    
      set name(value) {
        if (value.length < 4) {
          alert("Name is too short, need at least 4 characters");
          return;
        }
        this._name = value;
      }
    };
    
    user.name = "Pete";
    alert(user.name); // Pete
    
    user.name = ""; // Name 太短了……

    所以,name 被存储在 _name 属性中,并通过 getter 和 setter 进行访问。

    从技术上讲,外部代码可以使用 user._name 直接访问 name。但是,这儿有一个众所周知的约定,即以下划线 "_" 开头的属性是内部属性,不应该从对象外部进行访问。

    兼容性

    访问器的一大用途是,它们允许随时通过使用 getter 和 setter 替换“正常的”数据属性,来控制和调整这些属性的行为。

    想象一下,我们开始使用数据属性 name 和 age 来实现 user 对象:

    function User(name, age) {
      this.name = name;
      this.age = age;
    }
    
    let john = new User("John", 25);
    
    alert( john.age ); // 25

    ……但迟早,情况可能会发生变化。我们可能会决定存储 birthday,而不是 age,因为它更精确,更方便:

    function User(name, birthday) {
      this.name = name;
      this.birthday = birthday;
    }
    
    let john = new User("John", new Date(1992, 6, 1));

    现在应该如何处理仍使用 age 属性的旧代码呢?

    我们可以尝试找到所有这些地方并修改它们,但这会花费很多时间,而且如果其他很多人都在使用该代码,那么可能很难完成所有修改。而且,user 中有 age 是一件好事,对吧?

    那我们就把它保留下来吧。

    为 age 添加一个 getter 来解决这个问题:

     
    function User(name, birthday) {
      this.name = name;
      this.birthday = birthday;
    
      // 年龄是根据当前日期和生日计算得出的
      Object.defineProperty(this, "age", {
        get() {
          let todayYear = new Date().getFullYear();
          return todayYear - this.birthday.getFullYear();
        }
      });
    }
    
    let john = new User("John", new Date(1992, 6, 1));
    
    alert( john.birthday ); // birthday 是可访问的
    alert( john.age );      // ……age 也是可访问的

    现在旧的代码也可以工作,而且我们还拥有了一个不错的附加属性。

  • 相关阅读:
    Oracle 日期总结
    JavaScript 获取文件名,后缀名
    JavaScript Array pop(),shift()函数
    JavaScript Array splice函数
    Oracle 创建表空间、临时表空间、创建用户并指定表空间、授权,删除用户及表空间
    eclipse debug调试java程序的九个技巧
    Oracle dos连接数据库基本操作
    Oracle 隐式游标 存储过程
    Oracle 修改表名
    Oracle 时间 MM-dd形式转换
  • 原文地址:https://www.cnblogs.com/perfectdata/p/15598663.html
Copyright © 2011-2022 走看看