Object.prototype.watch()

The watch() method watches for a property to be assigned a value and runs a function when that occurs.

obj.watch(prop, handler)

prop

所需要監聽其值是否改變的物件屬性

handler

當監聽的變數其數值變換時所執行的function

undefined.

Watches for assignment to a property named prop in this object, 呼叫 handler(prop, oldval, newval) whenever prop is set and storing the return value in that property. A watchpoint can filter (or nullify) the value assignment, by returning a modified newval (or by returning oldval).

當你刪掉所監聽的物件屬性，並不會結束針對該物件屬性的監聽。當你重新產生該屬性時，監聽依舊維持作用。

要停止該次監聽, 須使用 unwatch() 函式. By default, the watch method is inherited by every object descended from Object.

The JavaScript debugger has functionality similar to that provided by this method, as well as other debugging options. For information on the debugger, see Venkman.

In Firefox, handler is only called from assignments in script, not from native code. For example, window.watch('location', myHandler) will not call myHandler if the user clicks a link to an anchor within the current document. However, window.location += '#myAnchor' will call myHandler.

var o = { p: 1 };

o.watch('p', function (id, oldval, newval) {
  console.log('o.' + id + ' changed from ' + oldval + ' to ' + newval);
  return newval;
});

o.p = 2;
o.p = 3;
delete o.p;
o.p = 4;

o.unwatch('p');
o.p = 5;

上述程式執行結果：

o.p changed from 1 to 2
o.p changed from 2 to 3
o.p changed from undefined to 4

You can use watch to test any assignment to an object's properties. This example ensures that every Person always has a valid name and an age between 0 and 200.

Person = function(name, age) {
  this.watch('age', Person.prototype._isValidAssignment);
  this.watch('name', Person.prototype._isValidAssignment);
  this.name = name;
  this.age = age;
};

Person.prototype.toString = function() {
  return this.name + ', ' + this.age;
};

Person.prototype._isValidAssignment = function(id, oldval, newval) {
  if (id === 'name' && (!newval || newval.length > 30)) {
    throw new RangeError('invalid name for ' + this);
  }
  if (id === 'age'  && (newval < 0 || newval > 200)) {
    throw new RangeError('invalid age for ' + this);
  }
  return newval;
}

will = new Person('Will', 29);
console.log(will);   // Will, 29

try {
  will.name = '';
} catch (e) {
  console.log(e);
}

try {
  will.age = -4;
} catch (e) {
  console.log(e);
}

上述程式執行結果：

Will, 29
RangeError: invalid name for Will, 29
RangeError: invalid age for Will, 29

Not part of any specifications. Implemented in JavaScript 1.2.

• This Polyfill offers watch to all ES5 compatible browsers.
• Using a Proxy enables you do even deeper changes to how property assignments work.
• Calling watch() on the Document object throws a TypeError since Firefox 23 (bug 903332). This regression has been fixed with Firefox 27.

• Object.unwatch()
• Object.observe()