JavaScriptの継承とクラス式

JavaScriptの継承とクラス式

JavaScriptでの継承、親クラスの呼び出し、そしてクラス式について、具体的なコード例と共に解説します。

継承とは?

継承は、あるクラスが別のクラスのプロパティやメソッドを引き継ぐ仕組みです。これにより、コードの再利用性が向上し、よりシンプルで効率的な設計が可能になります。

数式で表現すると、あるクラス \( B \) が別のクラス \( A \) を継承する場合:

\[ B(x) = A(x) + \text{新しいプロパティとメソッド} \]

コード例:基本的な継承


class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Rex');
dog.speak(); // Rex barks.
    

親クラスの呼び出し(super)

superは親クラスのコンストラクタやメソッドを呼び出すために使用されます。super()を呼び出すことで、親クラスの初期化処理を利用できます。

数式的に言うと、子クラス \( C \) のコンストラクタは、親クラス \( P \) のコンストラクタを次のように拡張しています:

\[ C(x, y) = P(x) + \text{子クラス独自の処理} \]

コード例:superの使用


class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // 親クラスのコンストラクタを呼び出す
        this.breed = breed;
    }

    speak() {
        super.speak(); // 親クラスのメソッドを呼び出す
        console.log(`${this.name} is a ${this.breed} and barks.`);
    }
}

const dog = new Dog('Rex', 'Labrador');
dog.speak();
// Rex makes a noise.
// Rex is a Labrador and barks.
    

クラス式

JavaScriptでは、クラスを値として扱うことができます。この機能を利用すると、名前のないクラス(無名クラス)を作成したり、クラスを変数に代入したりできます。

コード例:クラス式の使用


// 無名クラス式
const MyClass = class {
    constructor(name) {
        this.name = name;
    }

    greet() {
        console.log(`Hello, ${this.name}!`);
    }
};

const instance = new MyClass('Alice');
instance.greet(); // Hello, Alice!

// 名前付きクラス式
const AnotherClass = class NamedClass {
    constructor(name) {
        this.name = name;
    }

    getClassName() {
        return NamedClass.name; // クラス名を取得
    }
};

const anotherInstance = new AnotherClass('Bob');
console.log(anotherInstance.getClassName()); // NamedClass
    

応用例

さらに実践的な例をいくつか示します。

静的メソッドを含むクラス


class MathUtils {
    static add(a, b) {
        return a + b;
    }

    static multiply(a, b) {
        return a * b;
    }
}

console.log(MathUtils.add(2, 3)); // 5
console.log(MathUtils.multiply(4, 5)); // 20
    

プロトタイプチェーンを利用した動的継承


function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

function Dog(name, breed) {
    Animal.call(this, name); // Animalのコンストラクタを呼び出す
    this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // プロトタイプチェーンを設定
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
    console.log(`${this.name} barks.`);
};

const dog = new Dog('Max', 'Beagle');
dog.speak(); // Max barks.
    

まとめ

JavaScriptでの継承とクラス式を活用することで、柔軟で再利用可能なコードを書くことができます。extendsを使った継承、superを用いた親クラスの呼び出し、そしてクラス式の利用は、それぞれ異なる場面で役立ちます。

これらの技術を使いこなすことで、オブジェクト指向プログラミングの力を最大限に引き出すことができます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です