JavaScriptを始めるためのオブジェクトとJSONを詳しく解説_基礎知識

JavaScript オブジェクトは、従来のオブジェクト指向言語のオブジェクトとほとんど似ていません。従来のオブジェクト指向言語では、オブジェクトを作成するには、まずオブジェクトのテンプレート、つまりオブジェクトのプロパティとメソッドを定義するクラスを用意する必要があります。これらのプロパティを操作します。インスタンス化を通じてオブジェクトを構築し、オブジェクト間のコラボレーションを使用して関数を完成させ、関数のコレクションを通じてプロジェクト全体を完成させます。 JavaScript にはクラスの概念がありません。JavaScript の動的な性質により、(クラスの代わりに) 空のオブジェクトを作成し、そのオブジェクトに属性を動的に追加することでそのオブジェクトの機能を向上させることができます。

JSON は JavaScript におけるオブジェクトのリテラル値であり、オブジェクトの表現方法です。JSON を使用すると、中間変数を減らし、コードの構造をより明確かつ直感的にすることができます。 JSON を使用すると、クラスを通じてオブジェクトをインスタンス化することなくオブジェクトを動的に構築できるため、コーディングの効率が大幅に向上します。

JavaScript オブジェクト

JavaScript オブジェクトは、実際には属性のコレクションです。つまり、決定性、無秩序性、相互性があります。つまり、JavaScript オブジェクトが与えられた場合、その属性がそのオブジェクトの属性であるかどうかを明確に知ることができます (同じ名前の属性がある場合、次の宣言された属性がオーバーライドされます)。最初に宣言されました）。

一般に、オブジェクトを宣言するとき、そのオブジェクトは単なる空のコレクションであり、属性を継続的に追加することで、クラスを作成しなくても完全に機能するオブジェクトになります。次に、このモードでクラスをインスタンス化すると、コードの柔軟性が高まり、オブジェクトのプロパティを任意に追加または削除できます。

読者が Python または他の同様の動的言語の経験がある場合は、JavaScript オブジェクト自体をよりよく理解できるようになります。JavaScript オブジェクト自体は、Java 言語の辞書、または連想配列によってオブジェクトを関連付けます。この定義によれば、JavaScript オブジェクトはあらゆる複雑なデータ構造を表現できることがわかります。

オブジェクト属性

属性は、キーと値のペア、つまり属性の名前と属性の値で構成されます。プロパティの名前は文字列で、値は任意の JavaScript オブジェクトにすることができます (関数を含む JavaScript 内のすべてのものはオブジェクトです)。たとえば、オブジェクトを宣言します:

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

//オブジェクトを宣言します
var jack = new Object();
jack.age = 26;
jack.birthday = new Date(1984, 4, 5) ;

// 別のオブジェクトを宣言します
var address = new Object();
address.xno = "135";
// addr 属性をオブジェクトのアドレスに割り当てます
jack.addr = address;


このオブジェクトの宣言方法は、従来の OO 言語とはまったく異なります。オブジェクトの動作を柔軟にカスタマイズできます。

オブジェクト属性はドット演算子 (.) を介して読み取られます。たとえば、上記の例の jack オブジェクトの addr 属性は、次の方法で取得できます:

コードをコピーします コードは次のとおりです:var ja = jack.addr; ja = jack[addr];

後で この状況を回避するには、オブジェクト自体にドット (.) が含まれるプロパティがあるとします。これは、JavaScript では有効です。たとえば、jack.foo.bar を使用する場合、名前は foo.bar になります。インタプリタが誤って foo 属性の下に bar フィールドがあると考えられるため、jack[foo.bar] を使用してアクセスできます。一般的に言えば、一般的なツールキットを開発するときは、[属性名] の形式を通じて常に正確性が保証される可能性があることを想定すべきではありません。

属性と変数

第 2 章では、変数の概念について説明しましたが、この章では、この 2 つの動作が非常に似ていることに読者は気づいたかもしれません。 、実際、オブジェクトのプロパティと前に説明した変数は実際には同じものです。
JavaScript エンジンが初期化されると、クライアント環境ではグローバル オブジェクトが構築されます。このグローバル オブジェクトは window です。他の JavaScript 環境でこのグローバル オブジェクトを参照する必要がある場合は、それを最上位のスコープ (つまり、すべての関数宣言の外側のスコープ) で宣言するだけです:

