1 files changed, 201 insertions, 0 deletions
diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/watch/index.html b/files/zh-cn/web/javascript/reference/global_objects/object/watch/index.html
new file mode 100644
index 0000000000..540967eee3
--- /dev/null
+++ b/files/zh-cn/web/javascript/reference/global_objects/object/watch/index.html
@@ -0,0 +1,201 @@
+---
+title: Object.prototype.watch()
+slug: Web/JavaScript/Reference/Global_Objects/Object/watch
+tags:
+  - Debugging
+  - Deprecated
+  - JavaScript
+  - Method
+  - Object
+  - Obsolete
+  - Prototype
+translation_of: Archive/Web/JavaScript/Object.watch
+---
+<p>{{JSRef}}</p>
+
+<div class="warning">
+<p><strong>警告:</strong> 通常来讲,你应该尽量避免使用 <code>watch()</code>和  {{jsxref("Object.prototype.unwatch", "unwatch()")}} 这两个方法。因为只有 Gecko 实现了这两个方法，并且它们主要是为了在调试方便。另外，使用 watchpoint 对性能有严重的负面影响，在全局对象（如 window）上使用时尤其如此。你可以使用 <a href="/zh-cn/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters" title="https://developer.mozilla.org/zh-cn/Core_JavaScript_1.5_Guide/Working_with_Objects#Defining_getters_and_setters">setters and getters</a> 或者 proxy 代替。参见 {{ anch("Compatibility") }} 了解详情。</p>
+</div>
+
+<p><code><strong>watch() </strong></code>方法会监视属性是否被赋值并在赋值时运行相关函数。</p>
+
+<h2 id="Summary" name="Summary">语法</h2>
+
+<pre class="syntaxbox"><em>obj</em>.watch(<em>prop</em>, <em>handler</em>)</pre>
+
+<h3 id="Parameters" name="Parameters">参数</h3>
+
+<dl>
+ <dt><code>prop</code></dt>
+ <dd>想要监视值是否发生变化的指定对象的某个属性的属性名称</dd>
+</dl>
+
+<dl>
+ <dt><code>handler</code></dt>
+ <dd>当指定的属性发生变化时执行的回调函数</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>{{jsxref("undefined")}}.</p>
+
+<h2 id="Description" name="Description">描述</h2>
+
+<p>监视对指定对象的名为 <code>prop</code> 属性的赋值操作，只要 <code>prop</code> 属性被赋值，便调用 <code>handler(prop, oldval, newval)</code> 回调函数，并将函数返回值保存到该属性。 通过返回修改的新值（或者返回旧值），一个监视点可以过滤（或使之为 null ）赋值。</p>
+
+<p>如果你删除某个设置监视点的属性，该监视点并不会消失。如果你之后重新创建这个属性，监视点仍然有效。</p>
+
+<p>要移除某个监视点，使用 <code><a href="/zh-cn/JavaScript/Reference/Global_Objects/Object/unwatch" title="zh-cn/JavaScript/Reference/Global_Objects/Object/unwatch">unwatch()</a></code> 方法。默认所有 <code>Object</code> 的后代都将继承 <code>watch</code> 方法。</p>
+
+<p>JavaScript 调试器有与之相似的机制以及其它调试选项。需要更多有关调试器的信息，请查阅 <a href="/zh-cn/Venkman" title="zh-cn/Venkman">Venkman</a>。</p>
+
+<p>对于 Firefox，<code>handler</code> 只会被脚本内的赋值操作激活，并不包括本地代码。举个例子，如果用户点击一个指向当前文档内的某个锚点， <code>window.watch('location', myHandler)</code> 不会回调 <code>myHandler</code> ，但 <code>window.location += '#myAnchor'</code> 将触发回调  <code>myHandler</code>。</p>
+
+<div class="note"><strong>注意:</strong> 对一个对象的指定属性调用 <code>watch()</code>  将覆盖先前关联的 handler。</div>
+
+<h2 id="Examples" name="Examples">例子</h2>
+
+<h3 id="Example_Using_watch_and_unwatch" name="Example:_Using_watch_and_unwatch">使用 <code>watch</code> 和 <code>unwatch</code></h3>
+
+<pre class="brush: js">var o = {p:1};
+o.watch("p",
+  function (id, oldval, newval) {
+    console.log("o." + id + "由" + oldval + " 变为 " + newval);
+    return newval;
+  });
+
+o.p = 2;
+o.p = 3;
+delete o.p;
+o.p = 4;
+
+o.unwatch('p');
+o.p = 5;
+</pre>
+
+<p>上面的代码显示结果如下:</p>
+
+<pre class="eval">o.p 由 1 变为 2
+o.p 由 2 变为 3
+o.p 由 undefined 变为 4
+</pre>
+
+<h3 id="Example_Using_watch_to_validate_an_object.27s_properties" name="Example:_Using_watch_to_validate_an_object.27s_properties">使用 <code>watch</code> 来验证一个对象的属性</h3>
+
+<p>你可以使用 <code>watch</code> 来检测一个对象的属性赋值是否是合法的.下例演示了如何确保每个人始终具有一个合法的名字和0 到 200之间的年龄.</p>
+
+<pre class="brush: js">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" &amp;&amp; (!newval || newval.length &gt; 30)) {
+    throw new RangeError("不合法的名字 " + this);
+  }
+  if (id === "age"  &amp;&amp; (newval &lt; 0 || newval &gt; 200)) {
+    throw new RangeError("不合法的年龄 " + this);
+  }
+  return newval;
+}
+
+will = new Person("Will", 29);
+print(will);   // Will, 29
+
+try {
+  will.name = "";
+} catch (e) {
+  //print(e);
+  console.log(e);
+}
+
+try {
+  will.age = -4;
+} catch (e) {
+  console.log(e);
+}
+</pre>
+
+<p>上面的代码显示结果如下:</p>
+
+<pre class="eval">Will, 29
+RangeError: 不合法的名字 Will, 29
+RangeError: 不合法的年龄 Will, 29
+</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<p>不是任何规范的一部分。从 JavaScript 1.2 开始实现。</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="兼容性提示">兼容性提示</h2>
+
+<ul>
+ <li>此 <a href="https://gist.github.com/384583">Polyfill</a> 为所有 ES5 兼容浏览器提供 <code>watch</code> 支持。</li>
+ <li>使用 {{jsxref("Proxy")}} 允许你更加深度地调整属性服务机制</li>
+ <li>从 Firefox 23 开始，在 {{domxref("Document")}} 对象上调用 <code>watch()</code> 将抛出 {{jsxref("TypeError")}} 错误。这个回归问题已经在 Firefox 27 修复。</li>
+</ul>
+
+<h2 id="See_Also" name="See_Also">相关链接</h2>
+
+<ul>
+ <li>{{jsxref("Object.unwatch()")}}</li>
+ <li>{{jsxref("Object.observe()")}} {{obsolete_inline}}</li>
+</ul>