Water Sunlight

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

ユーザ用ツール

サイト用ツール

トレース: • JavaScript オブジェク指向構文

JavaScript

基本文法

関数

オブジェクト

その他の構文

ラッパーオブジェクト

組込みオブジェクト編

メタ
js:object:oriented

−目次

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

JavaScript オブジェク指向構文

— y2sunlight 2021-05-31

本章では、ES2015*2015で採用されたオブジェクト指向構文を中心にモダンなコードの記述方法について説明します。それ以前のオブジェクト指向を実装するための文法については、オブジェクトの基本を参照して下さい。

class構文

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

Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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構文の中でアクセッサーを定義できるようになりました。

Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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キーワードをメソッドの先頭に付与することで、静的メソッドを定義することが出来ます。

Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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)

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

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


継承

ES2015以前の構文ではprototypeチェーンを使って継承していましたが、新しい構文では extends と super キーワードを使いこれを実現することができます。

下の例は、前述のStudentクラスを継承した例です。

TODO: 例

* extends

  • super

プロパティの動的生成

オブジェクト初期化子

オブジェクト初期化子は中括弧 ({}) で囲まれたオブジェクトのプロパティのリストです。

js/object/oriented.1623029241.txt.gz · 最終更新: 2021/06/07 10:27 by y2sunlight

ページ用ツール

特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki