JavaScriptの対象について詳しく説明する。

13734 ワード

これは訳文で、原文の住所:http://javascriptissexy.com/javascript-objects-in-detail/
JavaScriptの核心――使うのも最も根本的なのです。データタイプは対象(Object)のデータタイプです。JavaScriptは、複雑なデータタイプ、オブジェクトデータタイプ、および5種類の簡単なデータタイプがあります。数字(Number)、文字列(String)、ブール(Boolean)、未定義(Unidefined)、および空(Null)。簡単な(元の)データタイプは可変ではなく、変更できませんが、オブジェクトは可変です。
相手は何ですか
オブジェクトは、順序のない元のデータタイプのセット(参照データタイプの場合があります。)であり、このシーケンスは、名前のペアとして記憶されています。各シーケンスは属性(関数は方法と呼ばれる)と呼ばれ、各属性名は一意でなければなりません。この一意の名前は文字列または数字となります。
これは簡単なオブジェクトです。
var myFirstObject = {firstName: "Richard", favoriteAuthor: "Conrad"};
再確認:オブジェクトをプロジェクトを含むシーケンスとして考え、シーケンスの各項目(両方の属性)は、名値ペアとして記憶されています。上記の例では、属性名はfirst NameとfavoriteAuthorであり、値はそれぞれ「Richard」と「Corad」である。
属性名は文字列または数字でもいいですが、属性名が数字であれば、四角い括弧で値を取得する必要があります。後に四角括弧の内容がもっとあります。属性名の対象となる別の列を示します。
 var ageGroup = {30: "Children", 100:"Very Old"};
console.log(ageGroup.30) //      
//         30     ,    “Children”
console.log(ageGroup["30"]); // Children

//            。
JavaScriptの開発者としては対象データの種類がよく使われます。一般的な用途はデータを保存して、ユーザー定義の方法と関数を作成することです。
参照データタイプと元のデータタイプ
参照データタイプと元のデータタイプとの主な違いの一つは、参照データタイプの値が参照形式で格納されており、元のデータタイプのように値の形で直接変数に格納されるのではないことである。たとえば:
//                 
var person = "Kobe";  
var anotherPerson = person; // anotherPerson = person  
person = "Bryant"; //   person  

console.log(anotherPerson); // Kobe
console.log(person); // Bryant
私たちはpersonの値を「Bryant」に変更しても無駄です。変数anotherPersonはまだpersonの前に保存されている値を保持しています。
上記で証明された値で保存されている元のデータと参照で保存されているオブジェクトとを比較します。
var person = {name: "Kobe"};
var anotherPerson = person;
person.name = "Bryant";

console.log(anotherPerson.name); // Bryant
console.log(person.name); // Bryant
この例では、オブジェクトのpersonをAnotherPersonにコピーしましたが、personに記憶されている値は一つの参照であって、本当の値ではないので、属性のperson.nameを「Bryant」に変更したとき、anotherPersonはこの変化を表しました。anotherPersonはpersonの属性自体の値を記憶したことがないので、実際のコピーです。これはpersonの属性の値を引用しただけです。
(注:personの値は引用です。だから、anotherPersonの値もその引用です。personの値の引用が変更されたとき、つまりanothersonの中値の引用が変更されました。)
オブジェクトのデータ属性が持つ特性
各データ属性(データを格納するオブジェクト属性)は、有名な値ペアの特性だけでなく、他の3つの特性(この3つの特性は最初の時点でtrueに設定されています)があります。
設定可能性:この属性を削除または変更できるかどうかを指定します。
列挙性:この属性がfor/inサイクルで戻るかどうかを指定します。
書き込み可能性:この属性が変更されるかどうかを指定します。
注意ECMAScript 5は、上記のデータ属性とともにアクセス属性も提示しています。アクセス属性はカテゴリ関数(取得と設定)です。私たちはもう2月15日に発表する予定の文章の中で、ECMAScript 5についてもっと勉強します。
オブジェクトを作成
一般的にオブジェクトを作成する方法は2つあります。
1.オブジェクト式
 最も一般的で確実に最も簡単なオブジェクトを作成する方法は、次のようなオブジェクトです。
 //                  。
