Javascript：如何将getter添加到现有对象

Question

我可以像这样在 JavaScript 对象中使用 getter：

var member = {
    firstName:"XYZ", 
    lastName:"zzz", 
    get fullName(){ return (this.firstName + ' ' + this.lastName); }
}

我什至可以即时添加更多属性，如下所示：

member.isGuest = true;

但是，有什么方法可以将 getter 添加到现有对象？像这样的：

member.isGuest = get isGuest(){ return this.firstName=='Guest'; }

Answer 1

试试defineProperty

Object.defineProperty(member, 'isGuest', {
  get: function() { return this.firstName=='Guest' }
});

Answer 2

您可以这样使用新的Object.defineProperty：

Object.defineProperty(
    member, 
    'prop', 
    {
        get: function() { 
            return this.lastName.toUpperCase()
        }
    }
);

过去你必须使用__defineGetter__，但现在它已被弃用。

Answer 3

这不仅可以通过上述解决方案实现，还可以使用... 运算符。

// Initialize x
var x = {
  x: 5
}

// Log x.x and x.y
console.log(x.x, x.y /* undefined */)

x = {
  ...x, // {...x} is the same as {x: x.x}
  
  // The getter
  get y() {
    return this.x
  }
}

// Log x.x and x.y
console.log(x.x, x.y /* Not undefined */)

// Set x.x to 1234
x.x = 1234

// Log x.x and x.y
console.log(x.x, x.y)

... 是扩展运算符，它“扩展”它所使用的对象的内容，因此得名。例如：

• doSomething(...[1, 2, 3]) 与 doSomething(1, 2, 3) 相同
• { ...{x: 1, y: 2, z: 3} } 与 { x: 1, y: 2, z: 3 } 相同

Answer 4

此外，如果不应该从其他值计算旧值，您可以添加自定义 getter 并保留旧值，例如在您的示例中。为此，请使用这样的匿名函数创建额外的上下文层：

(function(){
    var oldValue = yourObject[targetProperty];
    var currentValue = oldValue;
    var getter = function() {
        return currentValue; // or do something before returning, like applying parseInt or whatever
    };
    var setter = function(newValue) {
        currentValue = newValue; // or add some customization as well
    };
    Object.defineProperty(yourObject,targetProperty,{
        get: getter,
        set: setter,
        enumerable: true, // depending on your needs
        configurable: true // depending on your needs
    });
})();

Answer 5

为了完整性，Reflect.defineProperty 也是一个选项 :)。请注意，Object.defineProperty 和 Reflect.defineProperty 的行为不同。

MDN compares the two functions（以及所有类似的Object 和Reflect 方法）：

Method Name	Object	Reflect
defineProperty()	Object.defineProperty() returns the object that was passed to the function. Returns a TypeError if the property was not successfully defined on the object.	Reflect.defineProperty() returns true if the property was defined on the object and false if it was not.

我更喜欢Reflect，因为我认为布尔检查更有意义，但总的来说，如果您认为可能存在冲突，请记住错误处理（这些在弄乱对象属性时应该很少见，除非您的某个库正在进行类似的、可能相互冲突的更改）。

Answer 6

你只能在一个类中使用get和set，即getter和setter方法。但你可以在类中添加一个函数：

member.isGuest = function isGuest(){ return this.firstName=='Guest';}

member.isGuest()

get 表示可以读取属性！ set 意味着可以写入属性！ 可以看书《JavaScript:The.Definitive.Guide》6版第6章！