对象简介

钥匙要点

• object.observe，也称为o.o，是ecmascript 7的一部分，可以添加到javaScript中，以在浏览器中本地支持对象更改检测。它直接在对象上工作，而无需创建周围的任何包装器，从而易于使用并有益于性能。
observe（）方法是一种在对象上定义的异步静态方法，可用于寻找对象的更改。它接受三个参数：要观察的对象，检测到更改时要调用的回调函数，以及一个可选的数组，其中包含要观看的更改类型。
• 观察数组类似于观察对象，唯一的区别是观察者函数必须使用Array.Observe而不是Object.Observe。
>可以分别使用object.unobserve（）或array.unobserve（）删除对象或数组上的注册观察者。此方法接受两个参数，即对象或数组，以及要删除的回调。
• >
• 双向数据绑定现在是客户端应用程序的关键特征之一。没有数据绑定，开发人员就必须处理大量逻辑，以在模型发生变化时手动将数据绑定到视图。 JavaScript库，例如基因敲除，Angularjs和Ember都支持双向绑定，但这些库使用不同的技术来检测变化。
淘汰赛和Ember使用可观察的物品。可观察物是包裹在模型对象属性的功能。每当相应对象或属性的值发生变化时，都会调用这些功能。尽管这种方法运行良好，并且检测并通知所有更改，但它剥夺了使用普通JavaScript对象的自由，因为我们必须处理功能。 什么是object.observe？
object.observe，又称O.O，是ecmascript 7的一部分，是一个要添加到JavaScript中的功能，以在浏览器中本地支持对象更改检测。尽管ES7尚未完成，但此功能已经在基于眨眼的浏览器（Chrome和Opera）中支持。

>。

因为object.observe将由浏览器本地支持，并且它直接在对象上起作用而无需创建周围的任何包装器，因此API既易于使用又易于使用。如果Object.Observe由浏览器支持，则可以实现双向绑定而无需外部库。这并不意味着一旦实现了O.O，所有现有的双向绑定库将无用。我们仍然需要它们在使用O.O.检测更改后有效地更新UI。此外，如果并非全部针对的浏览器支持O.O.

观察对象的属性
>现在您已经了解了O.O有益的东西，让我们在行动中看到它。>

observe（）方法是一种在对象上定义的异步静态方法。它可用于寻找对象的更改，并且接受三个参数：>

一个要观察的对象

>
检测到更改时要调用的回调函数
一个可选的数组，其中包含要观看的更改类型
>让我们看看使用该方法的示例。考虑以下片段：
在此代码中，我们创建了一个具有一些数据的对象。我们还定义了一个名为observecallback（）的函数，该函数将用于记录对象的更改。然后，我们开始使用O.O.开始观察更改。最后，我们对对象进行了一些更改。
>

>如果您在控制台上看到输出，则会发现所有三个更改均被检测到并记录。以下屏幕截图显示了摘要产生的结果：

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

o.o不同步运行，它将所有更改都发生了，并在调用时将它们传递给回调。因此，在这里，我们收到了对对象上应用的三个更改的三个条目。如您所见，每个条目都由属性的名称更改，旧值，更改的类型以及具有新值的对象本身。

>下面报告了上一个代码的实时演示（请记住要打开控制台以查看结果）：
请参阅codepen上的sitepoint（@sitepoint）的笔emkveb。 在我们的代码中，我们没有指定要查找的更改的类型，因此它观察到添加，更新和删除。可以使用观察方法的第三个参数来控制这：>

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

注册通知

observe（）方法能够检测对添加到对象的直接属性上所做的更改。它无法检测使用Geters和setter创建的属性的更改。由于这些属性的行为由作者控制，因此变更检测也必须由作者拥有。要解决此问题，我们需要使用通知器（通过object.getNotifier（）获得）来通知属性上所做的更改。

>

考虑以下片段：