var myBooks = {};

//       4 ,             
var mango = {
color: "yellow",
shape: "round",
sweetness: 8,

howSweetAmI: function () {
console.log("Hmm Hmm Good");
}
}
2.オブジェクト構造関数
第二の一般的に用いられている方法は,オブジェクトを構成関数で作成することである。一つのコンストラクタは新しいオブジェクトを初期化するための関数です。この新しいキーワードでコンストラクタを呼び出します。
var mango =  new Object ();
mango.color = "yellow";
mango.shape= "round";
mango.sweetness = 8;

mango.howSweetAmI = function () {
console.log("Hmm Hmm Good");
}
いくつかの保留キーワードを使ってもいいですが、例えば「for」を対象の属性名にしてもいいです。
オブジェクトは、数値、配列、または他のオブジェクトを含む他のデータタイプを含むことができます。
実践モードでオブジェクトを作成
あなたのアプリケーションで一度だけ使用され、データを格納するためのオブジェクトについては、上記の2つの方法でオブジェクトを作成するのに十分です。
果物や果物の詳細を示すアプリケーションがあると仮定します。この応用のすべての果物にはこれらの属性があります。色、形、甘さ、価格、そしてshowName関数があります。果物の新しいオブジェクトを作成するたびに、次のようなコンテンツを入力します。これはかなり退屈で効果がありません。
var mangoFruit = {
color: "yellow",
sweetness: 8,
fruitName: "Mango",
nativeToLand: ["South America", "Central America"],

showName: function () {
console.log("This is " + this.fruitName);
},
nativeTo: function () {
 this.nativeToLand.forEach(function (eachCountry)  {
            console.log("Grown in:" + eachCountry);
        });
}
}
もし10種類の果物があったら、同じコードを10回入力しなければなりません。もしあなたがnative To関数を修正しなければならなかったらどうなりますか?この関数は10の異なるところで変更しなければなりません。このような状況は推測できますが、ウェブページのオブジェクトにメンバーを追加すると、これまで作成したオブジェクトの方法で作成されたのは、インスタンスがあり得る理想的なオブジェクトではなく、特に大きなアプリケーションが開発されたときです。
このような反復問題を解決するために、ソフトウェアエンジニアは、開発アプリケーションをより効率的かつ簡潔にするためのモード(繰り返しかつ通常のタスクに対する解決策)を発明した。
以下は2つの一般的なオブジェクトを作成するためのモードです。JavaScriptの正確な学習が完了したら、Code Academyの授業でよく使われているのを見たことがあります。
1.コンストラクタモードでオブジェクトを作成する
function Fruit (theColor, theSweetness, theFruitName, theNativeToLand) {

    this.color = theColor;
    this.sweetness = theSweetness;
    this.fruitName = theFruitName;
    this.nativeToLand = theNativeToLand;

    this.showName = function () {
        console.log("This is a " + this.fruitName);
    }

    this.nativeTo = function () {
    this.nativeToLand.forEach(function (eachCountry)  {
       console.log("Grown in:" + eachCountry);
        });
    }

}
このパターンがあると、いろいろな果物を作りやすくなります。そして:
var mangoFruit = new Fruit ("Yellow", 8, "Mango", ["South America", "Central America", "West Africa"]);
mangoFruit.showName(); // This is a Mango.
mangoFruit.nativeTo();
//Grown in:South America
// Grown in:Central America
// Grown in:West Africa

var pineappleFruit = new Fruit ("Brown", 5, "Pineapple", ["United States"]);
pineappleFruit.showName(); // This is a Pineapple.
flutName関数を修正したいなら、一箇所で変更すればいいです。このモードは,果物のすべての効果と性質を,継承可能な関数Fuit()のみを確立することによってパッケージ化した。
注意:
継承された属性は対象の原型属性として定義されています。例えば、someObject.prototype.first Name="rich"自己属性は直接対象自身に定義されます。例えば:
//            :
var aMango = new Fruit ();
//        aMango    mangoSpice  
//         aMango    mangoSpice   ,    aMango       ,           。
aMango.mangoSpice = “some value”;

          ,   object.property,  :
console.log(aMango.mangoSpice); // “some value”

         ,    object.method(),  :
