JavaScriptガーデン：オブジェクト

はじめに

JavaScript Gardenは、JavaScript言語の最も奇妙な機能に関するドキュメントのコレクションです。 よくある間違いや微妙なバグ、パフォーマンスの問題、間違ったプログラミングスタイルを回避するためのヒントをいくつか紹介します。

これは言語の教科書ではありません。 すでに言語を知っていることを前提としています。 言語トレーニングについては、すばらしい本「 Expressive JavaScript 」のすばらしい翻訳を使用することをお勧めします 。

オブジェクト

オブジェクトの使用とプロパティ

JSでは、すべてのエンティティはオブジェクトのように動作しますが、2つの例外があります：nullとundefined。

false.toString(); // 'false' [1, 2, 3].toString(); // '1,2,3' function Foo(){} Foo.bar = 1; Foo.bar; // 1 

数値をオブジェクトとして使用できないというのは一般的な誤解です。 パーサーの不完全性により、数値の後のドットを浮動小数点数のレコードとして解析しようとします。

 2.toString(); //  SyntaxError 

これにはいくつかの方法があります。

 2..toString(); //    2 .toString(); //    (2).toString(); // 2     

データ型としてのオブジェクト

オブジェクトはハッシュ（キー値リスト）としても使用できます。 これらは主に、値がバインドされる名前付きプロパティで構成されます。

{}を使用すると、空のオブジェクトを作成できます。 Object.prototypeを継承し、独自のプロパティはありません。

 var foo = {}; //    //     'test' ,    12 var bar = {test: 12}; 

プロパティへのアクセス

アクセスは2つの方法で取得できます-ドット経由または角括弧経由。

 var foo = {name: ''} foo.name; //  foo['name']; //  var get = 'name'; foo[get]; //  foo.1234; // SyntaxError foo['1234']; //  

2つの方法の違いは、括弧によってプロパティ名の動的な割り当てと使用が可能になることです。

プロパティの削除

プロパティは、delete演算子でのみ削除できます。 未定義またはnullを割り当てると、プロパティの値のみが削除され、プロパティ自体は削除されません。

 var obj = { bar: 1, foo: 2, baz: 3 }; obj.bar = undefined; obj.foo = null; delete obj.baz; for(var i in obj) { if (obj.hasOwnProperty(i)) { console.log(i, '' + obj[i]); } } 

コードはbar undefinedとfoo nullの両方を出力しますが、bazは出力しません;削除されました。

