为什么此Object.observe通知示例不起作用

Why this Object.observe notify example does not work

本文关键字：不起作用 通知 observe Object 为什么      更新时间：2023-09-26

我正在尝试运行这里发布的示例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+中。

由于对这个的经典误解而发生错误。在你的代码中：

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);

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

相关文章：