//  ,         
aMango.printStuff = function () {return “Printing”;}

//        printStuff  :
aMango.printStuff ();
2.原型モードでオブジェクトを作成する
function Fruit () {

}

Fruit.prototype.color = "Yellow";
Fruit.prototype.sweetness = 7;
Fruit.prototype.fruitName = "Generic Fruit";
Fruit.prototype.nativeToLand = "USA";

Fruit.prototype.showName = function () {
console.log("This is a " + this.fruitName);
}

Fruit.prototype.nativeTo = function () {
            console.log("Grown in:" + this.nativeToLand);
}
これはどのようにしてこのプロトタイプモードでコンストラクションFuit()を呼び出すかの例である。
var mangoFruit = new Fruit ();
mangoFruit.showName(); //
mangoFruit.nativeTo();
// This is a Generic Fruit
// Grown in:USA
 
  

进阶阅读

对于有关这两种模式的完整讨论和深入解释每种模式是怎样工作的以及它们各自的缺点,请阅读Professional JavaScript for Web Developers的第六章节。你还将知道哪种模式是Zakas所推荐的最好用的一种(提示:以上两种都不是)。

如何获取对象的属性

用点号符和方括号符是两种主要的获取对象属性的方法。

1.点号符

//                       ,        :
var book = {title: "Ways to Go", pages: 280, bookMark1:"Page 20"};
//           book   ,     :
console.log ( book.title); // Ways to Go
console.log ( book.pages); // 280
2.四角いかっこ
//            book   ,     :
console.log ( book["title"]); //Ways to Go
console.log ( book["pages"]); // 280

//  ,              
var bookTitle = "title";
console.log ( book[bookTitle]); // Ways to Go
console.log (book["bookMark" + 1]); // Page 20
オブジェクトの中に存在しない属性を取得すると、結果はundefinedに戻ります。
所有と継承で得られた属性
オブジェクトは、継承によって得られた属性と独自の属性があります。自己属性は対象に定義された属性で、継承された属性は対象の原型オブジェクトから継承されます。
属性がオブジェクトに存在するかどうかを知るために、次のような操作があります。
//       schoolName        school
var school = {schoolName:"MIT"};

//    true,  schoolName   school       
console.log("schoolName" in school);  // true

//    false,         school    schoolType  ,               Object.prototype  schoolType  。
console.log("schoolType" in school);  // false
 
//    true,    school Object.prototype     toString。 
console.log("toString" in school);  // true
ハスOwnProperty
方法hasOwnPropertyでは、オブジェクトが明確な属性を持っているかどうかを判定します。この方法は非常に有用です。継続的な列挙対象が必要です。そして、自分の属性だけを望んでいます。
//       schoolName        school
var school = {schoolName:"MIT"};

//    true,  schoolName   school       
console.log(school.hasOwnProperty ("schoolName"));  // true
 
//    false,    school  Object.prototype    toString  ,  toString    school       
console.log(school.hasOwnProperty ("toString"));  // false 
オブジェクトの属性を取得して列挙します。
for/loopループまたは汎用forループを使って、列挙可能なオブジェクトの属性を取得します。
//        :schoolName,schoolAccredited, schoolLocation        school。
var school = {schoolName:"MIT", schoolAccredited: true, schoolLocation:"Massachusetts"};

//  for/in       school    
for (var eachItem in school) {
console.log(eachItem); //     schoolName, schoolAccredited, schoolLocation

}
アクセスのプロパティ
Object.prototypeから引き継ぐ属性は列挙できないので、for/inサイクルはそれらを表示しません。しかし、for/inサイクル反復によって開示される引継ぎ可能な属性は列挙可能である。
たとえば:
 //  for/in       school    
for (var eachItem in school) {
console.log(eachItem); //     schoolName, schoolAccredited, schoolLocation

}
//      school        HigherLearning
/*  :  Wilson(       )              ,     educationLevel            HigherLearning       ;  ,  educationLevel          HigherLearning             。                       “this”      。
*/


function HigherLearning () {
this.educationLevel = "University";
}

