JavaScriptカーネルシリーズ第3章オブジェクトとJSON

第三章対象とJSON
JavaScriptオブジェクトは、従来のオブジェクト向けオブジェクトとほとんど似ていません.従来のオブジェクト向け言語では、オブジェクトのテンプレート:クラス、クラスでオブジェクトのプロパティを定義し、これらのプロパティを操作する方法を作成する必要があります.インスタンス化によってオブジェクトを構築し、オブジェクト間のコラボレーションを使用して機能を完了し、機能の集合によってプロジェクト全体を完了します.Javascriptにはクラスの概念はありません.JavaScriptのダイナミック性を利用して、クラスではなく空のオブジェクトを作成し、オブジェクトのようにプロパティを動的に追加することで、オブジェクトの機能を改善することができます.
JSONはJavaScriptのオブジェクトの字面量であり、オブジェクトの表示方法であり、JSONを使用することで、中間変数を減らすことができ、コードの構造をより明確にし、より直感的にすることができる.JSONを使用すると、クラスによるインスタンス化を必要とせずにオブジェクトを動的に構築でき、符号化の効率が大幅に向上します.
3.1 Javascriptオブジェクト
JavaScriptオブジェクトは実は属性の集合であり、ここでの集合は数学上の集合と等価である.すなわち、確定性、無秩序性、相互異性を持っている.つまり、JavaScriptオブジェクトを与えると、一つの属性がこのオブジェクトの属性であるかどうかを明確に知ることができ、オブジェクトの属性は無秩序である.また、それぞれ異なります(同名がある場合は、後に宣言された上書き先に宣言されます).
一般的に、オブジェクトを宣言するとき、オブジェクトは空の集合にすぎず、属性を含まないことが多い.属性を絶えず追加することで、クラスを作成してインスタンス化することなく、オブジェクトを完全な機能を持つオブジェクトにすることができます.これにより、コードの柔軟性が向上します.オブジェクトのプロパティを任意に削除できます.
読者がpythonや他の類似の動的言語の経験があれば、JavaScriptのオブジェクトをよりよく理解することができます.JavaScriptオブジェクト自体が辞書(dictionary)であるか、Java言語のMapであるか、または関連配列と呼ばれています.つまり、キーによってオブジェクトを関連付けることができます.このオブジェクト自体はオブジェクトであり、この定義に基づいて、JavaScriptオブジェクトは、任意の複雑なデータ構造を表すことができることがわかります.
3.1.1オブジェクトのプロパティ
プロパティは、キー値のペア、すなわちプロパティの名前とプロパティの値です.属性の名前は文字列ですが、値は任意のJavaScriptオブジェクト(関数を含むJavaScriptのすべてのオブジェクト)です.たとえば、オブジェクトを宣言します.
 

//      
var jack = new Object();
jack.name = "jack";
jack.age = 26;
jack.birthday = new Date(1984, 4, 5);
 
//       
var address = new Object();
address.street = "Huang Quan Road";
address.xno = "135";
 
// addr       address
jack.addr = address;

 
 
 
この宣言オブジェクトの方式は従来のOO言語とは異なり、オブジェクトの動作をカスタマイズするための柔軟性を与えています.
 
オブジェクト属性の読み出しはポイントオペレータ(.)で行う.たとえば、前例のjackオブジェクトのaddrプロパティは、次のように取得できます.
 

var ja = jack.addr;
 
ja = jack[addr];

 
 
 
後者は,このような状況を回避するために,オブジェクトに1つの属性自体が1つの点(.)を含むことを想定し,これはJavaScriptで合法的です.例えばfooという名前です.bar jackを使用するとfoo.barの場合、解釈器はfoo属性の下にbarのフィールドがあると勘違いするのでjack[foo.bar]を使用してアクセスできます.一般的に,汎用的なツールパッケージを開発する際には,ユーザの可能な入力について何の仮定もしないべきであり,[属性名]という形式では常に正確性を保証できる.
3.1.2属性と変数
第2章では、変数の概念を説明しました.本章では、読者は、この2つの行為が非常に似ていることに気づいたかもしれません.実際には、対象の属性は私たちが前に言った変数とは同じです.
JavaScriptエンジンは初期化時に、クライアント環境でwindowというグローバルオブジェクトを構築します.他のJavaScript環境でこのグローバルオブジェクトを参照する必要がある場合は、トップレベルの役割ドメイン(つまり、すべての関数宣言以外の役割ドメイン)で宣言するだけです.
 

