如何将数据访问器添加到 JavaScript 中的现有属性？答案

【问题标题】：How can I add data accessors to an existing property in JavaScript?如何将数据访问器添加到 JavaScript 中的现有属性？
【发布时间】：2017-12-23 10:36:25
【问题描述】：

假设我有一个像这样的对象：

var foo = {
   baz: 'some primitive type'
}

有什么方法可以在 foo.baz 中添加 getter 和 setter？

【问题讨论】：

getter -> foo.baz 和 setter -> foo.baz = 'new string'
这些访问器应该做什么？你不喜欢 foo.baz 作为吸气剂吗？
foo = { get baz() { }, set baz() { } }

标签： javascript oop object getter-setter

【解决方案1】：

你可以重新定义属性：

Object.defineProperty(foo, "baz", {
  value: foo.baz,
  get: function() { return "no baz for you"; },
  set: function(value) { whatever(value); }
});

JavaScript getter 和 setter 使用起来很棘手，因为无法将属性作为简单属性进行访问。所有的访问，设置和获取，都通过访问器函数，包括函数内部的访问。

使用 Symbol 属性名称（遗憾的是尚未广泛使用），很容易创建可以保留真实属性值的“影子”属性：

var bazShadow = Symbol("baz");
Object.defineProperties(foo, {
  [bazShadow]: { value: foo.baz },
  baz: {
    get: function() {
      return "baz value is " + this[bazShadow];
    },
    set: function(value) {
      this[bazShadow] = value;
    }
  }
});

Symbol 实例的本质是保证它们在用作属性名称时不会与任何东西发生冲突。如果没有该功能，您可以使用一些约定来避免名称冲突；我个人使用以“@”为前缀的字符串，但这样的 hack 和另一种一样好。

【讨论】：

我认为Symbol 会非常有用。非常感谢

【解决方案2】：

如果你想添加额外的逻辑，我会像这样封装对象：

function Foo(param) {
        // Private variable
        var _baz;
        // Getter
        this.getBaz = function(){
            return _baz;
        };
        // Setter
        this.setBaz = function(val){
            _baz = val;
        };
        // Public Sample
        this.publicBaz;
    }

    var myFoo = new Foo();
    myFoo.setBaz("Bar");
    console.log(myFoo.getBaz());

这允许您拥有私有变量以及公共变量/函数。您可以构建自己的 getter 和 setter。每个公共可访问变量都需要有一个“this”。

在 JS Bin 查看此示例： https://codepen.io/xremix/pen/YQbJoq/

【讨论】：