JavaScriptのオブジェクト

実際の生活のオブジェクト、属性、およびメソッド

実際の生活では、車はオブジェクト

車は重さや色などの属性、起動や停止などの方法

オブジェクト 属性 方法

car.name = porsche

car.model = 911

car.length = 4499mm

car.color = white

car.start()

car.drive()

car.brake()

car.stop()

すべての車は同じ属性を持ちますが、属性値は車によって異なります。

すべての車は同じ方法しかし、メソッドは異なる時間に実行されます。

JavaScriptのオブジェクト

あなたが学んだように、JavaScript 変数はデータ値のコンテナです。

このコードは単一の値(porsche)を名前 car に変数

var car = "porsche";

自分で試してみてください

オブジェクトも変数ですが、オブジェクトは多くの値を含んでいます。

このコードは複数の値(porsche, 911, white)を名前 car に変数

var car = {type:"porsche", model:"911", color:"white"};

自分で試してみてください

値は名前:値名前と値がコロンで区切られた

JavaScript オブジェクトは名前付き値のコンテナと呼ばれます。

オブジェクト属性

(JavaScript オブジェクトの)名前:値対は属性

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
属性 属性値
firstName Bill
lastName Gates
age 62
eyeColor blue

オブジェクトメソッド

オブジェクトも方法

方法はオブジェクト上で実行されるアクション

方法は関数定義属性に保存されています。

属性 属性値
firstName Bill
lastName Gates
age 62
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}

関数は属性として保存される。

インスタンス

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this キーワード

関数定義では、this 関数の所有者を参照しています。

の例では、this は "fullName" 関数を持つ person オブジェクト

言い換えれば、this.firstName の意味は this オブジェクトの firstName 属性

以下の JS this キーワードこの章では this キーワードに関する知識を学びます。

オブジェクト定義

以下のように JavaScript オブジェクトを定義(作成)しました:

インスタンス

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

自分で試してみてください

スペースや改行は許可されています。オブジェクト定義は複数行にわたって書くことができます:

インスタンス

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
};

自分で試してみてください

オブジェクト属性にアクセス

属性にアクセスするには以下の2つの方法があります:

objectName.propertyName

または

objectName["propertyName"]

例 1

person.lastName;

自分で試してみてください

例 2

person["lastName"];

自分で試してみてください

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

オブジェクトメソッドにアクセスするには以下の文法を使用できます:

objectName.methodName())

インスタンス

name = person.fullName();

自分で試してみてください

もし、() を使用しない fullName メソッドにアクセスすると、以下が返されます関数定義

インスタンス

name = person.fullName;

自分で試してみてください

メソッドは実際には属性値の形式で保存された関数定義です。

文字列、数値、布尔値をオブジェクトとして宣言しないでください!

JavaScript 変数を "new" キーワードで宣言する場合、その変数はオブジェクトとして作成されます:

var x = new String();        // x を String オブジェクトとして宣言
var y = new Number();        // y を Number オブジェクトとして宣言
var z = new Boolean();       // z を Boolean オブジェクトとして宣言

文字列、数値、論理オブジェクトを避けてください。これらはコードの複雑さを増やし、実行速度を低下させます。

このチュートリアルの後の章で、オブジェクトに関するさらに多くの知識を学びます。

教科書

さらに詳しい情報については JavaScriptのオブジェクトの知識については、JavaScript 高級チュートリアルの関連内容を参照してください:

ECMAScript オブジェクト指向技術
このセクションでは、オブジェクト指向技術の用語、オブジェクト指向言語の要件、オブジェクトの構成について簡単に紹介します。
ECMAScript オブジェクトの適用
このセクションでは、オブジェクトの宣言とインスタンス化、参照と廃棄、バインディングの概念について説明します。
ECMAScript オブジェクトのタイプ
このセクションでは、ECMAScript の3つのタイプ(ローカルオブジェクト、インボートオブジェクト、ホストオブジェクト)について説明し、関連するリファレンスマニュアルへのリンクを提供します。
ECMAScript オブジェクトのスコープ
このセクションでは、ECMAScript のスコープおよび this キーワードについて説明します。
ECMAScript でのクラスやオブジェクトの定義
このセクションでは、ECMAScript オブジェクトやクラスの作成方法について詳細に説明します。
ECMAScript でのオブジェクトの変更
このセクションでは、新しいメソッドの作成や既存のメソッドの再定義を通じてオブジェクトを変更する方法について説明します。