From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../global_objects/object/observe/index.html | 160 +++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 files/zh-cn/web/javascript/reference/global_objects/object/observe/index.html (limited to 'files/zh-cn/web/javascript/reference/global_objects/object/observe/index.html') diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/observe/index.html b/files/zh-cn/web/javascript/reference/global_objects/object/observe/index.html new file mode 100644 index 0000000000..e37cc6ab6f --- /dev/null +++ b/files/zh-cn/web/javascript/reference/global_objects/object/observe/index.html @@ -0,0 +1,160 @@ +--- +title: Object.observe() +slug: Web/JavaScript/Reference/Global_Objects/Object/observe +tags: + - ECMAScript7 + - Experimental + - JavaScript + - Method + - Object + - observe +translation_of: Archive/Web/JavaScript/Object.observe +--- +
{{JSRef}} {{obsolete_header}}
+ +

概述

+ +

Object.observe() 方法用于异步地监视一个对象的修改。当对象属性被修改时，方法的回调函数会提供一个有序的修改流。然而，这个接口已经被废弃并从各浏览器中移除。你可以使用更通用的 {{jsxref("Proxy")}} 对象替代。

+ +

语法

+ +
Object.observe(obj, callback[, acceptList])
+ +

参数

+ +
+
obj
+
被监控的对象.
+
callback
+
当对象被修改时触发的回调函数，其参数为: +
+
changes
+
一个数组，其中包含的每一个对象代表一个修改行为。每个修改行为的对象包含: +
    +
  • name: 被修改的属性名称。
    • +
  • object: 修改后该对象的值。
    • +
  • type: 表示对该对象做了何种类型的修改，可能的值为"add", "update", or "delete"。
    • +
  • oldValue: 对象修改前的值。该值只在"update"与"delete"有效。
    • +
  •  
    • +
+
+
acceptList
+
在给定对象上给定回调中要监视的变化类型列表。如果省略， ["add", "update", "delete", "reconfigure", "setPrototype", "preventExtensions"] 将会被使用。
+
+
+
+ +

描述

+ +

callback 函数会在对象被改变时被调用，其参数为一个包含所有修改信息的有序的数组对象。

+ +

例子

+ +

例子: 打印出三种不同操作类型的日志

+ +
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}]
+
+ +

例子: 数据绑定

+ +
// 一个数据模型
+var user = {
+  id: 0,
+  name: 'Brendan Eich',
+  title: 'Mr.'
+};
+
+// 创建用户的greeting
+function updateGreeting() {
+  user.greeting = 'Hello, ' + user.title + ' ' + user.name + '!';
+}
+updateGreeting();
+
+Object.observe(user, function(changes) {
+  changes.forEach(function(change) {
+    // 当name或title属性改变时, 更新greeting
+    if (change.name === 'name' || change.name === 'title') {
+      updateGreeting();
+    }
+  });
+});
+
+ +

规范

+ +

Strawman proposal for ECMAScript 7.

+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("36")}}{{CompatNo}}{{CompatNo}}{{CompatOpera("23")}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatChrome("36")}}{{CompatNo}}{{CompatNo}}{{CompatOpera("23")}}{{CompatNo}}
+
+ +

相关链接

+ + -- cgit v1.2.3-54-g00ecf