コードをコピー コードは次のとおりです:var global = this;
トップレベルのスコープで宣言した変数は、グローバル オブジェクトのプロパティとして保存されます。この観点から、変数は実際にはプロパティです。たとえば、クライアント側では、次のようなコードがよく表示されます。

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

var v = "global";

var array = ["hello", "world"];
function func(id){
var element = document.getElementById(id);
/ /要素に対していくつかの操作を行います
}

は、実際には次と同等です:

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

window.v = "global";
window.array = ["hello", "world"]; (id){
var element = document.getElementById(id)
//要素に対していくつかの操作を実行します
}

プロトタイプ オブジェクト
プロトタイプ (プロトタイプ)、つまり JavaScript 独自の概念である JavaScript は、プロトタイプを使用することにより、従来の OO 言語での継承を確立し、それによってオブジェクトの階層関係を反映できます。 JavaScript 自体はプロトタイプに基づいており、各オブジェクトはプロトタイプ属性を持っているため、プロトタイプ自体もオブジェクトであるため、チェーン構造を形成することができます。
属性にアクセスする場合、パーサーは属性に遭遇するまでチェーン構造を下から上にたどる必要があり、属性に対応する値を返すか、null プロトタイプ (JavaScript の基本オブジェクトのプロトタイプ) を持つオブジェクトに遭遇します。オブジェクト属性が null)、このオブジェクトがこの属性をまだ持っていない場合は、未定義が返されます。以下の具体的な例を見てみましょう:

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

// オブジェクトのベースを宣言します

function Base(name){
this.name = name; .getName = function( ){
return this.name;
}
}
// オブジェクトの子を宣言します
function Child(id){
this.id = id;
this.getId = function(){
return this.id;
}
}
//子のプロトタイプを新しいベースオブジェクトにポイントします
Child.prototype = new Base ("base" );
//子オブジェクトをインスタンス化します
var c1 = new Child("child");
//c1 自体に getId メソッドがあります
print(c1.getId() );
//c1 はプロトタイプ チェーンから getName メソッドを「継承」しているため、
print(c1.getName());


にアクセスして結果を取得できます。 🎜>child
base

プロトタイプチェーンは下から上にたどられるため、最初に見つかった属性値が最初に返され、このメカニズムを通じてオーバーロードメカニズムを完了できます。
this ポインター
JavaScript で最もわかりにくいのは、おそらく this ポインターです。従来の OO 言語では、このポインターはクラス内で宣言され、JavaScript では現在のコンテキスト、つまりオブジェクト自体を表します。電話をかけてきた人。ここで一般的な例を見てみましょう:




コードをコピー

コードは次のとおりです: // jack という名前の人を定義します var jack = {

name : "jack",

age : 26
}
// abruzzi という名前の別の人を定義します
var abruzzi = {
name : "abruzzi",
age : 26
}
//グローバル関数オブジェクトを定義します
function printName(){
return this.name; 🎜>}
//printName のコンテキストを jack に設定します。この時点では jack
print(printName.call(jack));
//printName のコンテキストを abruzzi に設定します。今回は abruzzi の場合
print(printName.call(abruzzi));


実行結果:
jack
Abruzzi
この値は次のとおりです。 Call は関数の呼び出し方法ではなく、関数の呼び出し方法によって決まります。これは、従来のオブジェクト指向言語とはまったく異なります。これについては、第 4 章で詳しく説明します。

オブジェクトの使用
オブジェクトは JavaScript の基礎であり、オブジェクトを使用してプログラミング作業を完了します。このセクションでは、いくつかの例を使用して JavaScript オブジェクトの使用方法を学習します。
オブジェクト宣言には 3 つのタイプがあります。 :
◆ new 演算子スコープの Object オブジェクトを通じて新しいオブジェクトを構築し、属性を動的に追加してオブジェクトを最初から構築します。
◆ オブジェクトの「クラス」: プロトタイプを定義し、new 演算子を使用して新しいオブジェクトをバッチで構築します。
◆ 次のセクションで詳しく説明する JSON を使用します
このセクションでは、次のような 2 番目の方法について詳しく説明します。




コードをコピーします

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

