如何在 Javascript 对象 (Class) 中使用 setter 和 getter？

Question

以下脚本不工作。正确的方法是什么？

function AnObject () {
    get this.apple = () {
        return this.apple + "GET";
    }
    set this.apple = ( newValue ) {
        return newValue + "SET";
    }
}

var obj = new AnObject();
obj.apple = "Lemon";
console.log( obj.apple ); // LemonSETGET

Answer 1

您可以使用 Object.defineProperties():

function AnObject() {
  Object.defineProperties(this, {
    apple: {
      get: function() {
        return this._apple + " GET";
      },
      set: function(value) {
        this._apple = value;
      },
      configurable: true, writable: true
    }
  });
 }

请注意，如果您想直接将值与对象放在一起，则必须小心使用不同的属性名称。如果没有，您可以使用构造函数的闭包：

function AnObject() {
  var theApple;

  Object.defineProperties(this, {
    apple: {
      get: function() {
        return theApple + " GET";
      },
      set: function(value) {
        theApple = value;
      },
      configurable: true, writable: true
    }
  });
 }

Answer 2

JS中没有setter和getter

但你可以模仿它们

function AnObject () {
    var apple = '';
    this.get = function() {
        return apple + "GET";
    }
    this.set = function( newValue ) {
        apple = newValue + "SET";
    }
}

var obj = new AnObject();
obj.set("Lemon");
console.log( obj.get() ); // LemonSETGET

Answer 3

要添加到 Pointy 的...点，

您可以将 getter 和 setter 用作语言功能，方法是将它们放在对象文字中。

您的原始构造函数可以变成一个工厂，只需执行以下操作即可使用基于实例的 getter 和 setter：

function makeAnObject () {
    var hiddenApple = "Granny Smith";
    return {
      get apple () { return hiddenApple; },
      set apple (ignore) { return hiddenApple; }
    };
}

var thing = makeAnObject();
thing.apple;
thing.apple = "Crab Apple";

请记住，依赖于 getters/setters 将在旧版浏览器（IE8 是真正的坚持者）上完全爆炸，以这种方式使用。

此外，在 defineProperties 中使用它们可以很好地防止 IE8 爆炸（因为它不再是一种语言结构）......但是，它实际上并没有添加 getters/setters，或者（即使使用 polyfills 将方法添加到对象，而不仅仅是 DOM 元素），因此，将有错误的行为，要么是由于语法爆炸，要么是由于做一些与其他浏览器完全不同的事情.

这可能不适用于您现在，希望它永远不会... ...我们中的一些人仍然生活在那个可怕的现实中。

Answer 4

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }


  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }


  set fullName(newValue) {
    [this.firstName, this.lastName] = newValue.split(' ');
  }



};

let user = new User("AAAA", "BBBB");
alert( user.fullName ); 
user.fullName = "CCCC DDDD";
alert( user.fullName );

如何在 Javascript 对象 (Class) 中使用 setter 和 getter？

How to use setters and getters in a Javascript object (Class)?

javascript

getter

setter

class

getter-setter