Properties of component are undefined using class and prototype pattern

I've made use of the class and prototype pattern in JavaScript. I've made a function named NavigatieButton and got a constructor of three attributes named location, rotation and navigatie.

In the prototype of NavigatieButton, I've maked a function named init that must render a "component".

Inside the render function I make a new instance of NavigatieButton using code below:

var navBtn = new NavigatieButton('0 0 0', '0 0 0', 0);

But if I call init, the properties location, rotation and navigatie are undefined.

Here you could find my code I've made.

"use strict";

function NavigatieButton(location, rotation, navigatie) {
  this.location = location;
  this.rotation = rotation;
  this.navigatie = navigatie;
}

NavigatieButton.prototype.init = function() {
  var element = document.createElement('a-entity');

  element.setAttribute('location', this.location);
  element.setAttribute('rotation', this.rotation);

  var outerImage = document.createElement('a-image');
  outerImage.setAttribute("src", "./assets/images/navigationOuterCircle.png");
  element.appendChild(outerImage);

  var innerImage = document.createElement('a-image');
  innerImage.setAttribute("src", "./assets/images/navigationInnerCircle.png");
  innerImage.setAttribute("scale", "0.5 0.5 0.5");
  element.appendChild(innerImage);

  return element;
};

(function() {
  
  function render() {
    var el = document.createElement('div');

    for (var i = 7; i--;) {
      var navBtn = new NavigatieButton('0 0 0', '0 0 0', 0);
      var comp = NavigatieButton.prototype.init();

      el.appendChild(comp);
    }

    console.log(el);
  }

  render();
})();

Open the console of your browser to see the logged data. Below you could find a snippet of the logged data.

<div>
  <!-- 7 thimes this code: -->
  <a-entity location="undefined" rotation="undefined">
    <a-image src="./assets/images/navigationOuterCircle.png"></a-image>
    <a-image src="./assets/images/navigationInnerCircle.png" scale="0.5 0.5 0.5"></a-image>
  </a-entity>
  <!-- Till here -->
</div>

What's wrong with my code? Why I've always undefined instead of my input?

PS 1: I'm following this article: 3 ways to define a JavaScript class (see heading 1.2).

PS 2: I'm using aframe to create WebVR.