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

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方法是棘手的使用，因为属性不能作为一个简单的属性来访问。所有访问，设置和获取都要经过访问器函数，包括函数内部的访问。

带符号的属性名称（尚未广泛使用，不幸），它很容易使这里真正的属性值可以保持“影子”属性：

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

如果你想添加额外的逻辑我capule对象是这样的：

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斌： https://codepen.io/xremix/pen/YQbJoq/