Prototype Chain


クリーンアップ用語


prototype:モデルの青写真を作成するためのプロトタイプオブジェクト(元のフォーム).属性またはメソッドを定義できます.割り当て可能
コンストラクション関数:インスタンスを初期化するときに実行されるコンストラクション関数(特定のオブジェクトを作成するときに実行されるコード).クラスにオブジェクトを作成する役割.
this:関数の実行時に各役割ドメインに作成される一意の実行コンテキスト(メソッドが属するオブジェクトを指す).newキーを使用してインスタンスを作成すると、このインスタンスはthisの値になります.
プロトタイプチェーン(Prototype Chain)とは、proto属性によって親タイプに関連付けられた構造を指す.子タイプは、親タイプのプロパティとメソッドを継承し、すべてのオブジェクトがオブジェクトです.プロトタイプを持つ.すなわち,オブジェクトは継承の最上位層であり,すべてのオブジェクトが継承される.
画像ソース:codestates urclass
継承は1)擬似古典モードと2)ES 6 classキーワードを使用する方法である.

1.擬似古典的手法(原理理解を中心とした)


画像ソース:codestates urclass
  • コンストラクタ
  • に転送する.
  • Object.createメソッド(プロトタイプ接続)
  • を使用
    接続
  • コンストラクタ(第2のプロセスでコンストラクタのリンクが切断するため)
  • メソッドの再定義(必要に応じて)
  • - Object.create(proto):最初のパラメータであるプロトタイプオブジェクトに基づいてプロトタイプを作成します.オブジェクトをprotoに挿入してプロトタイプにする(protome機能をコピーした新しいオブジェクトを作成する)

    Grub

    var Grub = function () {
        this.age = 0;
        this.color = 'pink';
        this.food = 'jelly';
    };
    
    Grub.prototype.eat = function(){
        return 'Mmmmmmmmm jelly';
    }

    Bee

    var Grub = require('./Grub');
    
    var Bee = function () {
        Grub.call(this);
        this.age = 5;
        this.color = 'yellow';
        this.job = 'keep on growing';
    };
    
    Bee.prototype = Object.create(Grub.prototype);
    Bee.prototype.constructor = Bee;

    ForagerBee

    var Bee = require('./Bee');
    
    var ForagerBee = function () {
        Bee.call(this);
        this.age = 10;
        this.job = 'find pollen';
        this.canFly = true;
        this.treasureChest = [];
    };
    
    ForagerBee.prototype = Object.create(Bee.prototype);
    ForagerBee.prototype.constructor = ForagerBee;
    
    ForagerBee.prototype.forage = function(){
        this.treasureChest.push('treasure');
    }

    HoneyMakerBee

    var Bee = require('./Bee');
    
    var HoneyMakerBee = function () {
        Bee.call(this);
        this.age = 10;
        this.job = 'make honey';
        this.honeyPot = 0;
    };
    
    HoneyMakerBee.prototype = Object.create(Bee.prototype);
    HoneyMakerBee.prototype.constructor = HoneyMakerBee;
    
    HoneyMakerBee.prototype.makeHoney = function(){
        this.honeyPot++;
    }
    
    HoneyMakerBee.prototype.giveHoney = function(){
        this.honeyPot--;
    }

    2.ES 6メソッド(classキーワード使用)

  • extendsキーワード
  • を使用
    作成
  • コンストラクタ
  • この位置をsuperで置換(superはコンストラクション関数で1回のみ使用可能、super上のthisは使用不可)
  • メソッドの再定義(必要に応じて)
  • Grub

    class Grub {
      constructor(){
        this.age = 0;
        this.color = 'pink';
        this.food = 'jelly';
      }
      eat(){
        return 'Mmmmmmmmm jelly'
      }
    }

    Bee

    const Grub = require('./Grub');
    
    class Bee extends Grub{
      constructor(){
        super();
        this.age = 5;
        this.color = 'yellow';
        this.job = 'Keep on growing'
      }
    }

    ForagerBee

    const Bee = require('./Bee');
    
    class ForagerBee extends Bee {
      constructor() {
        super();
        this.age = 10;
        this.job = 'find pollen';
        this.canFly = true;
        this.treasureChest = [];
      }
      forage() {
        this.treasureChest.push('treasure');
      }
    }

    HoneyMakerBee

    const Bee = require('./Bee');
    
    class HoneyMakerBee extends Bee {
      constructor() {
        super();
        this.age = 10;
        this.job = 'make honey';
        this.honeyPot = 0;
      }
      makeHoney() {
        this.honeyPot++;
      }
      giveHoney() {
        this.honeyPot--;
      }
    }