<span>Object.observe(person, observeCallback, ['add', 'update']);</span>

toodype是具有两个属性的构造函数。除此之外，还使用object.defineproperty添加了阻塞。在我们的示例中，为此属性定义的设置器很简单。在典型的业务应用程序中，它可能执行一些验证，并且如果验证失败，则可能无法设置值。但是，我想让事情变得简单。
最后注意，您可以看到在我们的示例中，只有在有更新时发送通知。

>

对属性进行的更改会在Chrome开发人员工具中产生以下结果：>

>下面报告了此示例的实时演示（请记住要打开控制台以查看结果）：
请参阅codepen上的sitepoint（@sitepoint）的笔npzgoo。

观察多个变化

有时，在以某种方式修改两个或多个属性后，我们可能有一个计算要运行。尽管我们可以使用通知器单独通知这两个更改，但是最好发送带有自定义类型名称的单个通知，以表明两个值都已修改。这可以使用notifier.performchange（）方法完成。此方法接受三个参数：

>自定义类型的名称

执行更改的回调函数
>回调函数。从此功能返回的值在“变更对象”中使用
• 应用更改的对象
>
>让我们添加上面已定义的类型定义的新属性。该属性的值指定是否完成了TODO项目。当完成的价值设置为true时，我们需要将属性的值设置为true。
• 以下片段定义了此属性：

>一旦执行了pertermchange回调的逻辑，将通过传递的自定义更改类型通知更改。 Observe默认情况下不会观察到这种类型。我们需要明确要求O.O观察自定义类型的更改。以下片段在托多对象上显示了一个修改的o.o，以观察自定义类型的更改以及添加和更新类型：>

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

>上面的摘要将“封锁”值设置为true之前，然后将其设置为true。因此，它发送了带有自定义更改类型的通知。以下屏幕截图显示了由自定义类型返回的更改对象的详细信息：>

>下面报告了此示例的实时演示（请记住要打开控制台以查看结果）：
>请参阅codepen上的sitepoint（@sitepoint）的笔yyexgd。

观察数组

观察数组类似于观察对象。唯一的区别是观察者函数必须使用array.observe而不是object.observe注册。以下片段证明了这一点：

>下面报告了此示例的实时演示（请记住要打开控制台以查看结果）：

<span>Object.observe(person, observeCallback, ['add', 'update']);</span>

请参阅codepen上的sitepoint（@sitepoint）的笔gggezq。

删除注册的观察者
>可以分别使用object.unobserve（）或array.unobserve（）删除对象或数组上的注册观察者。此方法接受两个参数，即对象或数组以及要删除的回调。因此，要使用此方法，我们需要具有回调的引用。

>

结论

一旦所有浏览器都完全支持O.O，更改检测将在所有客户端库中进行标准化。 Aurelia已经开始使用它，Angular 2，watchtower.js的变更检测库，内部使用o.o，Ember也将在以后使用它来进行更改检测。当O.O本地可用时，Angular 2和Aurelia的Pollyfills实施了后备。

<span>function <span>TodoType</span>() {
</span>  <span>this.item = '';
</span>  <span>this.maxTime = '';
</span>  
  <span>var blocked = false;
</span>  
  <span>Object.defineProperty(this, 'blocked', {
</span>    <span>get:function(){
</span>      <span>return blocked;
</span>    <span>},
</span>    <span>set: function(value){
</span>      <span>Object.getNotifier(this).notify({
</span>        <span>type: 'update',
</span>        <span>name: 'blocked',
</span>        <span>oldValue: blocked
</span>      <span>});
</span>      blocked <span>= value;
</span>    <span>}
</span>  <span>});
</span><span>}
</span>
<span>var todo = new TodoType();
</span>
todo<span>.item = 'Get milk';
</span>todo<span>.maxTime = '1PM';
</span>
<span>console.log(todo.blocked);
</span>
<span>Object.observe(todo, function(changes){
</span>  <span>console.log(changes);
</span><span>}, ['add', 'update']);
</span>
todo<span>.item = 'Go to office';
</span>todo<span>.blocked = true;</span>

>

客户端双向绑定周围的未来将通过浏览器的出色添加而更加明亮。让我们期待其他浏览器尽早赶上！

经常询问的问题（常见问题解答）。

为什么对object.observe弃用了？

对象。它无法观察到功能中所做的更改，也无法跟踪对象原型的更改。此外，发现它在性能方面效率低下，因为它需要大量资源来跟踪大对象的变化。贬值也受到ES6中新功能（例如代理和反思）的引入的影响，这些特征提供了更有效的方法来观察和反应对象的变化。

> aboce.observe的替代方法是什么？最受欢迎的选择之一是使用ES6代理。代理允许您为对象的基本操作定义自定义行为，例如属性查找，分配，枚举，功能调用等。另一种选择是使用库（例如mobx或vue.js），它们提供了自己的机制来观察对象的变化。

> es6 proxies如何作为object.observe的替代方案？ > ES6代理提供了一种自定义对象上基本操作的行为的方法。使用两个参数创建代理：目标对象和处理程序对象。处理程序对象为目标对象的各种操作定义了“陷阱”。执行这些操作后，触发处理程序中的相应陷阱，从而可以执行自定义行为。这使得代理成为观察对象变化和反应的强大工具。

>使用ES6代理而不是对象。它们提供了一种更灵活，更有力的方法来观察和对物体变化的反应。使用代理，您可以为广泛的操作定义自定义行为，而不仅仅是对属性的变化。代理也比Object.Observe更好，尤其是在处理大型对象时。此外，代理是ES6标准的一部分，这意味着它们得到了所有现代浏览器的支持。

我仍然可以在项目中使用object。仍然使用对象。在您的项目中，它是强烈灰心的。 Obser.Observe已被弃用并从JavaScript标准中删除，这意味着它不再维护，并且可能不受所有浏览器的支持。使用折衷的功能可能会导致项目中的兼容性问题和其他问题。建议使用诸如ES6代理或库之类的替代方案，例如mobx或vue.js.

>我如何从对象迁移。代理涉及替换对象。用代理对象访问呼叫。您没有观察到对象属性的更改，而是为要在代理的处理程序对象中观察到的操作定义陷阱。这可能涉及您的代码进行一些重构，但它提供了一种更加灵活，更有效的方法来观察对象的变化。

使用ES6代理的性能影响是什么？

ES6代理通常比Object.Observe更有效，尤其是在处理大型对象时。但是，像任何功能一样，应明智地使用它们。为应用程序中的每个对象创建代理都会导致性能问题。最好仅在必要时使用代理，并保持处理程序尽可能轻巧。

使用ES6 Proxies是否存在任何限制或问题？他们确实有一些局限性。例如，它们不能用于观察对数组长度属性的更改。同样，代理并不能提供观察对象原型更改的方法。但是，通常可以使用ES6的其他功能来解决这些局限性，例如Reffle。

如何处理MOBX或VUE.JS之类的库处理对象观察？

MOBX或VUE等库.js提供了自己的机制来观察对象的变化。例如，MOBX使用可观察的属性和计算值来跟踪变化，而VUE.JS使用反应性数据模型。这些库提供了用于对象观察的高级API，使其比原始的ES6代理更易于使用。

> JavaScript中对象观察的未来是什么？ JavaScript可能会因语言的持续发展以及库和框架的发展而塑造。 ES6代理和反思之类的功能为观察和反应对象的变化提供了强大的工具，MOBX和VUE.JS之类的库以这些工具为基础，以提供高级API来进行对象观察。随着语言和生态系统的继续发展，我们可以期望看到更有效，更灵活的方法来观察对象的变化。

以上是对象简介的详细内容。更多信息请关注PHP中文网其他相关文章！