對像簡介

鑰匙要點

• 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中文網其他相關文章！