//      HigherLearning      
var school = new HigherLearning ();
school.schoolName = "MIT";
school.schoolAccredited = true;
school.schoolLocation = "Massachusetts";


//  for/in       school    
for (var eachItem in school) {
console.log(eachItem); //     educationLevel,schoolName,schoolAccredited, schoolLocation
}
上記の例では、関数Higher Learningに定義されている属性education Levelがschoolの属性の一つとして列記されていますが、education Levelは固有の属性ではなくても、継承されている属性です。
オブジェクトの原型特性と原型属性
対象のプロトタイプの特性とプロトタイプの属性はJavaScriptの中で特に重点的に理解する必要がある概念です。もっと多い内容は私のこの文章を読んでください。JavaScript Prottype in Plain、Detailed Language。(訳注:来週この編を翻訳する予定です。)
オブジェクトの属性を削除します。
delete操作で一つの属性をオブジェクトから削除します。継承した属性を削除したり、設定可能な属性に設定した特性を削除したりしてはいけません。元のオブジェクト(この属性が定義されている場所)から継承可能な属性を削除してください。また、キーワードでvar宣言したグローバルオブジェクトの属性を削除してはいけません。
削除に成功すれば、delete操作はtrueに戻ります。特に、削除すべきオブジェクトが存在しなくても、そのオブジェクトが削除されてはいけない(例えば、設定不可能またはそのオブジェクトが所有している属性ではない)、delete操作はtrueに戻ります。
これらの例はこの点を説明している。
var christmasList = {mike:"Book", jason:"sweater" }
delete christmasList.mike; //     mike

for (var people in christmasList) {
console.log(people);
}
//      jason
//   mike    

delete christmasList.toString; //   true,  toString     ,          

//          toString       --    
christmasList.toString(); //"[object Object]"


//             ,               。  ,         educationLevel        school      ,    educationLevel        :       HigherLearning       “this”      。       HigherLearning       educationLevel。

console.log(school.hasOwnProperty("educationLevel")); true
//   educationLevel school       ,         
delete school.educationLevel; true 

//   educationLevel   school     
console.log(school.educationLevel); undefined

//     educationLevel       HigherLearning
var newSchool = new HigherLearning ();
console.log(newSchool.educationLevel); // University

//        HigherLearning         ,    educationLevel2:
HigherLearning.prototype.educationLevel2 = "University 2";

//    HigherLearning      educationLevel2       

//   educationLevel2    school       
console.log(school.hasOwnProperty("educationLevel2")); false
console.log(school.educationLevel2); // University 2

//              educationLevel2
delete school.educationLevel2; true (    true,          )

//       educationLevel2      
console.log(school.educationLevel2); University 2
オブジェクトの順序化と順序付け
あなたのオブジェクトをHTTPプロトコルで転送したり、他の目的のために文字列に変換したりするためには、それを逐次的に(文字列に変換する)必要があります。関数JSON.strigifyを使って、あなたのオブジェクトを順番に並べてもいいです。ECMAScript 5の前に、関数JSON.stingifyを得るためには、人気のあるライブラリjson 2を使用しなければなりません。この関数は現在ECMAScript 5で標準化されています。
同じライブラリjson 2から関数JSON.parseを得て、あなたのオブジェクトを順番に並べます。この関数は同じくECMAScript 5で標準化されている。
JSON.strigifyの例:
var christmasList = {mike:"Book", jason:"sweater", chelsea:"iPad" }
JSON.stringify (christmasList);
//         :
// "{"mike":"Book","jason":"sweater","chels":"iPad"}"


//                ,  “null” “4”    
JSON.stringify (christmasList, null, 4);
// "{
    "mike": "Book",
    "jason": "sweater",
    "chels": "iPad"
}"

// JSON.parse    \\

//      JSON   ,                  ( christmasListStr.mike  )
var christmasListStr = '{"mike":"Book","jason":"sweater","chels":"iPad"}';

//             
var christmasListObj = JSON.parse (christmasListStr); 

//          ,       
console.log(christmasListObj.mike); // Book
JavaScriptオブジェクトに関する詳細は、ECMAScript 5に追加されたオブジェクトに関する処理を含めて、JavaScript:The Definitive Guide 6 th Editionの第6章を読んでください。