Question

我在JavaScript中使用了类和原型模式。我创建了一个名为NavigatieButton的函数，并获得了一个名为location，rotation和navigatie的三个属性的构造函数。

在NavigatieButton的原型中，我制作了一个名为init的函数，该函数必须呈现＆＃34;组件＆＃34;。

在render函数中，我使用以下代码创建NavigatieButton的新实例：

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

但如果我致电init，则属性location，rotation和navigatie未定义。

在这里你可以找到我的代码。

＆＃13;

"use strict";

function NavigatieButton(location) {
  this.location = location;
}

NavigatieButton.prototype.init = function() {
  var element = document.createElement('a-entity');
  element.setAttribute('location', this.location);

  // Here I'm adding some other nodes to the `element` variable.

  return element;
};

(function() {
  
  function render() {
    var el = document.createElement('div');

    for (var i = 7; i--;) {
      var navBtn = new NavigatieButton('0 0 0');
      var comp = NavigatieButton.prototype.init();

      el.appendChild(comp);
    }

    console.log(el);
  }

  render();
})();

＆＃13;

打开浏览器的控制台以查看记录的数据。您可以在下面找到记录数据的片段。

<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>

我的代码出了什么问题？为什么我总是未定义而不是我的输入？

PS 1：我关注这篇文章：3 ways to define a JavaScript class （参见标题1.2）。

PS 2 ：我使用aframe创建了WebVR。

Answer 1

而不是

var currentTime = new Date().toISOString().slice(0, 19).replace('T', ' ');
query('UPDATE `users` SET `claimed`='+currentTime+' WHERE`id`='+pool.escape(user.steamid));

您必须使用刚创建的对象调用var comp = NavigatieButton.prototype.init();：

.init()

var comp = navBtn.init();函数将在原型上找到，当它以正确方式调用时，.init()的值将是对您创建的this对象的引用。

Answer 2

您正在直接调用NavigatieButton构造函数的init函数，该函数不是新创建的对象。

使用navBtn.init();代替NavigatieButton.prototype.init();

使用类和原型模式未定义组件的属性

2 个答案: