【JS】JavaScript ～ クラス ～

JavaScript

■ はじめに

JavaScriptのクラスについて、メモ。

■ JavaScriptのクラス定義の方法

* 以下の2通り
~~~~~~
実装方法１： class でクラス定義を実現する
実装方法２：function でクラス定義を実現する
~~~~~~

実装方法１： class でクラス定義を実現する

 * ES2015(ES6) から導入

注意 

 * IE11 や 古いブラウザでは、対応外

参考文献
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes

実装方法２：function でクラス定義を実現する

１）サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Sample</title>
</head>
<body>
<div id="result1">result1</div>
<div id="result2">result2</div>
<div id="result3">result3</div>
<div id="result4">result4</div>
<div id="result5">result5</div>
</body>
<script type="text/javascript" charset="UTF-8">
var Gender = {
    None: 0,
    Man: 1,
    Woman: 2,
};
function Person(nameValue, genderValue) {
    this.nameValue = nameValue;
    this.genderValue = genderValue;
}

var people = [];
people["result1"] = new Person("Mike", Gender.Man);
people["result3"] = new Person("Chole", Gender.Woman);
people["result4"] = new Person("Max", Gender.Woman);

for (var keyValue in people) {
    var targePerson = people[keyValue];
    document.getElementById(keyValue).innerText =
      targePerson.nameValue + " " + targePerson.genderValue;
}

</script>
</html>

参考文献

http://www.yunabe.jp/docs/javascript_class_in_google.html
http://www.atmarkit.co.jp/ait/articles/1011/29/news109_2.html

関連記事

TypeScript ～ クラス / インターフェイス ～
https://dk521123.hatenablog.com/entry/2022/03/13/000000