ハーモニーコレクションNOW

Map、WeakMap、Setなどのすばらしいことに関する記事はすでにハブに掲載されていましたが、実際にはこれらのAPIの実際の機能は明らかになりませんでした（それでも検索をうまく利用した場合）。

これらのAPIは、Firefox（Chrome Canaryに含めることができます）以外には実際には実装されていませんが、最近まで、キーとしてのHTMLElementのようなオブジェクトの使用はサポートされていませんでした。 たとえば、ポリマーはわずか3週間前に削除されました

if (navigator.userAgent.indexOf('Firefox/') > -1)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

なぜ彼らはとても良いのですか？ 本質的に、Map / WeakMapは通常のハッシュオブジェクトとして認識でき、キーとして使用できるのは複雑なオブジェクト（オブジェクト、関数、配列）のみです。これは、内容に従ってではなくメモリ内のアドレスによってバインディングが行われるためです。

したがって、フロントエンドに接続することが可能になります

• dom要素
• XHRリクエスト
• ファイル要素

これにより、要素のid要素なしで作業したり、データバインディングを何倍も速くしたり、promiseのクレイジーな代替実装を作成したりすることができます。

WeakMapについて説明します。 それではなく、WeakMapの既存のポリフィルについて説明します。







残りの要素については：

マップは、キーがプリミティブまたはオブジェクトのいずれかであるハッシュです。

セットは、一意の要素のコレクションです。 Mapの上に構築するのは非常に簡単です。 その最も重要な利点は、配列の処理です。これにより、uniq問題の複雑さをO（n ^ 2）からO（n）に減らすことができます。



node.jsを使用して、DBMSを操作する機能がバックエンドにどのような機能を備えているかについては、おそらくお勧めしません。



構文は、古典的なオブジェクトの構文よりも少し複雑ですが、非常に理解可能で読みやすいものです。

 var map = new WeakMap; map.set(someObject, 'someKey'); alert(map.get(someObject)); map.delete(someObject);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

cornerJSの以前のバージョンの1つを含むいくつかのプロジェクトでは、そのようなソリューションはコードの簡潔さと読みやすさの観点から正当化されましたが、ポリフィルの1つが使用されたという事実により、このソリューションは顕著にメモリを消費すると考えました。



