javascript - Why this Object.observe notify example does not work -

javascript - Why this Object.observe notify example does not work -

i trying run illustration posted here http://www.html5rocks.com/en/tutorials/es7/observe/ under notifications (using thingy) utilize object.observe feature. here code snippet ran:

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 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 }

when seek run typeerror: undefined not function. not familiar object.observe, why error occurring , how prepare it.

note: requires object.observe nowadays in chrome 33+.

error happens due classic misunderstanding of this. in code have :

var notifier = object.getnotifier(this); notifier.performchange(thingy.multiply, function() { this.a *= amount; this.b *= amount; }, this);

the this within performchange refers , not object notifier taken. prepare use:

var notifier = object.getnotifier(this); var self = this; notifier.performchange(thingy.multiply, function() { self.a *= amount; self.b *= amount; }, this);

make changes notifiers, code work expected.

javascript observer-pattern javascript-objects object.observe ecmascript-7