Accessors--JavaScript中的访问器函数

发布时间：2023-05-20

一、Getter和Setter

在JavaScript中，所有的对象都有两种基本操作：读取和设置属性值。访问器是一种方式，通过函数的方式，可以让我们更好地控制属性值的读取和设置操作。在ECMAScript 5中，引入了getter和setter访问器函数，以更好的控制属性值的读取和设置操作。

二、Getter和Setter的实现

为了实现getter和setter访问器函数，我们需要使用对象字面量或者Object.defineProperty方法。

// 使用对象字面量实现getter和setter
let obj = {
  // 声明一个私有变量
  _name: 'Tom',
  // getter函数
  get name() {
    console.log('get name');
    return this._name;
  },
  // setter函数
  set name(val) {
    console.log('set name');
    this._name = val;
  }
};

或者使用Object.defineProperty方法来实现：

let obj = {};
let name = 'Tom';
Object.defineProperty(obj, 'name', {
  get: function() {
    console.log('get name');
    return name;
  },
  set: function(val) {
    console.log('set name');
    name = val;
  }
});

三、Getter和Setter的特点

getter和setter访问器函数具有以下几个特点：

  1. getter访问器函数不需要参数，但需要有返回值；setter访问器函数只有一个参数，但没有返回值。
  2. getter和setter函数名称是固定的，不能更改。
  3. getter和setter访问器函数可以与属性值一起定义在一个对象中。
  4. getter和setter访问器函数只会在调用时被执行。
  5. getter和setter访问器函数可以用来验证输入值。

四、Getter和Setter的应用场景

getter和setter访问器函数可以应用于以下场景：

  1. 计算属性：getter函数可以计算属性值并返回结果，这样可以避免使用者自己计算属性值。
let obj = {
  _a: 1,
  _b: 2,
  get c() {
    return this._a + this._b;
  }
};
console.log(obj.c); // 3
  1. 封装私有变量：将对象的属性设置为私有变量，并使用getter和setter访问器函数来控制对私有变量的访问。
let Person = (function() {
  let name = 'Tom';
  return {
    get name() {
      console.log('get name');
      return name;
    },
    set name(val) {
      console.log('set name');
      name = val;
    }
  };
})();
console.log(Person.name); // Tom
Person.name = 'Jerry';
console.log(Person.name); // Jerry
  1. 数据验证：使用setter函数来验证输入值，确保输入值的合法性。
let person = {
  _name: '',
  set name(val) {
    if (typeof val !== 'string') {
      console.log('name must be a string!');
      return;
    }
    this._name = val;
  },
  get name() {
    return this._name;
  }
};
person.name = 'Tom';
console.log(person.name); // Tom
person.name = 123;       // name must be a string!

五、总结

通过此篇文章，我们了解了在JavaScript中如何使用getter和setter访问器函数来控制属性值的读取和设置操作。我们还对getter和setter的实现方式、特点以及应用场景进行了详细的探讨。应该说，getter和setter访问器函数是JavaScript对象的重要组成部分，对于对象的封装和控制非常有帮助。

推荐文章