JavaScript のオブジェクトを理解する 推奨_javascript スキル

JavaScript にはクラス定義はなく、オブジェクトの作成時に新しいプロパティとメソッドを動的に作成できます。その場合は、このプロパティの新しい値を作成するだけです。例は、オブジェクトを作成し、2 つの属性 x と y を追加します。

コードをコピーします コードは次のとおりです。

var Programmer = new Object(); 🎜>Programmer .name = "Young";
Programmer.age = 25;
alert(Programmer.name " : " Programmer.age);

JavaScript オブジェクトはc# または vb オブジェクト 、JavaScript オブジェクトはキーと値のペアのコレクションとして見ることができ、オブジェクト プロパティには object.property 名を使用してアクセスします。 JavaScript オブジェクトは .NET Framework の Dictionary クラスと考えることができ、「[]」演算子を通じてオブジェクトのプロパティを作成できます。

コードをコピーします コードは次のとおりです。

var Programmer = new Object(); 🎜>プログラマー ["名前"] = "若い";
プログラマー["年齢"]= 25;
document.getElementById("メッセージ").innerHTML=プログラマー["名前"] " : " プログラマー[ "age" ];
alert(Programmer.name " : " Programmer.age); 上記の例から、オブジェクトにアクセスする 2 つの方法が同じであることがわかります。プロパティが作成されていない場合は、「未定義」が返されます。


関数をキー/値ペア セットの値として追加して、オブジェクトのメソッドとして構築することもできます。

コードをコピーします コードは次のとおりです:

var Programmer = new Object();

Programmer["name"] = "Young"; 🎜>Programmer.age= 25 ;
Programmer.speak=function(){
alert(this.name " : " this["age"]);
}
Programmer.speak() ;


上記のコードでは、アクセス可能なプロパティとメソッドを定義するために「.」と「[]」を区別なく使用しています。これらの演算子は概念的に混乱を引き起こす可能性があります。既存のプロパティに新しい値を設定することは、あまり明確ではありません。意図をより明確に表現するために、以下に 3 番目の構文を紹介します。

コードをコピー コードは次のとおりです: var Programmer =

{

名前: "若い",
年齢: 25,
speak : function(){alert(this.name " : " this.age) }
}
Programmer.speak();上記のコードは、オブジェクトの初期化の開始と終了をより明確に表現します。このメソッドを使用して、排他的なオブジェクトにオブジェクトをネストすることもできます。 var Programmer =
{
人物 : {名前 : "Young" 、年齢 : 25 }、
会社 : {name : " Arcadia" 、住所 : "ShenZheng"}、
speak : function( ){
alert("name:" this.Figure.name "nage:" this.Figure.age "nCompany:" this.Company.name " of

" this.Company.address);
}
};
Programmer.speak();


この構文は、その明確な意図とコンパクトなコード レイアウトのため、非常に人気があります。現在インターネットで普及している JavaScript Object Notation (JSON) を含む JavaScript フレームワークでは、JSON は軽量のデータ交換形式であり、機械による解析と生成も簡単で、構文も非常に厳密です。 JSON を使用すると、JavaScript がインターネット上でデータを交換できるようになり、eval を使用して JSON オブジェクトをローカル JavaScript オブジェクトに変換できます。

コードをコピー コードは次のとおりです: var Programmer="({name: '若い'、年齢 : 25})";

var p = eval(Programmer);

alert(p.name ',' p.age);


私たちは、上記の説明では、すべての JavaScript オブジェクトが辞書のセットであることを理解してください。 JavaScript には関数というもう 1 つの重要なものがあります。
1: JavaScript では、関数はオブジェクトです。 C#でのやり方とは全く異なります。以下に例を見てみましょう。

コードをコピー コードは次のとおりです:

function add(point1, point2)
{
var result = {
x : point1.x point2.x,
y : point1.y point2.y
}
結果を返す
}
var p1 = { x: 1, y: 1 };
var p2 = { x: 2, y: 2 }; (p1, p2);
alert(p3.x "," p3.y);2: 関数をオブジェクトのメソッドとして使用します。 var Boy=
{
name:"Young",
Love:function(Girl){
return this.name "Fell in love with" Girl.name
}
}
var Girl={
name:"Jing"
}
alert(Boy.Love(Girl));

問題は 2 つの類似したオブジェクトです。 love メソッドが 1 つあり、もう 1 つは存在しません。これは、C# と同様のクラスを定義したのではなく、単に 2 つのオブジェクトを作成しただけであるためです。両方のオブジェクトに love メソッドが必要な場合は、次のように定義できます。

コードをコピー コードは次のとおりです:

function LoveRelation(person){
alert(this .name "恋に落ちた" person.name);
}
var person1={
name:"Young",
Love:LoveRelation
}
var person2={
name:"Jing",
Love:LoveRelation
}
person1.Love(person2);

上記のコードは、 person クラスのインスタンスが 2 つあるため、これら 2 つのインスタンスが同じ特性を持つようにするには、明らかに上記のコードだけでは十分ではありません。この要件を満たすには 2 つの方法があります。
パス 1:

コードをコピー コードは次のとおりです。

function Person( n)
{
this.name=n;
this.Love=function(person)
{
alert(this.name " は " person.name) に恋しました。 🎜>}
}
var person1=新しい人("若い");
var person2=新しい人("ジン"); >
アプローチ 2: JavaScript オブジェクトのプロトタイプ属性を使用します。

コードをコピー

コードは次のとおりです。 function Person(n) { this.name=n;

}

person.prototype.Love=function(person)
{
alert(this.name " は "person.name" に恋をしました); 🎜>}
var person1=新しい人("若い");
var person2=新しい人("ジン");
人1.愛(人2); ;


上記の例では、 Person 関数を Person オブジェクトのコンストラクターとみなすことができ、このコンストラクターを通じて構築されたすべてのオブジェクトはプロトタイプ属性を共有します。
Douglas Crockford の Private Members In JavaScript" では、著者が詳細なデモを行っています。オブジェクトのプライベート メンバーの作成については詳しく説明しません。デモを簡単に書き直します。

コードをコピーします。


コードは次のとおりです。

function Point(x, y) { this.get_x = function() { return x; } this.set_x = function(value) { x = value ; } this.get_y = function() { return y; }

this.set_y = function(value) { y = 値; }

Point.prototype.print = function()
{
return this.get_x() ',' this.get_y();

var p = new Point(2,2); .set_x(4);
alert(p.print());


最後に、名前空間を使用すると、同じ名前の型間の競合を排除できます。 C# を経験したことのある友人なら、この点についてよく理解しているはずです。次のコードを使用して JavaScript で名前空間を定義できます。 var Arcadia = {}




Copy code


コードは次のとおりです:

Arcadia.person=function(n)

{ this.name=n; } Arcadia.person .prototype.Love=function(person) { alert(this.name " は " person.name) に恋をしました。" }

var person1=new Arcadia.person("Young" );

var person2=new Arcadia.person("Jing");