JavaScript取值函数getter与存值函数setter怎么使用

在JavaScript中，对象属性的访问和修改通常是通过直接赋值或读取来实现的。然而，有时我们需要在访问或修改属性时执行一些额外的逻辑，这时就可以使用getter和setter函数。getter和setter允许我们在读取或设置属性值时执行自定义的操作，从而实现更灵活和强大的对象行为。

本文将详细介绍getter和setter的使用方法，并通过示例代码帮助你理解它们的应用场景。

1. 什么是getter和setter？

getter和setter是JavaScript对象中的特殊方法，用于定义属性的读取和写入行为。它们允许你在访问或修改属性时执行自定义的逻辑。

• getter：用于定义属性的读取行为。当你访问一个属性时，getter函数会被调用，并返回该属性的值。
• setter：用于定义属性的写入行为。当你给一个属性赋值时，setter函数会被调用，并允许你在赋值时执行一些额外的操作。

getter和setter通常与对象的属性一起使用，但它们并不是属性本身，而是属性的访问器。

2. 如何定义getter和setter？

在JavaScript中，getter和setter可以通过两种方式定义：

2.1 使用对象字面量定义

在对象字面量中，你可以使用get和set关键字来定义getter和setter。

const obj = {
  _value: 0, // 内部属性，通常以下划线开头表示私有

  get value() {
    console.log('Getting value');
    return this._value;
  },

  set value(newValue) {
    console.log('Setting value');
    if (newValue >= 0) {
      this._value = newValue;
    } else {
      console.log('Value must be non-negative');
    }
  }
};

console.log(obj.value); // 输出: Getting value, 0
obj.value = 10;        // 输出: Setting value
console.log(obj.value); // 输出: Getting value, 10
obj.value = -5;        // 输出: Setting value, Value must be non-negative

在这个例子中，value属性的读取和写入分别由getter和setter控制。getter在读取属性时输出一条日志，并返回内部属性_value的值。setter在设置属性时检查新值是否为非负数，如果是则更新_value，否则输出一条错误信息。

2.2 使用Object.defineProperty定义

除了在对象字面量中定义getter和setter，你还可以使用Object.defineProperty方法来定义它们。

const obj = {
  _value: 0
};

Object.defineProperty(obj, 'value', {
  get() {
    console.log('Getting value');
    return this._value;
  },
  set(newValue) {
    console.log('Setting value');
    if (newValue >= 0) {
      this._value = newValue;
    } else {
      console.log('Value must be non-negative');
    }
  }
});

console.log(obj.value); // 输出: Getting value, 0
obj.value = 10;        // 输出: Setting value
console.log(obj.value); // 输出: Getting value, 10
obj.value = -5;        // 输出: Setting value, Value must be non-negative

在这个例子中，我们使用Object.defineProperty方法为obj对象定义了一个名为value的属性，并为其指定了getter和setter。这种方式与对象字面量中的定义方式效果相同，但提供了更多的灵活性，例如可以定义属性的可枚举性、可配置性等。

3. getter和setter的应用场景

getter和setter在JavaScript中有许多应用场景，以下是一些常见的例子：

3.1 数据验证

setter可以用于在设置属性值时进行数据验证。例如，你可以确保某个属性只能接受特定范围内的值。

const person = {
  _age: 0,

  get age() {
    return this._age;
  },

  set age(newAge) {
    if (newAge >= 0 && newAge <= 120) {
      this._age = newAge;
    } else {
      console.log('Invalid age');
    }
  }
};

person.age = 25;  // 有效
console.log(person.age); // 输出: 25
person.age = 150; // 输出: Invalid age

在这个例子中，age属性的setter确保年龄值在0到120之间，否则输出一条错误信息。

3.2 计算属性

getter可以用于定义计算属性，即属性的值是根据其他属性计算得出的。

const rectangle = {
  width: 10,
  height: 5,

  get area() {
    return this.width * this.height;
  }
};

console.log(rectangle.area); // 输出: 50

在这个例子中，area属性并没有直接存储值，而是通过getter计算得出。

3.3 数据格式化

getter和setter可以用于在读取或设置属性时对数据进行格式化。

const user = {
  _name: '',

  get name() {
    return this._name.toUpperCase();
  },

  set name(newName) {
    this._name = newName.trim();
  }
};

user.name = '  John Doe  ';
console.log(user.name); // 输出: JOHN DOE

在这个例子中，name属性的getter将名字转换为大写，setter在设置名字时去除首尾空格。

3.4 私有属性

getter和setter可以用于实现私有属性。虽然JavaScript本身没有真正的私有属性，但通过使用下划线前缀和getter/setter，可以模拟私有属性的行为。

const account = {
  _balance: 1000,

  get balance() {
    return this._balance;
  },

  set balance(newBalance) {
    if (newBalance >= 0) {
      this._balance = newBalance;
    } else {
      console.log('Balance cannot be negative');
    }
  }
};

console.log(account.balance); // 输出: 1000
account.balance = 1500;       // 有效
console.log(account.balance); // 输出: 1500
account.balance = -500;       // 输出: Balance cannot be negative

在这个例子中，_balance属性被视为私有属性，只能通过balance的getter和setter进行访问和修改。

4. 注意事项

在使用getter和setter时，有一些注意事项需要牢记：

• 避免无限递归：在getter和setter中访问或修改属性时，要小心避免无限递归。例如，在setter中直接设置属性值会导致setter被再次调用，从而引发无限递归。

  const obj = {
    _value: 0,

    get value() {
      return this._value;
    },

    set value(newValue) {
      this.value = newValue; // 错误：无限递归
    }
  };

正确的做法是使用内部属性来存储值：

  const obj = {
    _value: 0,

    get value() {
      return this._value;
    },

    set value(newValue) {
      this._value = newValue; // 正确
    }
  };

• 性能考虑：getter和setter会在每次访问或修改属性时被调用，因此如果逻辑复杂或频繁调用，可能会影响性能。在设计时要考虑这一点。

• 兼容性：getter和setter在ES5中引入，因此在较旧的浏览器中可能不被支持。如果你需要兼容旧版浏览器，可能需要使用其他方法来实现类似的功能。

5. 总结

getter和setter是JavaScript中非常强大的工具，允许你在访问或修改对象属性时执行自定义的逻辑。它们可以用于数据验证、计算属性、数据格式化等多种场景。通过合理使用getter和setter，你可以编写出更加灵活和健壮的代码。

希望本文能帮助你理解getter和setter的使用方法，并在实际开发中灵活运用它们。