为什么这个 Object.observe 通知示例不起作用答案

【问题标题】：Why this Object.observe notify example does not work为什么这个 Object.observe 通知示例不起作用
【发布时间】：2014-10-20 07:40:33
【问题描述】：

我正在尝试在通知（使用 Thingy）下运行此处发布的示例 http://www.html5rocks.com/en/tutorials/es7/observe/ 以使用 Object.observe 功能。这是我运行的代码 sn-p：

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 observer-pattern javascript-objects object.observe ecmascript-2016

【解决方案1】：

由于对this的经典误解而发生错误。在您拥有的代码中：

var notifier = Object.getNotifier(this);

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

performChange 中的 this 指的是它自己，而不是其通知程序被采用的对象。要解决此问题：

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

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

更改所有通知程序，您的代码将按预期工作。

【讨论】：