aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/javascript/reference/global_objects/object/observe/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ru/web/javascript/reference/global_objects/object/observe/index.html')
-rw-r--r--files/ru/web/javascript/reference/global_objects/object/observe/index.html142
1 files changed, 142 insertions, 0 deletions
diff --git a/files/ru/web/javascript/reference/global_objects/object/observe/index.html b/files/ru/web/javascript/reference/global_objects/object/observe/index.html
new file mode 100644
index 0000000000..25fe9c879b
--- /dev/null
+++ b/files/ru/web/javascript/reference/global_objects/object/observe/index.html
@@ -0,0 +1,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: &lt;obj&gt;, type: 'add'}]
+
+obj.foo = 'hello';
+// [{name: 'foo', object: &lt;obj&gt;, type: 'update', oldValue: 0}]
+
+delete obj.baz;
+// [{name: 'baz', object: &lt;obj&gt;, 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>