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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
---
title: Object.observe()
slug: Web/JavaScript/Reference/Global_Objects/Object/observe
tags:
- JavaScript
- Obsoleto
- observe
translation_of: Archive/Web/JavaScript/Object.observe
---
<div>
<p>{{JSRef}} {{obsolete_header}}</p>
<p>O método <strong><code>Object.observe()</code></strong> era usado para observações de mudanças, de forma assíncronas de um objeto. Ele fornecia um fluxo de mudanças na ordem em que elas ocorriam. Porém, está API foi depreciada e removida dos navegadores. Você pode utilizar o objeto {{jsxref("Proxy")}} como alternativa.</p>
</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox"><code>Object.observe(<var>obj</var>, <var>callback</var>)</code></pre>
<h3 id="Parâmetros">Parâmetros</h3>
<dl>
<dt><code>obj</code></dt>
<dd>O objeto a ser observado.</dd>
<dt><code>callback</code></dt>
<dd>A função chamada cada vez que as alterações são feitas, com o seguinte argumento:
<dl>
<dt><code>changes</code></dt>
<dd>Um array de objetos onde cada item representa uma mudança. As propriedades destes objetos de mudança são:
<ul>
<li><strong><code>name</code></strong>: O nome da propriedade que foi alterada.</li>
<li><strong><code>object</code></strong>: O objeto alterado depois que a mudança foi feita.</li>
<li><strong><code>type</code></strong>: Uma string indicando o tipo de mudança. Pode ser <code>"add"</code>, <code>"update"</code>, ou <code>"delete"</code>.</li>
<li><strong><code>oldValue</code></strong>: Apenas para os tipos <code>"update"</code> e <code>"delete"</code>. O valor antes da alteração.</li>
</ul>
</dd>
<dt><code>acceptList</code></dt>
<dd>A lista dos tipos de alterações a serem observadas no objeto dado para o retorno de chamada dado. Se omitida, o array <code>["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"]</code> será usado.</dd>
<dt>
<h3 id="Retorno">Retorno</h3>
<p>O objeto será retornado.</p>
</dt>
</dl>
</dd>
</dl>
<h2 id="Descrição">Descrição</h2>
<p>O <code>callback</code> é chamado à cada vez que uma mudança ocorre no <code>obj</code>, com um array contendo todas as mudanças na ordem em que elas ocorreram.</p>
<h2 id="Exemplos">Exemplos</h2>
<h3 id="Exemplo_Registrando_todos_os_três_tipos_diferentes">Exemplo: Registrando todos os três tipos diferentes</h3>
<pre class="brush: js">var obj = {
foo: 0,
bar: 1
};
Object.observe(obj, function(changes) {
console.log(changes);
});
obj.baz = 2;
// [{name: 'baz', object: <obj>, type: 'add'}]
obj.foo = 'hello';
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}]
delete obj.baz;
// [{name: 'baz', object: <obj>, type: 'delete', oldValue: 2}]
</pre>
<h3 id="Exemplo_Data_Binding">Exemplo: Data Binding</h3>
<pre class="brush: js">// Um modelo chamado "user"
var user = {
id: 0,
name: 'Brendan Eich',
title: 'Mr.'
};
// Criando uma saudação para o user
function updateGreeting() {
user.greeting = 'Olá, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();
Object.observe(user, function(changes) {
changes.forEach(function(change) {
// Sempre que o name e o title mudarem, o updateGreeting será executado
if (change.name === 'name' || change.name === 'title') {
updateGreeting();
}
});
});
</pre>
<h2 id="Specifications" name="Specifications">Especificações</h2>
<p><a href="https://github.com/arv/ecmascript-object-observe">Strawman proposal for ECMAScript 7</a>.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com Navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Recurso</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Suporte Básico</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>Recurso</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>Suporte Básico</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="See_also" name="See_also">Veja também</h2>
<ul>
<li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li>
<li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li>
</ul>
|
