概要

昔、勉強したが、知識が曖昧になってきているので再度調べてみる。
( Backbone.jsの学習時に登場したため... )

サンプルコード

JavaScriptの継承を行ったサンプルを作ってみる。

./src/html/extend.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>JavaScriptの継承について</title>
</head>
<body>
    <h1>prototypeを使った継承</h1>
    <p>オブジェクトを継承してみる。</p>

    <script>
      // Animalオブジェクト
      function Animal(name) {
        this.name = name;
      }
      Animal.prototype.talk = function() {
        console.log(this.phrase);
      };

      // Animal2オブジェクト (static変数あり)
      var Animal2 = (function() {
        var uid = 0;
        return function () {
          this.uid = uid;
          uid++;
        };
      })();

      // -------------------------------------------------------------------
      // オブジェクトの継承

      (function() {
        // Dogオブジェクト (Animalを継承する)
        function Dog(phrase) {
          this.constructor('Dog');
          this.phrase = phrase;
        }
        Dog.prototype = new Animal(); // prototype, constructorのコピー (talk関数)
        var myDog = new Dog('Hello World.');
        myDog.talk();            // → Hello World.
        console.log(myDog);      // → Dog {name: "Dog", phrase: "Hello World."}
      })();

      (function() {
        // Dog2オブジェクト (Animal2を継承する)
        function Dog2() {
          this.constructor();
        }
        Dog2.prototype = new Animal2(); // prototype, constructorのコピー (talk関数)
        console.log('dog2(1)', new Dog2()); // dog2(1) Dog2 {uid: 1}
        console.log('dog2(2)', new Dog2()); // dog2(2) Dog2 {uid: 2}
        console.log('dog2(3)', new Dog2()); // dog2(3) Dog2 {uid: 3}
      })();

      // -------------------------------------------------------------------
      // Object.createメソッド

      (function() {
        function Dog (phrase) {
          Animal.call(this, 'Dog');
          this.phrase = phrase;
        }
        Dog.prototype = Object.create(Animal.prototype);
        Dog.prototype.constructor = Dog;

        var myDog = new Dog('Hello World.');
        myDog.talk();            // → Hello World.
        console.log(myDog);      // → Dog {name: "Dog", phrase: "Hello World."}
      })();

      (function() {
        // Dog2オブジェクト (Animal2を継承する)
        function Dog2() {
          Animal2.call(this);
        }
        Dog2.prototype = new Animal2();
        console.log('dog2(1)', new Dog2()); // dog2(1) Dog2 {uid: 4}
        console.log('dog2(2)', new Dog2()); // dog2(2) Dog2 {uid: 5}
        console.log('dog2(3)', new Dog2()); // dog2(3) Dog2 {uid: 6}
      })();
      // -------------------------------------------------------------------
    </script>
</body>
</html>

動作確認

どちらの方法でも継承できているようです。
※ chromeでの確認

まとめ

古い内容になり、現在では書くことがほとんどないと思いますが、動きを確認するため、書いてみました。

参考サイト