JavaScript Object.observe on prototype

Question

Consider the code below :

function createFoo() {
  var val;

  function Foo() {}
  Object.defineProperty(Foo.prototype, 'foo', {
    get: function () {
      return val;
    },
    set: function (value) {
      val = value; 
      document.write('foo value set to : ', value);
    }
  });

  return new Foo();
}



var foo = createFoo();

Object.observe(foo, function (changes) { document.write(changes); });

foo.foo = 'bar';

Why is it that Object.observe's handler is never fired? Can an object prototype be "observed"?

(Please, answers must not suggest to use some kind of third party library.)

Update

Please, read the comments for more information and for the resolution to this problem.

Note that the Object.observe proposal was withdrawn: esdiscuss.org/topic/an-update-on-object-observe . — Felix Kling
– Felix Kling, Commented Jan 16, 2016 at 5:30
Thank you for that. This was an experiment and I was already concerned about speed. Since O.o doesn't work anyway for the use case that I have, I have moved to extending EventEmitter and emitting events instead. I'm choosing the single answer as there is no other answer anyway, so this question can be closed for posterity. — Yanick Rochon
– Yanick Rochon, Commented Jan 16, 2016 at 5:51

c-smile · Accepted Answer · 2016-01-16 01:52:22Z

2

This

foo.foo = 'bar';

does not modify neither foo object nor its prototype thus observe does not report anything.

Here is the version that triggers observer on this.val = value; :

function createFoo() {
  

  function Foo() {}
  Object.defineProperty(Foo.prototype, 'foo', {
    get: function () {
      return this.val;
    },
    set: function (value) {
      this.val = value; 
      document.write('foo value set to : ', value);
    }
  });

  return new Foo();
}



var foo = createFoo();

Object.observe(foo, function (changes) { document.write("<br>observer:", changes); });

foo.foo = 'bar';

edited Jan 16, 2016 at 1:52

answered Jan 16, 2016 at 1:49

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Yanick Rochon Over a year ago

So... when using a getter/setter, Object.observe won't work, right?

c-smile Over a year ago

Object.observe triggers on object change. See my update. If your setter modifies the observable object then you will get observe callback notification.

Yanick Rochon Over a year ago

Hrm. however this.val is not the same as the original property name, thus this will set a value to a "random" property name in order to trigger the handler. Sure, it works, however this is just weird. Naturally, replacing this.val with this.foo will just cause an infinite loop...

c-smile Over a year ago

You define virtual Property that is representing some real or computable property. In first case we usually name virtual and internal properties similarly, like: this._foo = foo;. Not "random" as you said. Object in JS is a name/value map. Modification of this map is a subject of observation, nothing else.

c-smile Over a year ago

"replacing this.val with this.foo will just cause an infinite loop". Sure as you are getting perfect loop of recursion calls.

Collectives™ on Stack Overflow

JavaScript Object.observe on prototype

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related