Help us understand the problem. What is going on with this article?

JavaScriptの継承について確認

概要

昔、勉強したが、知識が曖昧になってきているので再度調べてみる。
( 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での確認
sample.png

まとめ

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

参考サイト

reflet
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした