Why does my code break when I try to attach my methods to the class prototype?

Question

I'm trying to create a button class that toggles a video or image carousel. Whenever I attach my methods to the prototype, my code fails.

I'm attempting to use the Design Pattern: Revealing Prototype Pattern

https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know

my code pen: https://codepen.io/Woodenchops/pen/QRzeXX?editors=0010

function playToggle(props) {

  console.log(this);

  this._parentElement = props.parentElement;
  this._button = props.button;
  this._playing = props.playing;
  this._props = props;
  this._mediaType = props.mediaType;
  this._video_id = props.videoID;
  this._caroursel_id = props.carouselID;

}

playToggle.prototype = function () {

// methods here

}()

(function () {

  var video = document.querySelectorAll('.container');

  videoArray = [];

  video.forEach(function (vid) {
    videoArray.push(new playToggle({
      parentElement: vid,
      button: '.playpause',
      playing: true,
      mediaType: 'video',
      videoID: '.myVideo'
    }))
  });

})();

I have console logged this in the prototype, and it returns the window object instead. I have also tried using bind to bind it to the class - with no luck

Answer 1

You have not defined the prototype properly

playToggle.prototype.thePrototypeName = function() {..}

 var play = new playToggle();
 play.thePrototypeName()

Console Log Result

Object: playToggle {}