This is an archived page. It's not actively maintained.

Warning: Generally you should avoid using watch() and unwatch() when possible. These two methods are implemented only in Gecko, and they're intended primarily for debugging use. In addition, using watchpoints has a serious negative impact on performance, which is especially true when used on global objects, such as window. You can usually use setters and getters or proxies instead. See Browser compatibility for details. Also, do not confuse with Object.observe.

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

語法, handler)






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,'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.

Note: Calling watch() on an object for a specific property overrides any previous handler attached for that property.


使用watch 和 unwatch

var o = { p: 1 };'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.p = 5;


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

使用 watch 驗證物件的屬性

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) {'age', Person.prototype._isValidAssignment);'name', Person.prototype._isValidAssignment); = name;
  this.age = age;

Person.prototype.toString = function() {
  return + ', ' + 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 { = '';
} catch (e) {

try {
  will.age = -4;
} catch (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.


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support No support (Yes) No support No support No support
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support (Yes) No support No support No support

Compatibility notes

  • 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.