var global = this;

 
 
 
上位の役割ドメインで宣言した変数は、グローバルオブジェクトの属性として保存されます.この点から、変数は属性です.たとえば、クライアントでは、このようなコードがよく表示されます.
 

var v = "global";
 
var array = ["hello", "world"];
 
function func(id){
    var element = document.getElementById(id);
    // elemen     
}

 
 
 
実際には次のようになります.
 

window.v = "global";
 
window.array = ["hello", "world"];
 
window.func = function(id){
    var element = document.getElementById(id);
    // elemen       
}

 
 
 
3.1.3プロトタイプオブジェクト
プロトタイプ(prototype)は、JavaScript特有の概念であり、プロトタイプを使用することで、JavaScriptは従来のOO言語での継承を確立し、オブジェクトの階層関係を体現することができる.JavaScript自体はプロトタイプに基づいており、各オブジェクトにはprototypeの属性があり、このprototype自体もオブジェクトであるため、それ自体も独自のプロトタイプを持つことができ、チェーン構造を構成している.
1つの属性にアクセスする場合、解析器はこのチェーン構造を下から上へ遍歴する必要があり、その属性に遭遇するまで、属性に対応する値を返すか、nullとしてプロトタイプされたオブジェクト(JavaScriptのベースオブジェクトObjectのprototype属性はnull)に遭遇し、このオブジェクトに属性がない場合はundefinedを返す.
具体的な例を見てみましょう
 

//      base
function Base(name){
    this.name = name;
    this.getName = function(){
       return this.name;
    }
}
 
//      child
function Child(id){
    this.id = id;
    this.getId = function(){
       return this.id;  
    }
}
 
// child         base  
Child.prototype = new Base("base");
 
//     child  
var c1 = new Child("child");
 
//c1    getId  
print(c1.getId());
//  c1     "  "  getName  ，      
print(c1.getName());

 
 
 
結果:
 
child
base
 
 
 
プロトタイプチェーンを遍歴するときは下から上へ行くので,最初に出会った属性値が最初に返され,このメカニズムによりリロードが完了するメカニズムである.
 
3.1.4 thisポインタ
JavaScriptで最も惑わされやすいのは、おそらくthisポインタです.thisポインタは従来のOO言語ではクラスで宣言され、オブジェクト自体を表していますが、JavaScriptでは現在のコンテキスト、すなわち呼び出し者の参照を表しています.一般的な例を見てみましょう
 

//     ，   jack
var jack = {
    name : "jack",
    age : 26
}
 
//      ，   abruzzi
var abruzzi = {
    name : "abruzzi",
    age : 26
}
 
//           
function printName(){
    return this.name;
}
 
//  printName     jack,    this jack
print(printName.call(jack));
//  printName     abruzzi,   this abruzzi
print(printName.call(abruzzi));

 
 
 
実行結果:
 
jack
Abruzzi
 
 
 
なお、thisの値は、関数がどのように宣言されて決定されるかではなく、関数がどのように呼び出されて決定されるかという点では、従来のオブジェクト向け言語とは異なり、callはFunction上の関数であり、第4章で詳細に説明する.
3.2使用オブジェクト
オブジェクトはJavaScriptの基礎であり、JavaScriptを使用してプログラミングを完了するには、オブジェクトを使用します.このセクションでは、JavaScriptオブジェクトの使用方法をいくつかの例で学習します.
オブジェクトの宣言には、次の3つの方法があります.
 
ØnewオペレータによってドメインObjectオブジェクトを操作し、新しいオブジェクトを構築し、その後、属性を動的に追加し、無から有までオブジェクトを構築します.
Øオブジェクトの「クラス」:プロトタイプを定義し、newオペレータを使用して新しいオブジェクトを一括して構築します.
ØJSONを使用していますが、これは次節で詳しく説明します
 
このセクションでは、次のような2つ目の方法について詳しく説明します.
 

//    " "，Address
function Address(street, xno){
    this.street = street || 'Huang Quan Road';
    this.xno = xno || 135;
    this.toString = function(){
       return "street : " + this.street + ", No : " + this.xno;   
    }
}
 
//     " "，Person
function Person (name, age, addr) {
  this.name = name || 'unknown';
  this.age = age;
  this.addr = addr || new Address(null, null);
  this.getName = function () {return this.name;}
  this.getAge = function(){return this.age;}
  this.getAddr = function(){return this.addr.toString();}
}
 
