javascript 将 get/set 函数附加到 js 中的对象属性

attach get/set function to objects property in js

提问by ben

I essentially have an object:

我基本上有一个对象：

var foo = function() {
  this.setting = false;
  this.refresh = function() { ... };
}

let a = new foo();
a.setting = true; // a.refresh() is triggered

I need to trigger refresh anytime .settingis written to. I feel like it has something to do with bind, but I couldn't quite get it.

我需要随时触发刷新.setting。我觉得这与 有关系bind，但我无法完全理解。

采纳答案by Boaz Yaniv

You need to use a getter and a setter for your object. One way is to use getter/setter functions directly:

您需要为您的对象使用 getter 和 setter。一种方法是直接使用 getter/setter 函数：

var foo = function()
{
   this.setting = false;
   this.getSetting = function() { return this.setting; }
   this.setSetting = function(val) { this.setting = val; this.refresh(); }
   this.refresh = function()
   {...}
}

If you want to use foo.setting transparently as an attribute, there are language constructs for that, but unfortunately they are not interoperable across browsers. In somewhat of a throwback to 3 years ago, there's one method supported by Mozilla, Safari, Chrome and Opera and another method for Internet Explorer. This is the standard method:

如果你想透明地使用 foo.setting 作为一个属性，有一些语言结构可以实现，但不幸的是它们不能跨浏览器互操作。回到 3 年前，Mozilla、Safari、Chrome 和 Opera 支持一种方法，Internet Explorer 支持另一种方法。这是标准方法：

http://robertnyman.com/2009/05/28/getters-and-setters-with-javascript-code-samples-and-demos/

http://robertnyman.com/2009/05/28/getters-and-setters-with-javascript-code-samples-and-demos/

IE9 has something else, and I'm not sure if it even works for non-DOM objects.

IE9 还有别的东西，我不确定它是否适用于非 DOM 对象。

回答by Adam

You could use JavaScript getters and setters. See the MDC documentation on the subjectand John Resig's blog post on the subject. Note that not all browsers support this.

您可以使用 JavaScript 的 getter 和 setter。请参阅有关该主题的 MDC 文档和John Resig 关于该主题的博客文章。请注意，并非所有浏览器都支持此功能。

var Foo = function()//constructor
{
   this._settings = false;//hidden variable by convention
   this.__defineGetter__("settings", function(){
     return _settings;//now foo.settings will give you the value in the hidden var
   });

   this.__defineSetter__("settings", function(s){
      _settings = s;//set the hidden var with foo.settings = x
      this.refresh();//trigger refresh when that happens
   });

   this.refresh = function(){
      alert("Refreshed!");//for testing
   }
}

var a = new Foo();//create new object
a.settings = true;//change the property
//a.refresh() is triggered

Try it!

试试看！

回答by Hugo

I don't why you are trying to use the "new" operator, you will be better using the object literal. Now, if you are looking similar to, let's say, C# properties, you could do something like this:

我不知道您为什么要尝试使用“new”运算符，使用对象文字会更好。现在，如果您看起来类似于 C# 属性，您可以执行以下操作：

var myObject = function(){
    //Private Members
    var myProperty = '';

        //Privileged Setter
        this.setMyProperty = function(value){
            myProperty = value;
        };

        //Privileged Getter
        this.getMyProperty = function(){
            return myProperty;
        }

}

var MyNewObject = new myObject();
MyNewObject.setMyProperty("Hello, World!");
MyNewObject.getMyProperty();

For more info, I recommend this: http://www.crockford.com/javascript/private.html

有关更多信息，我推荐这个：http: //www.crockford.com/javascript/private.html

回答by Matt Greer

Are you looking for a setting setter? Something like this?

您在寻找设置设置器吗？像这样的东西？

// renamed settings property with underscore
this._settings = false;

this.settings = function(s) {
     if(s !== undefined) {
        this._settings = s;
        this.refresh();
     }

     return this._settings;
};

...


var f = new foo();
f.setSettings(mySettings);

I tend to combine my getter and setter into one method in JavaScript since it's so easy to do. The downside to this is _settingsis still public on your object and anyone can directly write to it. The only way to hide it is to use a closure, which requires a totally different approach to creating your objects.

我倾向于将我的 getter 和 setter 组合成 JavaScript 中的一种方法，因为它很容易做到。这样做的缺点是_settings您的对象仍然是公开的，任何人都可以直接写入它。隐藏它的唯一方法是使用闭包，这需要一种完全不同的方法来创建您的对象。

回答by zindel

If you aren't limited with old browsers you may try to use the approach described here

如果您不受旧浏览器的限制，您可以尝试使用此处描述的方法

回答by X?pplI'-I0llwlg'I -

I know this is an old question that has already been answered, but I'd like to provide a solution that takes advantage of JavaScript's latest syntax.

我知道这是一个已经回答的老问题，但我想提供一个利用 JavaScript 最新语法的解决方案。

---

---

Define a classwith a getterand setter:

使用getter和setter定义一个类：

class Foo {
  constructor() {
    this._setting = false;
  }

  get setting() {
    return this._setting;
  }

  set setting(value) {
    this._setting = value;
    this.refresh();
  }

  refresh() {
    console.log("refresh!");
  }
}

let foo = new Foo();
foo.setting = true; // foo.refresh() is called