9cubed
ブログ | Tailwind | Vite | Python | MariaDB | Node.js | Linux | PowerShell | Docker | Git | その他 | 将棋ウォーズ | 歌の練習
< 前の記事

JavaScript - 関数

次の記事 >

JavaScript - class

JavaScript

JavaScript - オブジェクト

公開日:2018-11-29
更新日:2019-05-13

1. 概要

オブジェクトの使い方です。
JavaScript では Object 以外に、配列、連想配列、関数も同様に扱えます。

2.1 メソッドとプロパティの追加

JavaScript のオブジェクトは、動的にメソッドとプロパティを追加することができます。
オブジェクトに add メソッドを追加して、add メソッドの実行結果を result プロパティから取得します。

//以下4つは全て同じように動作します
var obj = new Object;     //オブジェクト
//var obj = [1, 2, 3];      //配列
//var obj = {value : 20};   //連想配列
//var obj = function() { }; //関数

//オブジェクトに add() メソッドの追加
obj.add = function (value1, value2) {
	this.result = value1 + value2; //結果を result プロパティに設定
}

//メソッドの実行
obj.add(1, 2);

//結果出力
console.log( obj.result ); //3

2.2 メンバー

オブジェクト、配列、連想配列、関数は、全て同様に扱えますが、
最初から保持しているメンバーは異なります。

function getType(obj) {
	console.log( obj );
	console.log( typeof(obj) ); //オブジェクト
	console.log("-----");
}

getType( new Object ); //オブジェクト
getType( [1, 2, 3] );          //配列
getType( {value : 20} );       //連想配列
getType( function() { } );     //関数

実行結果
画像1

2.3 関数をクラスのようにして使う

関数をクラスのように new すると、オブジェクトを生成できます。

var Calc = function () {
	//new された際に実行されます
	//プロパティとメソッドを動的に追加します
	this.value = 0;
	this.add = function (value2) {
		this.value = this.value + value2;
		return this;
	}
}

var obj = new Calc(); //Calc の型は関数ですが、new でオブジェクト化できます
obj.add(1);
obj.add(2);
console.log( obj.value ); //3

obj = new Calc(); 
console.log( obj.add(2).add(3).value ); //5

2.4 prototype によるプロパティとメソッドの定義

prototype オブジェクトにプロパティとメソッドを追加すると、
new した際に生成されるオブジェクトにも、同じプロパティとメソッドが追加されます。
また、関数本体は、new の際に実行されるため、コンストラクタとして使用することができます。

var Calc = function () {
	console.log("コンストラクタ");
	this.result = 0;
}

Calc.prototype.value = 0;
Calc.prototype.add = function (value1, value2) {
	this.result = value1 + value2;
}

var obj1 = new Calc();
obj1.add(1, 2);
console.log( obj1.result ); //3

var obj2 = new Calc();
obj2.add(3, 4);
console.log( obj2.result ); //7
コンストラクタ
3
コンストラクタ
7

配列を生成すると、最初から indexOf() や shift() など、様々なメソッドが最初から使えますが、
これは、配列の prototype にメソッド追加されているためです。



< 前の記事

JavaScript - 関数

次の記事 >

JavaScript - class

YouTube X

新着一覧

  • テーブル結合(CROSS JOIN、INNER JOIN、LEFT JOIN)MariaDB
  • 楽観ロック・悲観ロックMariaDB
  • カレントリードMariaDB
  • インデックスMariaDB
  • 論理削除(ソフトデリート)MariaDB
  • awk(オーク)の使い方についてLinux
  • NOT NULL 制約と NULL を許容した時の動作MariaDB
  • 外部キー制約MariaDB
  • MySQL と MariaDB の関係MariaDB
  • Docker で PostgreSQL のコンテナの使用Linux

アーカイブ

  • 2026/01
  • 2025/12
  • 2025/11
  • 2025/10
  • 2025/09
  • 2025/08
  • /00

以前のカテゴリー一覧

  • CakePHP3
  • CentOS7
  • HTML・CSS・JavaScript
  • Haskell
  • JavaScript
  • Kotlin
  • Laravel5
  • PHP
  • Python
  • Ruby
  • RubyOnRails5
  • TypeScript
  • Vue.js
  • Webサーバ講座
  • Webプログラミング講座
  • jQuery
  • linux
  • パソコン講座
  • ブログ
  • プログラミング講座
  • メモ帳作成講座
  • 数学

Copyright © 9cubed. All Rights Reserved.

プライバシーポリシー 利用規約
▲