Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

Java JavaScript JSP/Servlet

JavaScriptのオブジェクト(object)の書き方やメソッドを追加する方法

投稿日:2021年6月16日 更新日:

 

<目次>

(1) JavaScriptのオブジェクト(object)の書き方やメソッドを追加する方法
 (1-1) 構文①:オブジェクト作成
 (1-2) 構文②:オブジェクトにアクセス
 (1-3) サンプルプログラム(構文①、構文②)
 (1-4) (オマケ)構文①の別の記述方法

(1) JavaScriptのオブジェクト(object)の書き方やメソッドを追加する方法

JavaScriptにもオブジェクト指向言語の「オブジェクト」と似たオブジェクトの概念があり、同じような形でオブジェクトの中に「プロパティ」(変数)や「メソッド」(関数)を設定する事が出来ます。

(1-1) 構文①:オブジェクト作成

オブジェクトを定義するための構文は次の通りです(※ [オブジェクト名] や [プロパティ名] は実際の値に置き換えます)。
 
(構文)
//# objectの作成
var [オブジェクト名] = {
    //# objectにプロパティ(property)を定義
    [プロパティ名]:[プロパティ値],
    [プロパティ名]:[プロパティ値],
    [プロパティ名]:[プロパティ値],
    ...(中略)...
    
    //# objectにメソッド(method)を定義
    //# (フルーツの運送料金を計算)
    [メソッド名]: function(){
      //# メソッドの処理
    }
};

 

目次にもどる

(1-2) 構文②:オブジェクトにアクセス

オブジェクトのプロパティやメソッドにアクセスするための構文は次の通りです(※ オブジェクト名 や プロパティ名 は実際の値に置き換えます)。

(構文)

//# objectのプロパティ(property)にアクセス
オブジェクト名.プロパティ名
オブジェクト名["プロパティ名"]

//# objectのメソッドにアクセス
オブジェクト名.メソッド名()

 

目次にもどる

(1-3) サンプルプログラム(構文①、構文②)

「構文①:オブジェクト作成」と「構文②:オブジェクトへのアクセス」のサンプルです。オブジェクトを新規作成して、そのプロパティの値やメソッドの実行結果値をコンソールに表示しています。

(サンプルプログラム)
function ObjectTest(){

    //# objectの作成
    var fruit = {
            //# objectにプロパティ(property)を定義
            name:"Apple",
            price:200,
            origin:"青森",
            quantity:1000,
            //# objectにメソッド(method)を定義
            //# (フルーツの運送料金を計算)
            shippingprice: function(){
                //# 送料=単価(price)×個数(quantity)×0.2
                return this.price * this.quantity * 0.2;
            }
    };

    //# objectのプロパティ(property)にアクセス
    console.log("フルーツ名(fruit.name):"+fruit.name);
    console.log("フルーツ名(fruit[\"name\"]):"+fruit["name"]);

    //# objectのメソッドにアクセス
    console.log("フルーツの送料:"+fruit.shippingprice());
}

 

(図131)実行結果

目次にもどる

(1-4) (オマケ)構文①の別の記述方法

オマケという事で、上記で紹介した構文①のオブジェクト定義について、同じ意味ですが異なる記述方法についてご紹介します。

●構文③:オブジェクト作成

オブジェクトを定義するための構文は次の通りです(※ [オブジェクト名] や [プロパティ名] は実際の値に置き換えます)。
 
(構文)
//# objectの作成
var [オブジェクト名] = new Object;

//# objectにプロパティ(property)を定義
[オブジェクト名].[プロパティ名] = [プロパティ値];
[オブジェクト名].[プロパティ名] = [プロパティ値];
[オブジェクト名].[プロパティ名] = [プロパティ値];
...(中略)...

//# objectにメソッド(method)を定義
//# (フルーツの運送料金を計算)
[オブジェクト名].[メソッド名] = function([引数(あれば)]){
	//# 送料=単価(price)×個数(quantity)×0.2
	return this.price * this.quantity * 0.2;
}

 

目次にもどる

●サンプルプログラム(構文③)

構文③のサンプルです。オブジェクトを新規作成して、そのプロパティの値やメソッドの実行結果値をコンソールに表示しています。

 

(サンプルプログラム)
function ObjectTest2(){

    //# objectの作成
    var fruit = new Object;
    //# objectにプロパティ(property)を定義
    fruit.name = "Banana";
    fruit.price = 120;
    fruit.origin = "India";
    fruit.quantity = 2000;
    //# objectにメソッド(method)を定義
    //# (フルーツの運送料金を計算)
    fruit.shippingprice = function(price,quantity){
        //# 送料=単価(price)×個数(quantity)×0.2
        return this.price * this.quantity * 0.2;
    }

    //# objectのプロパティ(property)にアクセス
    console.log("フルーツ名(fruit.name):"+fruit.name);
    console.log("フルーツ名(fruit[\"name\"]):"+fruit["name"]);

    //# objectのメソッドにアクセス
    console.log("フルーツの送料:"+fruit.shippingprice(this.price,this.quantity));
}

 

(図141)実行結果

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-Java, JavaScript, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

Javaのthisとは?コンストラクタで引数を与えている場合・メソッド引数に使われる場合もご紹介

<目次> (1) Javaのthisとは?コンストラクタに出現する場合やメソッド引数に使われる場合もご紹介  (1-1) thisとは?  (1-2) 用途1:自分自身を指定【重要】  (1-3) 用 …

EclipseでJavaプロジェクトを同一サーバ内で別名コピーする方法

(0)目次&概説 (1) プロジェクトの別名コピーの手順  (1-1) プロジェクトのコピー&ペースト  (1-2) コピーしたプロジェクトをTomcatへ登録  (1-3) Tomcatサーバの再起 …

JSP/Servletでcsvをダウンロードする機能を作成する手順

<目次> (1) JSP/Servletでcsvをダウンロードする機能を作成する手順  (1-0) 実現方針  (1-1) STEP1:Servletの追記  (1-2) STEP2:JSPの追記   …

Javaのabstractとは?抽象クラスの概要やサンプルPGをご紹介

<目次> (1) Javaのabstractとは?抽象クラスの概要やサンプルPGをご紹介  (1-1) 抽象クラス(abstract)とは  (1-2) 抽象クラスの目的や用途  (1-3) 抽象クラ …

「ブレークポイントは現在の設定ではヒットしません。生成コードが見つからなかったため、ブレークポイントは無視されました」エラーの対処メモ

  <目次> (1) 「ブレークポイントは現在の設定ではヒットしません。生成コードが見つからなかったため、ブレークポイントは無視されました」エラーの対処メモ  (1-1) 発生状況・エラーメ …

  • English (United States)
  • 日本語
Top