OOP Javascript親関数を呼び出す方法

Question

子で同じコンテキスト（つまり、このような）で親関数を呼び出したいと思います。

これについていくつかの調査を行いましたが、良い結果が得られていません。私が試したものは、未定義のエラーのプロパティを読み取ることができなくなってしまった。以下は私のコードです（簡略化し、短縮するコードをたくさん削除しています）。

テスト機能を呼び出す場合はテストしてください。私はコードにコメントをしました。

/* Buoy Class */ 
    function Buoy() { 
     this.buoyID = 'buoy-' + getHoverID(); 
     this.init = function() { 
      this.cacheDom(); 
      this.bindEvents(); 
     }; 
     this.cacheDom = function() { 
      this.$buoy = $buoyContainer.find("#" + this.buoyID); 
      this.$buoyHeader = this.$buoy.find(".header"); 
      this.$closeBuoy = this.$buoyHeader.find(".close-button"); 
     }; 
     this.bindEvents = function() { 
      this.$closeBuoy.on("click", this.closeBuoy.bind(this)); 
      this.$buoyHeader.on("click", this.toggleBuoyMinimize.bind(this)); 
      this.$buoy.on("click", this.focusBuoy.bind(this)); 
      $(document).on("mousedown", this.unfocusBuoy.bind(this)); 
     }; 

     this.test = function(){ 
      //THIS IS WHAT I WANT TO CALL 
     } 

     this.init(); 
    }; 

CHILD

function LiveChat(userID) { 
     var _this = this; 
     Buoy.call(this); 
     this.init = function() { 
      this.cacheDom(); 
      this.bindEvents(); 
     }; 
     this.cacheDom = function() { 
      this.$userInput = this.$buoy.find(".user-chat-input"); 
      this.$conversationArea = this.$buoy.find(".conversation-area"); 
      this.$loading = this.$buoy.find(".loading"); 
     }; 
     this.bindEvents = function() { 
      this.$userInput.on("input", this.setConversationAreaY.bind(this)); 
      this.$userInput.on("keydown", this.sendMessage.bind(this)); 
      this.$conversationArea.on("scroll", this.loadOlderMessages.bind(this)); 
      this.$buoy.on("click", this.focusInput.bind(this)); 
     } 

     //I WANT TO CALL TEST IN PARENT 
     //KEEPING THE CORRECT CONTEXT WITH .CALL(THIS) 

     this.init(); 
    } 

PARENTあなたはライブチャットがBouyを拡張したいFUNCTION

function extend(Child, Parent) { 
    var Tmp = function() { 
    }; 
    Tmp.prototype = Parent.prototype; 
    Child.prototype = new Tmp(); 
    Child.prototype.constructor = Child; 
} 

    extend(LiveChat, Buoy); 
    extend(AddDream, Buoy); 

Answer 1

を拡張します。

バニラJavaScriptが多型事前ES6を処理するためのシンタックスシュガーを提供していません - あなたはそれを自分を拡張する必要があります。

---

私はあなたがChild.prototypeにそれを適用する前に、あなたの拡張機能でParent.prototypeからオブジェクトを作成していないで、あなたが直面している現在の問題を説明するために、あなたのコードを使用しています。さらに、あなたの関数は、という名前の関数として定義されており、初期化の前には参照することができませんでした。

私はあなたの初期の問題の先駆けだったあなたの拡張機能を単純化し、修正しました。 「親の関数を同じコンテキスト（つまり、これは子供の中で）呼び出すには、LiveChatの中にthis.test()を追加するだけです。正しさのために

、JavaScriptがES6 （および現在のクラス宣言は、広くサポートされていません）までのクラスを持っていませんでした。

あなたが行くようにコメントに従ってください：

// PARENT FUNCTION 
 
var Buoy = function() { 
 

 
    this.init = function() { 
 
     console.log('Buoy - init'); 
 
    }; 
 
    this.cacheDom = function() { 
 
     console.log('Buoy - cacheDom'); 
 
    }; 
 
    this.bindEvents = function() { 
 
     console.log('Buoy - bindEvents') 
 
    }; 
 

 
    this.test = function(){ 
 
     console.log('Buoy - Test'); 
 
     console.log('What is my context', this); 
 
    } 
 
    
 
}; 
 

 
// CHILD FUNCTION 
 
var LiveChat = function(userID) { 
 
    
 
    // The instance for LiveChat is passed to 
 
    // Bouy, where the methods attached in Bouy 
 
    // are added to the LiveChat instance before 
 
    // the methods below are added 
 
    Buoy.call(this); 
 
    
 
    // POLYMORPHISM... dun dun dun! :p 
 
    
 
    this.init = function() { 
 
     console.log('LiveChat - init'); 
 
    }; 
 
    this.cacheDom = function() { 
 
     console.log('LiveChat - cacheDom'); 
 
    }; 
 
    this.bindEvents = function() { 
 
     console.log('LiveChat - bindEvents'); 
 
    } 
 
    
 
    //I WANT TO CALL TEST IN PARENT 
 
    //KEEPING THE CORRECT CONTEXT WITH .CALL(THIS) 
 

 
    // You don't need to use .call(this) because the test 
 
    // method already has the LiveChat context 
 
    this.test(); 
 
} 
 

 
function extend(Child, Parent) { 
 
    // --------------------- 
 
    // YOUR PROBLEM WAS HERE: 
 
    // --------------------- 
 
    
 
    // Create a new object from the Parent.prototype 
 
    // That allows all the values saved to the Parent 
 
    // scope to be preserved in the child scope 
 
    Child.prototype = Object.create(Parent.prototype); 
 
    
 
    // Changing the constructor for child means that 
 
    // calling new Child() will result in LiveChat 
 
    // being the constructor to execute 
 
    Child.prototype.constructor = Child; 
 
} 
 

 
// LiveChat extends Buoy 
 
extend(LiveChat, Buoy) 
 

 
// Create a new instance of LiveChat 
 
var liveChat = new LiveChat();