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

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

新着一覧

  • SCSS のインストールVite
  • Tailwind CSS のプロジェクトの作成Tailwind
  • TypeScriptのプロジェクトの作成Vite
  • Flask のインストールと動作確認Python
  • 簡易Webサーバーの作成Python
  • pipeline で文章の生成Python
  • pipeline で文章の要約Python
  • 音声から文字起こしPython
  • Node.js のインストールNode.js
  • .ps1(PowerShellスクリプト)を実行可能にするPowerShell

アーカイブ

  • 2025/12
  • 2025/11
  • 2025/10
  • 2025/09
  • 2025/08

以前のカテゴリー一覧

  • 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.

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