ecmascript.orgの実装は、オプションとして同様の実装を提供します（疑似jsから、やや縮小された実行可能ファイル、 githubでの完全な実装に転送されます）。

 window.WeakMap = function () { var keyList = []; var valueList = []; return Object.freeze({ 'get': function (key, defaultValue) { var index = keyList.indexOf(key); var value = valueList[index]; return index === -1 ? defaultValue : value; }, 'set': function (key, value) { var index = keyList.indexOf(key); if (index === -1) { keyList.push(key); valueList.push(value); } else { valueList[index] = value; } } //...( has, delete  clear) }); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この実装には多くの問題があります。

まず、メモリは著しく流れます。要素が削除されても、keyListに残ります。このようなWeakMapが実際のプロジェクトで動作する場合、大量のメモリが基本的に既に削除されたオブジェクトのストレージにリークする可能性があります。 GarbageCollectorは要素では機能せず、そのため、まだ存在していると見なされます。

エンジンレベルではこれは解決できますが、それでもGarbageCollectorが正しく機能しない場合があります。

次に、keyListに多くの要素がある場合、MacBook Air 2013のchromeでは後者の選択に時間がかかります。1e9th要素の検索には1秒以上かかりました。 タスクの複雑さはO（n）であり、パフォーマンスに大きく影響する場合があります。



サンプリングレートに関する問題を解決し、問題の複雑さをO（1）に減らす代替の実装があります。

 window.WeakMap = (function(){ var counter = Date.now() % 1e9; return function(){ var name = '__st' + (Math.random() * 1e9 >>> 0) + (counter++ + '__'); return { set: function(key, value) { var entry = key[this.name]; if (entry && entry[0] === key) entry[1] = value; else defineProperty(key, this.name, {value: [key, value], writable: true}); }, get: function(key) { var entry; return (entry = key[this.name]) && entry[0] === key ? entry[1] : undefined; } } } })();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、これはメモリの問題を解決するものではなく、さらに悪化させます。 循環リンクが各要素のメモリに表示されます：key [name] [0] === key。 オープンドキュメントを信じている場合、ガベージコレクターはそのようなシナリオをキャッチすることができないため、時間が経つにつれてメモリが詰まってしまいますが、多くの時間がかかります。

そのため、Polymer / X-tagsを慎重に使用する価値があり、その多くはWeakMapに依存しています（上記の実装を少し減らします）。 そのため、たとえば、MutationObserverのポリフィルはそれに基づいています。これは、MatationObserverだけでなく、多数のサードパーティプロジェクトでも使用されています。その多くは、メモリの問題を認識していません。

正直な実装と比較して、さらにマイナスが追加されます。 そのうちの1つは、ほとんどの場合重要ではありません。凍結されたオブジェクトにアタッチする機能が失われます。 一部の人にとっては2番目は非常に深刻です。 この実装はIE9 +になります。 最初のオプションは非常に単純なので、 MozillaからArray.prototype.indexOfポリフィルを接続するとIE6 +で動作します。 Array.prototype.indexOfもIE9で登場しましたが、少なくとも実装可能です。 Object.definePropertyとは異なり（厳密に言えば、IE8ではDOM要素のdefinePropertyがサポートされていますが、これに依存することはできません）。



その結果、大量のレコードの処理が遅くなるか、キー要素に追加のプロパティ（外部からアクセスすることを意味する場合があります）、イテレーターの一部に問題が発生し、いずれの場合も追加の属性でいっぱいになります。



jQueryにはWeakMapsの実装もあります。 jQuery.data（要素、キー）を要求するとき、WeakMap実装の1つを使用しています。 少し簡単に機能します。

おそらくあなたはあなたのコードで次のようなものを見たことがあります：

 document.body.jQuery19104357186993584037 20
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、これがjQuery独自のWeakMapの要素のIDであることがわかりました。



要素が削除されると、それは削除されますが、それでも：

• 外部のデータ変更から保護されていません。
• 値のメモリリークから保護されていません-キーは削除されますが、それらに関連付けられた値はメモリに保存されます。

ここで主要な部分に行きます。



WeakMapの名前は、GCで考慮されていない弱い参照を弱参照を実装したかったためです。それぞれ、このキーの他のエントリがない場合、キーと値の両方が削除されます。

正しい実装では、キーと値の両方を削除する必要があります。

しかし、見出しのgithubにあるリポジトリの1つで、驚くことはできませんが、フレーズに出くわすまで、これが可能だとは思いもしませんでした。

漏れのないO（1）ルックアップ時間のWeakMapのShim

これはObject.definePropertyに依存します-これはIE9 +およびフリーズされたオブジェクトを参照できないことを意味しますが、要素には新しい属性がありませんでした。

リポジトリ自体はこちらです： https : //github.com/Benvie/WeakMap/

私はこれがどれほど真実であるかをチェックすることに抵抗できませんでした。



このために、メモリスナップショットを使用した簡単で迅速なテストが行​​われました。

• 最初のページは空白のページで撮影されました（ 青い矢印 ）
• ポリフィルの実装で2番目に星印（ 黄色の矢印 ）
• 3番目は、要素を作成してメモリに入力した後に削除されました（ 赤い矢印 ）
• 4番目は、要素への残りのリンクが削除された後に削除されました（ 緑の矢印 ）

コードを完全にテストする

 // ""  1 //  // ""  2 var someStorage = []; var map = new WeakMap; var length = 1e5; // ie    1e4,     1e5      10   . for (var i = 0; i < length; i++) { someStorage[i] = {randomValue: Math.random() * 1e9 >>> 0}; //     ,        -  garbage collector       map.set(someStorage[i], {otherRandomValue: Math.random() * 1e9 >>> 0}) } // ""  3 for (var i = 0; i < length; i++) { someStorage[i] = void 0; } // ""  4
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果は次のとおりです。



Chrome 30（Mac 10.9）





Firefox 24（Mac 10.9）





IE 11（Win 8.1）





私は正直に認めます-アプリケーションが使用したすべてのメモリ（キーと値の両方のメモリ）が放棄されたことを見てショックを受けました。



その後、念のため、検索時間が本当にO（1）になるようにしました。 それは真実であることが判明しました。



Chrome 30（Mac 10.9）





Firefox 24（Mac 10.9）





最後に、それはすべて真実です。 WeakMapは実際に多数のプロジェクトで使用でき、データバインディング、ミサゴでの作業、多数のプラグインの作成に大きな可能性を与えます。これは、5つごとにIE8 +プロジェクトとIE9 +の残りの5つだけがある場合に、今日行うことができます。 同時に、WeakMapは特定の種類のデータの処理を簡素化するだけでなく、パフォーマンスの向上と最適化を可能にし、場合によってはメモリの処理も大幅に改善します。

主なことは、適切なポリフィルを選択することです。



ところで、次のようなダブルポリフィルを作成できます。

 if (Object.defineProperty) { window.weakMap = //O(1)         } else { window.weakMap = //O(n)  ,     }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

もちろん、このソリューションで最も興味深いのは、その仕組みです。 解決策は非常に紛らわしいので、それを理解するために、著者（ Brandon Benvie ）に連絡して、最も紛らわしい詳細を理解するために彼にいくつか質問をしなければなりませんでした。



私は他の誰かのコードに徹底的に触れるのは好きではありませんが、これは実装するのが信じられないほど興味深いものでしたが、ブランドン（著者）はES3でES6コンパイラを書き、app.js（ノード上のデスクトップアプリケーション用のプラットフォーム）を作成しましたJSでさらに複雑なソリューションを実装しました。

免責事項：ほとんどの例では、読みやすくするためにコードがわずかに削減されています。一部のチェックは削除され、一部はインライン化されています。 ここで引用しているコードは、ガベージコレクターがメモリを解放できるようにするための一種のシャーマニズムであるか、コードをより高速に動作させるが、普通の人を簡単に混乱させて怖がらせることができるため、実際の使用にはお勧めしません平均的なフロントエンド開発者。

最初は、すべてのメソッドが戻ることを混乱させる可能性があります

 function toString() { [native code] }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この場合、バインドはどこでも行われず、通常の関数をそのような関数に変えることができます。

ただし、次のように設定されたprepメソッドは、すべてがはるかに単純であることが判明しました。

 var prep = { __proto__: [] } instanceof Array ? function(f){ f.__proto__ = stringifier } : function(f){ define(f, stringifier) };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

特定の要素をプロトタイプ化する__proto__オブジェクトを作成します。

stringifierは別の関数です。

 var stringifier = function toString(){ return src[0] + nameOf(this) + src[1]; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それはtoStringメソッドとしてそれ自身に設定されます（私が理解しているように-これは簡潔にするためです）。 その結果、実際には次のようなものが得られます。

 a.__proto__ = { toString: function(){ return "function "+this.name+"() { [native code] }" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ちなみに、この特定のコードは、関数のname属性がすべてのJS実装で利用できるわけではないため、特にうまく機能しません。それを使用するのは悪い習慣と見なされます。 関数は環境（名前を含む）に依存せず、どのような条件下でも同じように機能する必要があります。

Function.prototype.nameはすべての実装で使用できるわけではないため、Brandonコードでは、関数名は次のように定義されています。

 function nameOf(func){ return 'name' in func ? func.name : toSource.call(func).match(/^\n?function\s?(\w*)?_?\(/)[1]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

define（stringifier、stringifier）を削除するだけで十分であり、コードが混乱を防ぐことができます。



そのため、キーの保存場所を理解する必要があります。 これを行うには、値を設定し、set関数に分類します。

 function set(key, value){ unwrap(this).set(key, value); } function get(key){ return unwrap(this).get(key); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、ここから楽しみが始まります。

 var unwrap = function(weakMap){ return data.unlock(weakMap).value; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

dataは内部クラスDataのインスタンスであり、それ自体はWeakMapに非常に似ていますが、getとsetの2つのメソッドしかありませんが、weakMap自体はすべて1つの大きなDataオブジェクトに格納されます。 1つのデータオブジェクト。

すべてのWeakMapを格納するメタWeakMap（スペードをスペードと呼ぶ場合）があります。各WeakMapには、オブジェクトのキーと値のペアがすでに含まれています。



そして最後に、Dataオブジェクトで最も興味深いことです。



最初の秘:：キーの一般的なセットから値を非表示にして、どのイテレータにも該当しないようにします。 これを行うには、getOwnPropertyNamesを再割り当てします

 Object.defineProperty(Object, 'getOwnPropertyNames', { value: function getOwnPropertyNames(obj){ var props = getProps(obj); if (Object.prototype.hasOwnProperty.call(obj, globalID)) //   hasOwnProperty,       - . props.splice(props.indexOf(globalID), 1); return props; } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果として、chromiumデバッガーでさえ、プロパティの存在を疑っていません。







2番目のトリック：

 function storage(obj){ if (hasOwn.call(obj, globalID)) return obj[globalID]; //   Object.isExtensible var store = create(null); defProp(obj, globalID, { value: store }); return store; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

出力では、キー値を持つ一意のオブジェクトを取得します。

 function Data(){ var puid = createUID(), //   16-  secret = {}; // -      WeakMap   ,             .      ,      ,     .     –   private    Data this.unlock = function(obj){ var store = storage(obj); if (hasOwn.call(store, puid)) return store[puid](secret); var data = Object.create(null, { value: { writable: true, value: undefined } }); Object.defineProperty(store, puid, { value: (function(secret,data){ return function(key){ if(key===secret) return data } })(secret, data) }); return data; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初の非常に興味深い行は次のとおりです。

 Object.create(null, { value: { writable: true, value: undefined } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

nullから継承するオブジェクトを作成します。これにより、拡張のないダミーオブジェクトが提供されます。次に、2番目の引数としてpropertiesObjectを渡します。これにより、definePropertyを介して必要な値を設定できます。 明示的に値を作成しますが、それが既に存在し、その後チェック（データの「値」）を渡すためだけに、未定義で渡します。



2番目の非常に興味深い行：

 Object.defineProperty(store, puid, { value: (function(secret,data){ return function(key){ if(key===secret) return data } })(secret, data) });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

本質的に、各WeakMapに固有の一意の特定のダミーオブジェクトを取得し、秘密キーと一致する場合に格納された値を返す関数を取得します。



実際、元のコードではさらに混乱しています。

 defProp(store, puid, { value: new Function('s', 'l', 'return function(k){if(k===s)return l}')(secret, data) });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ブランドンは次のようにコメントしました。

単にパフォーマンス。 リテラル関数を定義することにより、スコープ内のすべてのローカル変数も取り込むことができます。 「関数」を使用することで、スコープ内の唯一のものはグローバルオブジェクトです。 目標は、不注意によるメモリリークを防ぐことでした。 お使いのバージョンもおそらく正常に動作しますが、それ以外の場合は保持されない参照をリークする可能性があり、WeakMapを使用する目的の多くは、この種のリークを防ぐことです。

ロシア語への無料の拡張翻訳では：

これはパフォーマンスのために行われます。 function（）{}を使用して関数を作成することにより、ローカルのミサゴにバインドします-いかなる方法でもそれを使用しないという事実にもかかわらず。 デバッガーを使用する場合、この関数の内部から、作成された配列全体が利用可能であることがわかります。

new Functionは、グローバルスコープで機能する関数を作成し、ローカルスコープへのバインディングを削除します。 実装の目的はメモリリークがないことであり、そこで行われたすべての作業は、主にリークがないことに対して行われました。

その結果、実際には、メモリ内の何かのように見えます。

 var map = new WeakMap; var a = {}; map.set(a, ['test']) console.log(a['2ql3g5ae6pcwstt9']['o6tnzx1xskf39pb9']) >function (k){if(k===s)return l}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

['2ql3g5ae6pcwstt9']は、任意のweakMapに該当するすべての要素に共通のランダムに生成されたglobalIDからの名前を持つダミーオブジェクトであるキーストア、および['2ql3g5ae6pcwstt9'] ['o6tnzx1xskf39pb9クロージャを格納するオブジェクト

 { value: '' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2番目の引数として。 値が変更された場合は、値を置き換えますが、オブジェクトは以前と同じようにクロージャー内に残ります。



すべてのキーは、Object.getOwnPropertyNamesから削除するまで、あらゆる意味で非表示になります。これにより、コード内に存在する疑いのない、ほとんど存在しないキーが得られます。それらは、イテレータにリストされず、クエリ。

結果として、簡単に変更でき、常にキーで削除されるコンテンツを含むコンテナを開くためのキーを備えた完全に安全な（コード内の変更なしのアクセスは不可能です）IE9 + WeakMapsの実装を取得します。 O（1）の複雑さ、および属性が設定可能なObject.definePropertyによる書き込み不可および削除不可。アクセスキーで構成可能：false、列挙可能：false、書き込み可能：false（デフォルトで設定）。



もちろん、キーの属性が作成されるという事実は好きではありませんが、どのソリューションがこれより理想的かはわかりません。 ブランドンが記憶を扱う素晴らしい仕事をし、本番で使用すべき決定を下したことを認めるだけです。



コメントで、特にHarmonyコレクションと特にWeakMapを引き続き使用できる理由、および同様のAPI全般に対する態度について意見を聞くことができます。



UPD。 ブランドンは、（0、eval）（ 'this'）が最後に行われた理由を説明しました。 （0、eval）（ "this"）は、var e = evalとほぼ同等です。 e（「これ」）。 実際、evalは常にローカル配列で機能しますが、evalを別の変数に割り当てて実行すると、グローバル環境で実行されます。