1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: Object.unobserve()
slug: Web/JavaScript/Reference/Global_Objects/Object/unobserve
translation_of: Archive/Web/JavaScript/Object.unobserve
---
<div>{{JSRef}} {{non-standard_header}}</div>
<p><strong>Object.unobserve()</strong> 是用来移除通过 {{jsxref("Object.observe()")}}设置的观察者的方法。</p>
<h2 id="语法">语法</h2>
<pre class="syntaxbox"><code>Object.unobserve(<var>obj</var>, <var>callback</var>)</code></pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>obj</code></dt>
<dd>需要停止观察的对象。</dd>
<dt><code>callback</code></dt>
<dd>通过 observer 给 <strong>obj </strong>对象设置的回调函数.</dd>
</dl>
<h2 id="描述">描述</h2>
<p><code>Object.unobserve()</code> 用来在 {{jsxref("Object.observe()")}} 被调用以后，从对象上移除一个观察者。</p>
<p>这个回调函数必须是一个函数的引用，而不能是一个匿名函数。因为这个引用将被用来移除之前设置的观察者方法。 给 <strong>Object.unobserve() </strong>传入匿名函数作为回调是不起作用的， 它不能移除任何观察者方法。</p>
<h2 id="例子">例子</h2>
<h3 id="观察一个对象">观察一个对象</h3>
<pre class="brush: js">var obj = {
foo: 0,
bar: 1
};
var observer = function(changes) {
console.log(changes);
}
Object.observe(obj, observer);
obj.newProperty = 2;
// [{name: 'newProperty', object: <obj>, type: 'add'}]
Object.unobserve(obj, observer);
obj.foo = 1;
// 回调函数不会被调用</pre>
<h3 id="使用匿名函数">使用匿名函数</h3>
<pre class="brush: js">var person = {
name : 'Ahmed',
age : 25
};
Object.observe(person, function (changes) {
console.log(changes);
});
person.age = 40;
// [{name: 'age', object: <obj>, oldValue: 25, type: 'update'}]
Object.unobserve(person, function (changes) {
console.log(changes);
});
person.age = 63;
// [{name: 'age', object: <obj>, oldValue: 40, type: 'update'}]
// 回调函数将会被调用
</pre>
<h2 id="浏览器兼容性">浏览器兼容性</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>{{CompatChrome("36")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatOpera("23")}}</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>{{CompatChrome("36")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatOpera("23")}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>{{jsxref("Object.observe()")}} {{non-standard_inline}}</li>
<li>{{jsxref("Array.observe()")}} {{non-standard_inline}}</li>
<li>{{jsxref("Array.unobserve()")}} {{non-standard_inline}}</li>
</ul>
|
