Accessors–JavaScript中的访问器函数

小蓝 • 2024-11-30 09:05 • 编程

一、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

2、封装私有变量：将对象的属性设置为私有变量，并使用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

3、数据验证：使用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对象的重要组成部分，对于对象的封装和控制非常有帮助。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/190594.html