JavaScript Classの作成

Javascriptでクラスを使ってみます。

基本


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScriptのテストページ</title>
    <script type="text/javascript">

	class Test {

		constructor(msg) {
			this.msgA = msg;
            }

            msgB = "world";

            get msg1() {
                return this.msgA;
            }
            set msg2(msg) {
                this.msgA = msg;
            }

            showB() {
                alert(this.msgB);
            }
        }

        const test = new Test("aaa");

        test.msg2 = "hello";

        alert(test.msg1);
        test.showB();

    </script>
</head>

<body>
</body>

</html>

プロパティを定義するにはクラス内に定義するかconstructor内にthisを付けて定義します。
プロパティ、メソッドにクラス内でアクセスするにはthisを付けます。
メソッドにget、setを付けるとメソッドをプロパティのように呼び出せます。

継承


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScriptのテストページ</title>
    <script type="text/javascript">

        class Test {

            constructor(msg) {
                this.msgA = msg;
            }

            showA() {
                alert(this.msgA);
            }
        }

        class Test1 extends Test {

            constructor(msg1, msg2) {

                super(msg1);
                this.msgB = msg2;
            }

            showB() {
                super.showA();
                alert(this.msgB);
            }
        }

        const test1 = new Test1("aaa", "bbb");

        test1.showA();
        test1.showB();

    </script>
</head>

<body>
</body>

</html>

継承するには継承元のクラスをextendsで指定します。
子クラス内で親クラスのプロパティ、メソッドにアクセスするにはsuperを指定します。

static


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScriptのテストページ</title>
    <script type="text/javascript">

        class Test {

            static msgA = "hello";
            
            static {
                this.msgA += " world"
            }
            
            static show() {

                alert(this.msgA);
            }
        }

        Test.show();

    </script>
</head>

<body>
</body>

</html>

staticはクラス自身が持つプロパティ、メソッド。オブジェクトを作成せずに使える。
staticはプロパティ、メソッド定義にstaticを付ける。

private


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScriptのテストページ</title>
    <script type="text/javascript">

        class Test {

            #msgA = "hello";

            #addMsg(arg) {

                this.#msgA += arg;
            }

            showMsg() {
                this.#addMsg("world");
                alert(this.#msgA);
            }
        }

        const test = new Test();
        test.showMsg();

    </script>
</head>

<body>
</body>

</html>

privateはクラス外部からアクセスできないプロパティ、メソッド。
privateのプロパティ、メソッドには頭に#を付ける。

ページのトップへ戻る