JavaScript クラスを定義する

jQuery

2020.09.272022.02.04

JavaScriptでもクラス定義が行えれば便利ですよね
と考えたことがある人もいるのではないでしょうか？
今回はfunctionをクラスのように扱う方法を記載します

プロパティ
メソッド
使い方
初心者向けおすすめ書籍をご紹介！

プロパティ

ユーザークラスを例に宣言
「this.○○」

		// クラス
		function User(userNo ,userName ,age) {

			// プロパティ

			// ユーザーNo
			this.userNo = userNo;
			// ユーザー名
			this.userName = userName;
			// 年齢
			this.age = age;

		}

// クラス

function User(userNo ,userName ,age) {

// プロパティ

// ユーザーNo

this.userNo = userNo;

// ユーザー名

this.userName = userName;

// 年齢

this.age = age;

}

メソッド

定義方法は「クラス名.prototype.メソッド名」

		// クラス
		function User(userNo ,userName ,age) {

			// プロパティ

			// ユーザーNo
			this.userNo = userNo;
			// ユーザー名
			this.userName = userName;
			// 年齢
			this.age = age;

			// メソッド

			// ユーザー名取得
			User.prototype.getUserName = getUserName;

			function getUserName() {
				return this.userName;
			}

		}

// クラス

function User(userNo ,userName ,age) {

// プロパティ

// ユーザーNo

this.userNo = userNo;

// ユーザー名

this.userName = userName;

// 年齢

this.age = age;

// メソッド

// ユーザー名取得

User.prototype.getUserName = getUserName;

function getUserName() {

return this.userName;

}

使い方

			//インスタンスを生成します
			var user = new User(1 ,'テストユーザー' ,20);

			// プロパティへアクセス
			var userNo = user.userNo;
			var age = user.age;

			// メソッドを利用してユーザー名を取得する
			var userName = user.getUserName();

//インスタンスを生成します

var user = new User(1 ,'テストユーザー' ,20);

// プロパティへアクセス

var userNo = user.userNo;

var age = user.age;

// メソッドを利用してユーザー名を取得する

var userName = user.getUserName();

初心者向けおすすめ書籍をご紹介！

jQueryの基本的なところから学びたい人向け

リンク

プログラミングを学んだけど、実際Webシステムで
どうやって開発するの？という方向けの書籍です

リンク

Kindle Unlimitedなら無料で読めます
初回登録、30日間無料！

Kindle Unlimitedを30日間無料体験する