最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScriptオブジェクト


JavaScriptのオブジェクト

JavaScriptでは、オブジェクトは王です。 あなたがオブジェクトを理解していれば、あなたはJavaScriptを理解しています。

JavaScriptでは、ほとんど「すべてが "オブジェクトです。

  • Booleansオブジェクト(またはオブジェクトとして扱わプリミティブデータ)することができます
  • Numbersオブジェクト(またはオブジェクトとして扱わプリミティブデータ)することができます
  • Stringsオブジェクト(またはオブジェクトとして扱わプリミティブデータ)することができます
  • Dates常にオブジェクトであります
  • Maths常にオブジェクトであります
  • Regular表現は、常にオブジェクトであります
  • Arrays常にオブジェクトであります
  • Functions常にオブジェクトです
  • Objectsオブジェクトであります

JavaScriptでは、すべての値は、プリミティブ値を除いて、オブジェクトです。

プリミティブ値は次のとおりです。文字列("John Doe")数字(3.14), true, false, null 、およびundefined


オブジェクトは変数を含む変数です

JavaScriptの変数は、単一の値を含めることができます。

オブジェクトはあまりにも変数です。 しかし、オブジェクトは、多くの値を含めることができます。

値のペア(名前とコロンで区切られた値):値は、 名前のように書かれています。

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
»それを自分で試してみてください

JavaScriptオブジェクトは、 名前付きの値の集合です


オブジェクトのプロパティ

名前付きの値は、JavaScriptオブジェクトに、 プロパティと呼ばれています。

プロパティ
firstName John
lastName Doe
age 50
eyeColor blue

名前と値のペアとして書き込まれたオブジェクトは、に似ています:

  • PHPの連想配列
  • Pythonで辞書
  • C言語でハッシュテーブル
  • Javaでハッシュマップ
  • ハッシュRubyやPerl

オブジェクトメソッド

メソッドは、オブジェクトに対して実行できるアクションです。

オブジェクトのプロパティは、プリミティブ値、その他の目的と機能の両方をすることができます。

オブジェクトメソッドは、 関数定義を含むオブジェクトのプロパティです。

プロパティ
firstName John
lastName Doe
age 50
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}

JavaScriptオブジェクトは名前付きの値と呼ばれるプロパティとメソッドのコンテナです。

あなたは、次の章でメソッドの詳細を学びます。


JavaScriptのオブジェクトの作成

JavaScriptを使用すると、独自のオブジェクトを定義して作成することができます。

新しいオブジェクトを作成するさまざまな方法があります。

  • オブジェクトリテラルを使用して、単一のオブジェクトを定義し、作成します。
  • キーワードnewで、単一のオブジェクトを定義し、作成します。
  • オブジェクトのコンストラクタを定義し、構築型のオブジェクトを作成します。

ECMAScriptの5では、オブジェクトは、関数で作成することができObject.create()


オブジェクトリテラルを使用して、

これは、JavaScriptのオブジェクトを作成する最も簡単な方法です。

オブジェクトリテラルを使用して、あなたの両方を定義し、1つのステートメントでオブジェクトを作成します。

オブジェクトリテラルは、名前のリストである:(のような値のペアage:50中括弧内) {}

次の例では、4つのプロパティを持つ新しいJavaScriptオブジェクトを作成します。

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
»それを自分で試してみてください

スペースや改行は重要ではありません。 オブジェクト定義は複数行にまたがることができます。

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};
»それを自分で試してみてください

JavaScriptのキーワードの新しいを使用して、

次の例では、4つのプロパティを持つ新しいJavaScriptオブジェクトを作成します。

var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";
»それを自分で試してみてください

上記の2つの例は、正確に同じことを行います。 使用する必要はありませんnew Object()
シンプルさ、読みやすさと実行速度の場合、最初の1(オブジェクトリテラルメソッド)を使用します。


オブジェクトのコンストラクタを使用して、

上記の例は、多くの場合に制限されています。 彼らは、単一のオブジェクトを作成します。

時には私たちは、一つのタイプの多くのオブジェクトを作成するために使用することができ、「オブジェクト・タイプ」を持っているのが好きです。

「オブジェクトタイプ」を作成する標準的な方法は、オブジェクトのコンストラクタ関数を使用することです。

function person(first, last, age, eye) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eye;
}
var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");
»それを自分で試してみてください

上記の関数(人)は、オブジェクトのコンストラクタです。

あなたは、オブジェクトのコンストラクタを持っていたら、同じタイプの新しいオブジェクトを作成することができます。

var myFather = new person("John", "Doe", 50, "blue");
var myMother = new person("Sally", "Rally", 48, "green");

thisキーワード

JavaScriptでは、というものthis 、JavaScriptコードを「所有する」ことを目的とします。

値はthis関数で使用される場合、機能を「所有する」ことが目的です。

値はthis 、オブジェクトで使用される場合、オブジェクト自体です。

thisオブジェクトのコンストラクタでキーワードが値を持っていません。 これは、新しいオブジェクトのための唯一の代替です。

値はthis 、コンストラクタは、オブジェクトを作成するために使用される新たなオブジェクトとなるであろう。

これは変数ではないことに注意してください。 それはキーワードです。 あなたは、の値は変更することはできませんthis


ビルトインのJavaScriptのコンストラクタ

JavaScriptが組み込まれており、ネイティブオブジェクトのコンストラクタ:

var x1 = new Object();    // A new Object object
var x2 = new String();    // A new String object
var x3 = new Number();    // A new Number object
var x4 = new Boolean()    // A new Boolean object
var x5 = new Array();     // A new Array object
var x6 = new RegExp();    // A new RegExp object
var x7 = new Function();  // A new Function object
var x8 = new Date();      // A new Date object
»それを自分で試してみてください

Math()オブジェクトがリストにありません。 数学はグローバルオブジェクトです。 新しいキーワードは、数学で使用することはできません。

知ってますか?

あなたが見ることができるように、JavaScriptはプリミティブデータ型文字列、数値、およびブールのオブジェクト・バージョンがあります。

複雑なオブジェクトを作成する理由はありません。 プリミティブ値は、はるかに高速に実行されます。

そして、新たに使用する理由はありませんArray() 代わりに、配列リテラルを使用してください: []

そして、新たに使用する理由はありませんRegExp() 代わりに、パターンリテラルを使用してください: /()/

そして、新たに使用する理由はありませんFunction() 。 代わりに関数式を使用: function () {}

そして、使用する理由はありませんnew Object() 。 代わりに、オブジェクトリテラルを使用してください: {}

var x1 = {};            // new object
var x2 = "";            // new primitive string
var x3 = 0;             // new primitive number
var x4 = false;         // new primitive boolean
var x5 = [];            // new array object
var x6 = /()/           // new regexp object
var x7 = function(){};  // new function object
»それを自分で試してみてください

JavaScriptのオブジェクトは変更可能です

オブジェクトは可変です:彼らは値ではなく、参照することによって対処されます。

yがオブジェクトである場合は、次の文は、yのコピーを作成しません。

var x = y;  // This will not create a copy of y.

オブジェクトx、yのコピーではありません。 これはy です 。 xと同じオブジェクトへのyポイントの両方。

xとyが同じオブジェクトであるため、Yへの変更はまた、Xが変更されます。

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

var x = person;
x.age = 10;           // This will change both x.age and person.age
»それを自分で試してみてください