//  new          ，  ，             
var jack = new Person('jack', 26, new Address('Qing Hai Road', 123));
var abruzzi = new Person('abruzzi', 26);
 
//    
print(jack.getName());
print(jack.getAge());
print(jack.getAddr());
 
print(abruzzi.getName());
print(abruzzi.getAge());
print(abruzzi.getAddr());

 
 
 
実行結果は次のとおりです.
 
jack
26
street : Qing Hai Road, No : 123
abruzzi
26
street : Huang Quan Road, No : 135
 
 
3.3 JSONおよびその使用
JSONはすべてJavaScriptオブジェクト表示法(JavaScript Object Notation)と呼ばれています.つまり、文字数でオブジェクトを表すので、簡単から複雑まで使用できます.例:
 

var obj = {
    name : "abruzzi",
    age : 26,
    birthday : new Date(1984, 4, 5),
    addr : {
       street : "Huang Quan Road",
       xno : "135"
    }
}

 
 
 
この方式は,上記の例よりも明らかに簡潔で,冗長な中間変数がなく,objのようなオブジェクトの構造を明確に表現している.実際、多くの経験のあるJavaScriptプログラマーは、jQuery、ExtJSなど多くのJavaScriptのツールパッケージがJSONを大量に使用しているなど、この表現を使用する傾向があります.JSONは事実上すでに1種のフロントエンドとサーバー端のデータ交換フォーマットとして、フロントエンドプログラムはAjaxを通じてJSONオブジェクトをバックエンドに送信して、サーバー端のスクリプトはJSONに対して解析を行って、サーバー端のオブジェクトに還元して、それからいくつかの処理をして、フロントエンドにフィードバックするのは依然としてJSON対象で、同じデータフォーマットを使って、間違いの確率を下げることができます.
また、JSON形式のデータ自体は再帰可能であり、つまり任意の複雑なデータ形式を表すことができる.JSONの書き方は簡単です.つまり、括弧で囲まれたキー値のペア、キー値のペアはコロンで区切られていますが、値は任意のJavaScriptオブジェクト、例えば、単純オブジェクトString、Boolean、Number、Null、またはDate、Object、その他のカスタムオブジェクトなどの複雑なオブジェクトなどです.
JSONのもう一つの応用シーンは、1つの関数に複数の戻り値がある場合、従来のオブジェクト向け言語では、1つのオブジェクトを組織して返す必要がありますが、JavaScriptでは、次のような面倒なことは全く必要ありません.
 

function point(left, top){
    this.left = left;
    this.top = top;
    //handle the left and top
    return {x: this.left, y:this.top};
}

 
 
 
新しい匿名オブジェクトを直接動的に構築するには、次の手順に従います.
 

var pos = point(3, 4);
//pos.x = 3;
//pos.y = 4;

 
 
 
JSONを使用してオブジェクトを返します.このオブジェクトには任意の複雑な構造があり、関数オブジェクトも含まれます.
実際のプログラミングでは、JavaScriptオブジェクトを巡回する必要があります.事前にオブジェクトの内容を知らない必要があります.どうしますか.JavaScript提供for..in形式の文法糖:
 

for(var item in json){
    //item  
    //json[item]  
}

 
 
 
このモードは、例えば、実際のWEBアプリケーションでは、1つのページ要素に対していくつかの属性を設定する必要があります.これらの属性は事前に知られていません.例えば、次のようなものです.
 

var style = {
    border:"1px solid #ccc",
    color:"blue"
};

 
 
 
次に、DOM要素にこれらのプロパティを動的に追加します.
 

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

 
 
 
もちろん、jQueryにはこのようなことをする方法があります.ここでは例を挙げますが、$(「div#element」)に属性を追加するとき、styleの構造が不明であることに注意してください.
 
また、例えば、いくつかのユーザーのカスタム設定を収集する必要があります.JSONオブジェクトを公開することで、ユーザーが設定する必要がある内容をこのJSONに記入し、私たちのプログラムで処理することもできます.
 

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

 
 
附:作者自身のレベルが限られているため、文の中で間違いなどを漏らすのは避けられない、あるいは言語自身に不適切なところがあるので、直ちに指摘して、提案を出して、討論に参加して、ありがとうございます!