浅谈JS对象添加getter与setter的5种方法

下面我将详细讲解“浅谈JS对象添加getter与setter的5种方法”的完整攻略。

1. 什么是getter和setter函数？

在介绍添加getter和setter函数的方法之前，先来简单了解一下什么是getter和setter函数。

getter和setter函数是用于访问和设置对象属性的函数。通常情况下，使用getter和setter函数可以保证对象的属性不被直接访问，从而增强了数据的安全性和可控性。

一个简单的例子：

let obj = {
  _age: 20,
  get age() {
    return this._age;
  },
  set age(value) {
    if (value < 0) {
      console.error('Age cannot be negative');
      return;
    }
    this._age = value;
  }
};
console.log(obj.age); // 20
obj.age = -10; // Age cannot be negative
console.log(obj.age); // 20
obj.age = 30;
console.log(obj.age); // 30

从上面的例子可以看出，我们使用了getter和setter函数，访问和设置对象的_age属性。我们在setter中加了一层判断，如果value小于0，则返回错误提示，否则正常设置属性值。

2. 5种添加getter和setter函数的方法

下面将介绍5种添加getter和setter函数的方法。

2.1 Object.defineProperty()

Object.defineProperty()方法可以在一个对象上定义一个新属性或者修改一个对象的现有属性，并且可以定义这个属性的特性。

let obj = {};
Object.defineProperty(obj, 'age', {
  get: function() {
    return this._age;
  },
  set: function(value) {
    if (value < 0) {
      console.error('Age cannot be negative');
      return;
    }
    this._age = value;
  }
});
console.log(obj.age); // undefined
obj.age = -10; // Age cannot be negative
console.log(obj.age); // undefined
obj.age = 30;
console.log(obj.age); // 30

2.2 ES6 class中添加getter和setter

ES6 class中添加getter和setter函数，可以直接在class中使用get和set关键字。

class Person {
  constructor() {
    this._age = 20;
  }
  get age() {
    return this._age;
  }
  set age(value) {
    if (value < 0) {
      console.error('Age cannot be negative');
      return;
    }
    this._age = value;
  }
}
const p = new Person();
console.log(p.age); // 20
p.age = -10; // Age cannot be negative
console.log(p.age); // 20
p.age = 30;
console.log(p.age); // 30

2.3 立即执行函数（IIFE）+闭包生成getter和setter

使用立即执行函数（IIFE）+闭包，可以生成新的get和set函数，并将它们作为对象的属性。

let obj = (function() {
  let _age = 20;
  return {
    get age() {
      return _age;
    },
    set age(value) {
      if (value < 0) {
        console.error('Age cannot be negative');
        return;
      }
      _age = value;
    }
  };
})();
console.log(obj.age); // 20
obj.age = -10; // Age cannot be negative
console.log(obj.age); // 20
obj.age = 30;
console.log(obj.age); // 30

2.4 ES5 Object.prototype方法

可以使用ES5中Object.prototype方法，将getter和setter函数添加到所有对象中。

Object.defineProperty(Object.prototype, 'age', {
  get: function() {
    return this._age;
  },
  set: function(value) {
    if (value < 0) {
      console.error('Age cannot be negative');
      return;
    }
    this._age = value;
  }
});
let obj = {};
console.log(obj.age); // undefined
obj.age = -10; // Age cannot be negative
console.log(obj.age); // undefined
obj.age = 30;
console.log(obj.age); // 30

2.5 原型链

最后一种添加getter和setter的方法是使用原型链。

let Person = function() {};
Person.prototype = {
  get age() {
    return this._age;
  },
  set age(value) {
    if (value < 0) {
      console.error('Age cannot be negative');
      return;
    }
    this._age = value;
  }
};
let p = new Person();
console.log(p.age); // undefined
p.age = -10; // Age cannot be negative
console.log(p.age); // undefined
p.age = 30;
console.log(p.age); // 30

3. 总结

通过以上的5种方法，我们可以很方便地添加getter和setter函数，从而来保证对象属性的安全性和可控性。但是需要注意的是，在getter函数中不要对对象属性进行修改操作，否则会造成无限递归的问题。