//「クラス」を定義します。
function Address(street, xno){
this.street = street || '黄泉路'; || 135;
this.toString = function(){
return "street : " this.street ", No : " this.xno;
}
}
// 「クラス」、人
関数 人 (名前, 年齢, アドレス) {
this.name = 名前 || '
this.age = 年齢 = アドレス; || new Address(null, null);
this.getName = function () {return this.name;}
this.getAge = function(){return this.age;}
this.getAddr = function(){return this.addr.toString();}
}
//new 演算子を使用して 2 つのオブジェクトを作成します。これらの 2 つのオブジェクトは独立したエンティティであることに注意してください。
var jack = new Person(' jack', 26, new Address('Qing Hai Road', 123));
var abruzzi = new Person('abruzzi', 26);
//結果を表示
print (jack.getName( ));
print(jack.getAddr());
print(abruzzi .getAge()) ;
print(abruzzi.getAddr());


実行結果は次のとおりです:
jack
26

通り : Qing Hai Road, No : 123
abruzzi
26
通り : Huang Quan Road, No : 135


JSON とその使用法


JSON は JavaScript Object Notation (JavaScript オブジェクト) の略ですNotation)、リテラルを通じてオブジェクトを表現します。このメソッドは単純なものから複雑なものまで使用できます。例:


コードをコピー

コードは次のとおりです: var obj = { 名前 : " abruzzi"、

年齢 : 26、

誕生日 : 新しい日付(1984, 4, 5)、
アドレス : {
通り : "黄泉路"、
xno : "135"
}
}


このメソッドは、冗長な中間変数がなく、obj のようなオブジェクトの構造を明確に表現しています。実際、ほとんどの経験豊富な JavaScript プログラマーは、JSON を広範囲に使用する jQuery、ExtJS などの多くの JavaScript ツールキットを含め、この表現を使用することを好みます。 JSON は、実際にはフロントエンドとサーバー側の間のデータ交換形式として使用されています。フロントエンド プログラムは、Ajax を介して JSON オブジェクトをバックエンドに送信し、サーバー側のスクリプトが JSON を解析し、それをファイルに復元します。これは、同じデータ形式を使用する JSON オブジェクトであるため、エラーの可能性を減らすことができます。

さらに、JSON 形式のデータ自体は再帰的であるため、あらゆる複雑なデータ形式を表現できます。 JSON の記述方法は非常に単純です。つまり、キーと値のペアを中括弧で囲み、値には単純なオブジェクト String、Boolean、Number、などの任意の JavaScript オブジェクトを使用できます。 Null、または Date 、 Object、その他のカスタマイズされたオブジェクトなどの複雑なオブジェクト。

JSON のもう 1 つの応用シナリオは次のとおりです。関数に複数の戻り値がある場合、従来のオブジェクト指向言語ではオブジェクトを整理して返す必要がありますが、JavaScript ではそれほど面倒な作業は必要ありません。例:





コードをコピー

コードは次のとおりです:関数ポイント(left, top){ this.left = left; this.top = top

//左と上を処理します

return {x: this.left, y:this.top}; 🎜>}

新しい匿名オブジェクトを動的に構築してそれを返すだけです:

コードをコピーします

コードは次のとおりです:var pos = point(3, 4); //pos.x = 3; JSON を使用してオブジェクトを返します。このオブジェクトには、関数オブジェクトを含む任意の複雑な構造を含めることができます。

実際のプログラミングでは、通常、JavaScript オブジェクトを走査する必要がありますが、事前にオブジェクトの内容については何も知りません。 JavaScript は for..in の形式で糖衣構文を提供します:

コードをコピー

コードは次のとおりです。次のように:for(var item in json){ //item はキーです//json[item] は値です}

このモード実際の WEB アプリケーションでは、

など、いくつかの属性をページ要素に設定する必要があります。
コードをコピー

コードは次のとおりです:var style = { border:"1px Solid #ccc", color:"blue" };
Then, we dynamically add these attributes to a DOM element:

Copy code The code is as follows:

for(var item in style){
//Use jQuery’s selector
$("div#element").css(item, style[item]);
}

Of course, jQuery has a better way to do such a thing. Here is just an example. It should be noted that when we add attributes to $("div#element"), we change the style structure It's not clear.

In addition, for example, if we need to collect some user-defined settings, we can also expose a JSON object, and the user will fill in the JSON with the content that needs to be set, and then our program will process it.

Copy code The code is as follows:

function customize(options){
this.settings = $.extend(default, options);
}