JavaScriptでは、プロパティを作成するときは、正しい方法またはより良い構文ですか？

StackOverflow https://stackoverflow.com/questions/4735004

  •  12-10-2019
  •  | 
  •  

質問

プロパティ（キー）にアクセスして、ドット表記と正方形のブラケットを使用して設定できます。ドットプロトタイプの構文を使用する時期

var myObj = {};   
myObj.myProp1 = 'value1'; //works, an expando property   
myObj[myProp2] = 'value2'; // FAILS, myProp2 is undefined
myObj["myProp2"] = 'value2'; // works, an expando property
myObj[2010]= 'value'; //note the key is number, still works, an expando property??   
myObj.2010 = 'value'; // FAILS. to use dot notation, key must be a string

myObj.prototype.myProp3 = 'value3' // whats the advantage?
役に立ちましたか？

解決

DOT構文を使用する場合、プロパリー名は識別装置です。

var myObj = {};
myObj.myProp1 = "value1";
myObj.myProp2 = "value2";

プロパティ名は識別子の命名のルールに従う必要があるため、たとえば桁から始めることはできません。

ブラケット構文を使用する場合、プロパティ名は文字列です。

var myObj = {};
myObj["myProp1"] = "value1";
myObj["myProp2"] = "value2";

ブラケットで使用されるものは、可変、または文字列に至る任意の種類の式になる可能性があります。

var myObj = {};
var prop1 = "myProp1";
myObj[prop1] = "value1";
myObj["myProp" + 2] = "value2";

数字をプロパティ名として使用すると、文字列に自動的に変換されるため、これらは同じ結果をもたらします。

myObj[2010] = "value";
myObj["2010"] = "value";

また、リテラルを使用して値を設定することもできます。

var myObj = { myProp1: "value1", myProp2: "value2" };

（ご了承ください {} また、プロパティなしでのみオブジェクトリテラルです。）

オブジェクトのプロトタイプを使用することは、オブジェクトタイプの名前を付けた場合にのみ役立ちます（または、その他のプロトタイプをオブジェクトに割り当てます）。各オブジェクトにはオブジェクトを使用してオブジェクトを作成すると、独自のプロトタイプがあります。そのため、プロトタイプに何かを置くと、オブジェクトに配置するのと同じ効果があります。

他のヒント

プロパティの追加はどちらかです myObj.myProp また myObj["myProp"]. 。これは、JavaScriptで使用される場合の理想的なシナリオであり、優れたプラクティスです。

あなたの場合、 myObj.prototype.myProp3 = 'value3' したほうがいい いいえ オブジェクトリテラルにはプロトタイプがないため、使用してください。まあ、彼らはそうしますが、彼らは持っていません prototype プロパティ（あなたはそれを見るでしょう myObj.prototype 未定義です）。

プロトタイプが使用されます 関数 を使用してその関数から構築されたすべてのオブジェクトのデフォルトプロパティを設定するには new キーワード。個々のオブジェクトにプロパティを割り当てるために使用されることを意図したものではありません。

私にとっては、オブジェクトをどのように使用するかに依存します。

連想配列、ハッシュマップ、またはドット構文が不可能な場所のように使用する場合は、使用します。 [ と ].

しかし、私がそれらをオブジェクトのように扱っている場合、私は . 構文。

基本的に、「。」を介してオブジェクトのプロパティにアクセスすることに違いはありません。構文またはキーを介して。

var obj = new function(){this.x = "value";}
alert(obj.x === obj['x']); //it will output true

「」を使用できない場合があります。 、アクセスしようとしているプロパティの名前は有効な変数名ではないためです（数値キーで指摘したように）： 

var obj = new function(){this['my-value'] = "my value";}
alert(obj['my-value']); // it will output "my value"
alert(obj.my-value); // it will trigger an exception , because the javascript 
//interpretor interprets "obj.my-value" as the 
//property "my" of obj minus the variable "value"

大きな違いは、ブラウザが構文を処理する方法です。ご覧のように ここ 、私の友人はいくつかのテストを行いましたが、ChromeとIEはDOT構文ではるかに速く動作し、FirefoxとSafariは重要な構文に「熱心」であるようです。
結論として、「。」の状況がありますが、ほぼ毎回使用できます。少し「準備ができていない」。

プロトタイプの構文については、オブジェクトを定義する場合、すべてのインスタンスにメンバーを添付できますが、メンバーをオブジェクトのプロトタイプに添付することもできます。つまり、定義されたタイプの新しいオブジェクトが作成されると、自動的に継承されます。そのプロトタイプのメンバー。例ではよりよく理解されていると思います。 

function Point(x,y){this.x = x;this.y = y;}
Point.prototype.toString = function(){
  return "I am a point with my x coord at "+this.x+" and my y coord at "+this.y;
}

function Point2(x,y){
  this.x = x;
  this.y = y;
  this.toString = function(){
    return "I'm a point too.I'm at x:"+this.x+", y:"+this.y;
  };
}

あなたが作成するとき new Point2, 、 これは toString メソッドインスタンスメソッドとJavaScript通訳は、このメソッドのメモリを割り当てます。
あなたが「新しいポイント」を作成するとき、それは toString メソッドは、そのプロトタイププロパティにチェーンされます。つまり、その方法にはメモリが割り当てられていません。 

var p = [], p2 = [];
for(var i = 0; i < 100000000; i++)
   {
     p.push(new Point(0,0));
     p2.push(new Point2(0,0));
   }

これをテストすると、両方のオブジェクトが完璧に機能していることがわかりますが、 Point2 オブジェクトは、システムからもう少しメモリを取り除きます。何故ですか？
問題は、あなたがaに電話するときです new Point()'s toString() 方法では、オブジェクトは「toString」というメンバーがないことを認識し、プロトタイプチェーンの検索を開始し、オブジェクトの宣言で見つかった「toString」メンバーを返します。
上記の例では、すべて pのアイテムは彼らを指します toString プロトタイプで言及されているものへの方法、そしてすべて p2のアイテムは、メソッドの各コピーを指します。
さらに、後で変更したい場合 toString 方法、すべてのためにそれを変更するのは非常に簡単です Point インスタンス：
Point.prototype.toString = function(){return "I'm a smarter point";};その後、のすべてのインスタンス new Point あなたがそれを呼ぶとき、「私はより賢いポイントです」を返します toString 方法。
のために変更しようとする場合 Point2 インスタンス、それは少し難しいです。あなたはそれを見つけるでしょう Point2.toString = function(){return "I'm a dumber point";} 期待どおりに機能しません。各インスタンスのメソッドを手動で変更する必要があります。 

for(var i in p2)
  p2[i].toString = function(){return "I'm a dumber point";};

どの方法が良いかを決定させてください：P

var myObj = function () {

};
myObj.prototype.myProp3 = 'value3' // whats the advantage?

これは、MYOBJを構成として使用して複数のオブジェクトを作成する場合に使用する必要があります。すなわち。 

var obj1 = new myObj();

その後、OBJ1はMyProp3プロパティも取得します

編集： 上記の例を編集しました。 MyOBJをコンストラクターとして使用するには、関数として宣言する必要があります

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top