ECMAscript 6：观察类属性的变化

Question

Let's say I have a class defined as follows:

class MyClass {

    constructor (a) {
        this.a = a;     
    }

    _onPropertyChanged() {
        // do something
    }
}

Whenever the property "a" of an instance of MyClass changes, I want to trigger the _onPropertyChanged method on that instance. What is the best (most performant) way to achieve this using ECMAscript 6?

Answer 1

There's no 'best' way, and the actual approach always depends on the final goal.

In its simplistic (and performant enough) form it is:

class MyClass {

    constructor (a) {
      this.a = a;     
    }

    get a() {
      return this._a;
    }

    set a(val) {
      this._a = val;
      this._onPropertyChanged('a', val);
    }

    _onPropertyChanged(propName, val) {
        // do something
    }
}

Answer 2

This is a simple example of what you can do for this situation and for a single property.

class MyClass {

constructor (a) {
    this._a = a;
}

set a(value) {
    let hasChanged = (this._a !== value);
    this._a = value;
    //Assumes value is primitive. Customize for objects
    if(hasChanged) this._onPropertyChanged();

}

_onPropertyChanged() {
    // do something
}
}

Answer 3

The easiest thing is to define a setter and a getter for the property like the previous comment said. However, it won't work if you already have a defined setter.

Another way is a non-standard Object.prototype.watch, which only works natively in Gecko. If you want to bring its support to most other browsers, you can use a small but powerful Andrea Giammarchi's library .

Answer 4

The best way is redefine filed/property, but in this case u have some pit falls, like 'find owner of this prop'. U can use this solution for totally-safe property redefining.

The main idea is redefine property if exists:

 Object.defineProperty(target, name, {
     get() { return get(ownPropertyDescriptor.get.call(target)); },
     set(val) {
         let _val = set.call(this, val);
         if (_val != undefined)
            ownPropertyDescriptor.set.call(target, _val);
         },
     configurable: true
 });

Or create new property based on symbol type:

var indexer = Symbol(name);
target[indexer] = target[name];
Object.defineProperty(target, name, {
  get() {
         var val = target[indexer];
         var _val = get(val);
           return _val;
     },
  set(val) {
         let _val = set.call(this, val);
         arget[indexer] = set(_val);
     },
  configurable: true
});

Full method is part of complex solution for property-redefining.