Question

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

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

有没有办法将getter和setter添加到foo.baz？

Answer 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;
    }
  }
});

符号实例的本质是，当用作属性名称时，它们保证不会与任何东西发生冲突。如果没有这个设施，你可以使用一些惯例来避免名称冲突;我个人使用前缀为“@”的字符串，但其中一个这样的黑客与另一个一样好。

Answer 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。每个公共可访问变量都需要有一个＆＃34; this。＆＃34;

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

如何在JavaScript中向现有属性添加数据访问器？

2 个答案: