Water Sunlight

軽量プログラミングの文法 - JavaScript/Python

ユーザ用ツール

サイト用ツール


js:object:oriented

文書の過去の版を表示しています。


JavaScript オブジェク指向構文

y2sunlight 2021-05-31

本章では、ES2015*2015で採用されたオブジェクト指向構文について説明します。それ以前のオブジェクト指向を実装するための文法については、オブジェクトの基本を参照して下さい。

class構文

ES2015では、class構文が追加され、他のオブジェクト指向言語と同様に直感的なクラス定義ができるようになりました。

class Student {

    // コンストラクタの定義
    constructor(name) {
        // プロパティの定義
        this.name = name;
    }

    // メソッドの定義
    greeting() {
        console.log(`I am ${this.name}.`);
    }
}

var suzuki = new Student('suzuki');
suzuki.greeting();                   // I am suzuki.

class構文は内部的に新しく導入された構文ではなく、あくまでもこれはES2015以前のfunctionコンストラクタの構文糖です。関数型のプロパティとして実装していたメソッドは、他の言語と同様に関数定義として記述できるようになりました。

但し、class構文には以下の制限があります。これらは制限というよりも、・・・です。

  • new演算子無しで呼び出すことができない
  • class構文の前にインスタンス化することができない


アクセッサー

ES2015ではclass構文の中でアクセッサーを定義できるようになりました。

class Student {

    // コンストラクタの定義
    constructor(name) {
        // プロパティの定義
        this._name = name;
    }

    // ゲッター
    get name() {
        return this._name;
    }

    // セッター
    set name(value) {
        this._name = value;
    }

    // メソッドの定義
    greeting() {
        console.log(`I am ${this._name}.`);
    }
}



var suzuki = new Student();
suzuki.name = "suzuki";
console.log(suzuki.name);  // suzuki
suzuki.greeting();         // I am suzuki.


静的メソッド

staticキーワードをメソッドの先頭に付与することで、静的メソッドを定義することが出来ます。

class Student {

    // コンストラクタの定義
    constructor(name) {
        // プロパティの定義
        this._name = name;
    }

    // メソッドの定義
    greeting() {
        console.log(`I am ${this._name}.`);
    }

    // 静的プロパティの定義
    static age = 15;

    // 静的メソッドの定義
    static getSchoolName() {
        return 'AbcSchool';
    }
}

console.log(Student.age);              // OK (15)
console.log(Student.getSchoolName());  // OK (AbcSchool)

静的メソッドは、インスタンスからアクセスすることはできません。

var taro = new Student('taro');
taro.name = 'suzuki taro'          // NG
taro.greeting();                   // OK (I am taro.)
console.log(taro.age);             // NG (undefined)
console.log(taro.getSchoolName()); // NG (taro.getSchoolName is not a function)

継承

  • extends
  • super

プロパティの動的生成

js/object/oriented.1622435005.txt.gz · 最終更新: 2021/05/31 13:23 by tanaka