Почему этот пример уведомления Object.observe не работает

Я пытаюсь запустить пример, опубликованный здесь http://www.html5rocks.com/en/tutorials/es7/observe/ в уведомлениях (используя Thingy), чтобы использовать функцию Object.observe. Вот фрагмент кода, который я запустил:

function Thingy(a, b, c) {
  this.a = a;
  this.b = b;
}

Thingy.MULTIPLY = 'multiply';
Thingy.INCREMENT = 'increment';
Thingy.INCREMENT_AND_MULTIPLY = 'incrementAndMultiply';


Thingy.prototype = {
  increment: function(amount) {
    var notifier = Object.getNotifier(this);

    notifier.performChange(Thingy.INCREMENT, function() {
      this.a += amount;
      this.b += amount;
    }, this);

    notifier.notify({
      object: this,
      type: Thingy.INCREMENT,
      incremented: amount
    });
  },

  multiply: function(amount) {
    var notifier = Object.getNotifier(this);

    notifier.performChange(Thingy.MULTIPLY, function() {
      this.a *= amount;
      this.b *= amount;
    }, this);

    notifier.notify({
      object: this,
      type: Thingy.MULTIPLY,
      multiplied: amount
    });
  },

  incrementAndMultiply: function(incAmount, multAmount) {
    var notifier = Object.getNotifier(this);

    notifier.performChange(Thingy.INCREMENT_AND_MULTIPLY, function() {
      this.increment(incAmount);
      this.multiply(multAmount);
    }, this);

    notifier.notify({
      object: this,
      type: Thingy.INCREMENT_AND_MULTIPLY,
      incremented: incAmount,
      multiplied: multAmount
    });
  }
}

var observer = {
    records: undefined,
    callbackCount: 0,
    reset: function() {
      this.records = undefined;
      this.callbackCount = 0;
    },
}
var observer2 = {
    records: undefined,
    callbackCount: 0,
    reset: function() {
      this.records = undefined;
      this.callbackCount = 0;
    },
};

observer.callback = function(r) {
    console.log(r);
    observer.records = r;
    observer.callbackCount++;
};

observer2.callback = function(r){
    console.log('Observer 2', r);
}

Thingy.observe = function(thingy, callback) {
  // Object.observe(obj, callback, optAcceptList)
  Object.observe(thingy, callback, [Thingy.INCREMENT,
                                    Thingy.MULTIPLY,
                                    Thingy.INCREMENT_AND_MULTIPLY,
                                    'update']);
}

Thingy.unobserve = function(thingy, callback) {
  Object.unobserve(thingy);
}

var thingy = new Thingy(2, 4);

// Observe thingy
Object.observe(thingy, observer.callback);
Thingy.observe(thingy, observer2.callback);

// Play with the methods thingy exposes
thingy.increment(3);               // { a: 5, b: 7 }
thingy.b++;                        // { a: 5, b: 8 }
thingy.multiply(2);                // { a: 10, b: 16 }
thingy.a++;                        // { a: 11, b: 16 }
thingy.incrementAndMultiply(2, 2); // { a: 26, b: 36 }

Когда я пытаюсь запустить это, я получаю TypeError: undefined is not a function. Я не знаком с Object.observe, поэтому почему возникает ошибка и как ее исправить.

Примечание. Для этого требуется Object.observe, который присутствует только в Chrome 33+.


javascript javascript-objects observer-pattern ecmascript-2016 object.observe
person user568109    schedule 20.10.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ошибка возникает из-за классического непонимания этого. В коде у вас есть:

var notifier = Object.getNotifier(this);

notifier.performChange(Thingy.MULTIPLY, function() {
  this.a *= amount;
  this.b *= amount;
}, this);

this внутри performChange ссылается на себя, а не на объект, чей уведомитель принят. Чтобы исправить это, используйте:

var notifier = Object.getNotifier(this);
var self = this;

notifier.performChange(Thingy.MULTIPLY, function() {
  self.a *= amount;
  self.b *= amount;
}, this);

Внесите изменения во все ваши уведомления, ваш код будет работать как положено.

person user568109    schedule 20.10.2014