予約語

 var test = { 'case': '  ,      ', delete: ' ,   !' //  SyntaxError }; 

オブジェクトのプロパティの名前は、単純な変数および文字列として記述できます。 別のパーサーの欠陥により、コードはSyntaxECエラーを発生させます（ECMAScript 5までのパーサーの場合）。 deleteは予約語であるため、文字列として記述する必要があります。

プロトタイプ

JSには古典的な継承モデルがありませんが、代わりにプロトタイプがあります。 これはしばしば言語の欠陥と見なされますが、実際にはこのモデルは古典的なモデルよりも強力です。 たとえば、プロトタイピングに基づいて古典的なモデルを構築するのは十分に簡単ですが、逆も同様です。

JSはプロトタイプを継承する唯一の一般的な言語であるため、従来のアプローチから切り替える際に慣れるまでに時間がかかる場合があります。 最初の違い：JSの継承では、プロトタイプチェーンが使用されます。

 function Foo() { this.value = 42; } Foo.prototype = { method: function() {} }; function Bar() {} //   Bar   Foo Bar.prototype = new Foo(); Bar.prototype.foo = 'Hello World'; // ,  Bar    Bar.prototype.constructor = Bar; var test = new Bar(); //    Bar //    test [instance of Bar] Bar.prototype [instance of Foo] { foo: 'Hello World' } Foo.prototype { method: ... } Object.prototype { toString: ... /* etc. */ } 

注：Bar.prototype = Foo.prototypeを使用する場合、両方のオブジェクトに単一のプロトタイプがあります。 次に、オブジェクトのプロトタイプの変更は、他のオブジェクトの変更につながりますが、通常、これは彼らが達成していることではありません。

上記のコードでは、テストオブジェクトはBar.prototypeとFoo.prototypeの両方から継承されているため、Fooに対して定義されたメソッド関数にアクセスできます。 また、プロトタイプであるFooインスタンスのvalueプロパティにもアクセスします。 新しいBar（）はFooの新しいインスタンスを作成するのではなく、プロトタイプに割り当てられたものを再利用することに注意することが重要です。 したがって、Barのすべてのインスタンスは同じ値プロパティを共有します。

Bar.prototype = Fooを使用しないでください。Fooプロトタイプではなく、Fooオブジェクトを指します。 したがって、プロトタイプチェーンは、Foo.prototypeではなくFunction.prototypeを通過します。 そして、そのメソッドはプロトタイプチェーンには含まれません。

物件検索

オブジェクトのプロパティにアクセスすると、JSは指定された名前のプロパティが見つかるまでチェーンをたどります。

彼がトップに到達した場合、すなわち Object.prototypeまでで、見つからない場合はundefinedを返します。

プロトタイププロパティ

チェーンの構築に使用されますが、任意の値を割り当てることができます。 ただし、プリミティブの割り当ては無視されます。

 function Foo() {} Foo.prototype = 1; //  ,    

しかし、オブジェクトの割り当ては機能し、プロトタイプチェーンの動的な作成につながります。

性能

チェーンの最上部でプロパティを見つけるのは時間がかかります。 さらに、存在しないプロパティに到達しようとすると、常にチェーン全体が通過します。 さらに、オブジェクトのプロパティを渡すと、チェーン内の各プロパティに番号が割り当てられます。

組み込みプロトタイプの拡張

拡張子Object.prototypeまたはその他の組み込みプロトタイプが不適切に使用される場合があります。 これは「猿パッチ」と呼ばれ、この手法はカプセル化を破ります。 Prototypeのような一般的なフレームワークで使用されていますが、組み込み型の目詰まりを特定する理由はありません。

組み込みプロトタイプを拡張できる唯一の理由は、新しいJSエンジンの要素（Array.forEachなど）を言語に埋め込むことです。

まとめ

プロトタイプ継承モデルを使用して複雑なコードを記述する前に、プロトタイプ継承モデルを理解することが重要です。 チェーンの長さを覚えて、必要に応じてそれらを壊します。 新しいJS機能との互換性のためにこれを行わない限り、組み込みプロトタイプを拡張する必要はありません。

hasOwnProperty

プロトタイプの1つではなく、オブジェクトに直接プロパティが存在するかどうかを確認するために使用されます。 Object.prototypeのすべてのオブジェクトによって継承されます。

未定義のプロパティをチェックするだけでは不十分です。 プロパティは存在することができ、同時に未定義にすることができます。

hasOwnPropertyは、プロパティで動作し、プロトタイプチェーンを通過しない言語で唯一のものです。

 //  Object.prototype Object.prototype.bar = 1; var foo = {goo: undefined}; foo.bar; // 1 'bar' in foo; // true foo.hasOwnProperty('bar'); // false foo.hasOwnProperty('goo'); // true 

hasOwnPropertyという名前のプロパティは言語保護されていません。 オブジェクトはその名前のプロパティを持つことができるため、hasOwnProperty外部メソッドを使用して正しい結果を取得する必要があります。

 var foo = { hasOwnProperty: function() { return false; }, bar: '  ' }; foo.hasOwnProperty('bar'); //   false //  hasOwnProperty      ,  'this'  foo ({}).hasOwnProperty.call(foo, 'bar'); // true //    hasOwnProperty  Object prototype Object.prototype.hasOwnProperty.call(foo, 'bar'); // true 

まとめ

hasOwnPropertyの使用は、オブジェクトにプロパティがあるかどうかを判断する唯一の信頼できる方法です。 多くの場合、オブジェクトのプロパティをトラバースするときに使用することをお勧めします。

forループ

in演算子と同様に、for inループは、オブジェクトのプロパティを走査するときにプロトタイプチェーンを通過します。 ループは、列挙可能な属性がfalseであるプロパティ（たとえば、配列の長さプロパティなど）を通過しません。

 //  Object.prototype Object.prototype.bar = 1; var foo = {moo: 2}; for(var i in foo) { console.log(i); //   bar  moo } 

なぜなら for in操作を変更することは不可能であり、ループの本体の不要なプロパティを除外する必要があります。 ECMAScript 3では、Object.prototypeのhasOwnPropertyメソッドがこれに使用されます。

ECMAScript 5では、enumerableがfalseの場合、Object.definePropertyを使用して、プロパティに番号を付けずにプロパティを追加できます。 この場合、コード内で何らかの理由で番号付きプロパティが追加されていると想定し、hasOwnPropertyを省略するのが妥当です。コードの可読性が低下するためです。 ライブラリコードでhasOwnPropertyを使用する必要があります。これは、プロトタイプチェーンにどの番号付きプロパティがあるかを推測できないためです。

inはチェーン全体を通過するため、各継承レイヤーでの動作が遅くなります。

hasOwnPropertyを使用してフィルタリングする

 // foo    for(var i in foo) { if (foo.hasOwnProperty(i)) { console.log(i); } } 

このようなコードは、古いバージョンでのみ使用できます。 hasOwnPropertyの使用により、mooのみが出力されます。 hasOwnPropertyを削除すると、プロトタイプが拡張される可能性があるため、コードにエラーが表示される場合があります。

ECMAScriptの新しいバージョンでは、Object.definePropertyを使用して番号のないプロパティを設定でき、hasOwnPropertyを使用せずにプロパティを渡すリスクを軽減できます。 さらに、新しいECMAScriptの機能を使用しないPrototypeのような古いライブラリの使用には注意する必要があります。

まとめ

ライブラリコードだけでなく、ECMAScript 3以下でも常にhasOwnPropertyを使用することをお勧めします。 ECMAScript 5以降、Object.definePropertyを使用すると、番号のないプロパティを定義できるため、hasOwnPropertyを省略できます。