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
|
---
title: Object.observe()
slug: Web/JavaScript/Reference/Global_Objects/Object/observe
tags:
- ECMAScript7
- Experimental
- JavaScript
- Method
- Object
- Reference
translation_of: Archive/Web/JavaScript/Object.observe
---
<div>{{JSRef("Global_Objects", "Object")}}</div>
<h2 id="Summary" name="Summary">Сводка</h2>
<p>Метод <strong><code>Object.observe()</code></strong> используется для асинхронного обзора изменений в объекте. Он предоставляет поток изменений в порядке их возникновения.</p>
<h2 id="Syntax" name="Syntax">Синтаксис</h2>
<pre class="syntaxbox"><code>Object.observe(<var>obj</var>, <var>callback</var>)</code></pre>
<h3 id="Parameters" name="Parameters">Параметры</h3>
<dl>
<dt><code>obj</code></dt>
<dd>Обозреваемый объект.</dd>
<dt><code>callback</code></dt>
<dd>Функция, вызываемая при возникновении изменений в объекте, принимает следующий аргумент:
<dl>
<dt><code>changes</code></dt>
<dd>Массив объектов, представляющих одно изменение. Объекты с изменениями содержат следующие свойства:
<ul>
<li><strong><code>name</code></strong>: имя изменённого свойства.</li>
<li><strong><code>object</code></strong>: изменённый объект после изменения.</li>
<li><strong><code>type</code></strong>: строка, указывающая тип произошедшего изменения. Может принимать одно из значений: <code>"add"</code>, <code>"update"</code> или <code>"delete"</code>.</li>
<li><strong><code>oldValue</code></strong>: только для типов <code>"update"</code> и <code>"delete"</code>. Значение до изменения.</li>
</ul>
</dd>
</dl>
</dd>
</dl>
<h2 id="Description" name="Description">Описание</h2>
<p>Функция <code>callback</code> вызывается каждый раз при возникновении изменений в объекте <code>obj</code> с массивом всех изменений в порядке их возникновения.</p>
<h2 id="Examples" name="Examples">Примеры</h2>
<h3 id="Example.3A_Logging_all_three_different_types" name="Example.3A_Logging_all_three_different_types">Пример: журналирование всех трёх типов изменений</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="Example.3A_Data_Binding" name="Example.3A_Data_Binding">Пример: привязка данных</h3>
<pre class="brush: js">// Пользовательская модель
var user = {
id: 0,
name: 'Брендан Айк',
title: 'М-р.'
};
// Создаёт приветствие для пользователя
function updateGreeting() {
user.greeting = 'Здравствуйте, ' + user.title + ' ' + user.name + '!';
}
updateGreeting();
Object.observe(user, function(changes) {
changes.forEach(function(change) {
// Любое изменение имени или обращения обновит привествие
if (change.name === 'name' || change.name === 'title') {
updateGreeting();
}
});
});
</pre>
<p> </p>
<h3 id="Custom_change_type">Custom change type</h3>
<pre><code>// A point on a 2D plane
var point = {x: 0, y: 0, distance: 0};
function setPosition(pt, x, y) {
// Performing a custom change
Object.getNotifier(pt).performChange('reposition', function() {
var oldDistance = pt.distance;
pt.x = x;
pt.y = y;
pt.distance = Math.sqrt(x * x + y * y);
return {oldDistance: oldDistance};
});
}
Object.observe(point, function(changes) {
console.log('Distance change: ' + (point.distance - changes[0].oldDistance));
}, ['reposition']);
setPosition(point, 3, 4);
// Distance change: 5</code></pre>
<p> </p>
<h2 id="Specifications" name="Specifications">Спецификации</h2>
<p><a href="https://github.com/arv/ecmascript-object-observe">Черновое предложение к обсуждению для ECMAScript 7</a>.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>
<div> </div>
<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>
<p>{{Compat("javascript.builtins.Object.observe")}}</p>
<h2 id="See_also" name="See_also">Смотрите также</h2>
<ul>
<li>{{jsxref("Object.unobserve()")}} {{experimental_inline}}</li>
<li>{{jsxref("Array.observe()")}} {{experimental_inline}}</li>
</ul>
|
