Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

JavaScript オブジェクト

実際のオブジェクト、プロパティ、およびメソッド

実生活では、車は物体です。

車には、重量や色などのプロパティと、開始や停止などのメソッドがあります。

オブジェクト プロパティ メソッド

car.name = Fiat

car.model = 500

car.weight＝850kg

car.color = 白
car.start()

car.drive()

car.brake()

car.stop()

すべての車は同じプロパティを持っていますが、値は車ごとに異なります。

すべての車は同じメソッドを持っていますが、そのメソッドは異なるタイミングで実行されます。

JavaScript オブジェクト

JavaScript変数がデータ値のコンテナーであることは既に学習しました。

このコードは、単純な値（Fiat）をcarという名前の変数に割り当てます。

let car = "Fiat";

自分で試してみる»

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

このコードは、carという名前の変数に多くの値(Fiat、500、白)を割り当てます。

const car = {type:"Fiat", model:"500", color:"white"};

自分で試してみる»

値は次のように記述されます。name:valueペア (コロンで区切られた名前と値)。
値は、名前:値のペアとして記述されます (名前と値はコロンで区切られます)。

constを使用してオブジェクトを宣言するのが一般的な方法です。

オブジェクトでconstを使用する方法の詳細については、JS constの章を参照してください。

オブジェクト定義

オブジェクトリテラルを使用してJavaScriptオブジェクトを定義(および作成)します。

例

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

自分で試してみる»

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

例

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

自分で試してみる»

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

JavaScriptオブジェクトの名前:値のペアはプロパティと呼ばれます。


プロパティ

プロパティ値
firstname ジョン
lastname ドゥー
age 50
eyeColor 青

オブジェクトプロパティへのアクセス

オブジェクトのプロパティにアクセスするには、次の2つの方法があります。

objectName.propertyName

または

objectName["propertyName"]

例1

person.lastName;

自分で試してみる»

例2

person["lastName"];

自分で試してみる»

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

オブジェクトメソッド

オブジェクトにはメソッドを持つこともできます。

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

メソッドは関数定義としてプロパティに保存されます。


プロパティ

プロパティ値
firstname ジョン
lastname ドゥー
age 50
eyeColor 青
fullName function() {return this.firstName + " " + this.lastName;}

メソッドは、プロパティとして格納される関数です。

例

const person = {   firstName: "John",   lastName : "Doe",   id       : 5566,   fullName : function() {     return this.firstName + " " + this.lastName;    } };

上の例では、thisは人物オブジェクトを指します。

つまり、this.firstNameはthisのfirstNameプロパティを意味します。

つまり、this.firstNameは、人物のfirstNameプロパティを意味します。

thisとは？

JavaScriptでは、thisはオブジェクトを指します。

どのオブジェクトであるかは、thisがどのように呼び出される(使用または呼び出される)かによって異なります。

thisは、使用方法に応じてさまざまなオブジェクトを参照します。
オブジェクトメソッドでは、thisはオブジェクトを指します。
thisはは単独でグローバルオブジェクトを指します。
関数では、thisはグローバルオブジェクトを指します。
関数の厳密モードでは、これは未定義です。
イベントでは、イベントを受信した要素を指します。
call()、apply()、bind()などのメソッドは、thisを任意のオブジェクトに参照できます。

注意


thisは変数ではありません。キーワードです。この値は変更できません。

こちらをご参照ください：


JavaScript this チュートリアル

thisについて

関数定義では、thisは関数の「所有者」を指します。

上の例では、thisはfullName関数を「所有」するpersonオブジェクトです。

つまり、this.firstNameは、このオブジェクトのfirstNameプロパティを意味します。

thisについて詳しくは、JavaScript thisチュートリアルをご覧ください。

オブジェクトメソッドへのアクセス

次の構文でオブジェクトメソッドにアクセスします。

objectName.methodName()

例

name = person.fullName();

自分で試してみる»

()括弧なしでメソッドにアクセスすると、関数定義が返されます。

例

name = person.fullName;

自分で試してみる»

## 文字列、数値、およびブール値をオブジェクトとして宣言しないでください。 JavaScript変数がnewを使用して宣言されると、変数はオブジェクトとして作成されます。
x = new String();        // xをStringオブジェクトとして宣言する。 y = new Number();        // yをNumberオブジェクトとして宣言する。 z = new Boolean();       // zをブール値オブジェクトとして宣言する。
String、Number、とBooleanのオブジェクトは避けてください。コードが複雑になり、実行速度が遅くなります。

オブジェクトについては、このチュートリアルの後半で詳しく学習します。


プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル