Ошибка JS: TypeError: Electron.inita is not a constructor

163
04 июня 2019, 01:50

Выдает такого рода ошибку. Погуглил, узнал, что она возникает когда пытаешься вызвать функцию как конструктор, но это не конструктор.

Но это не так в данном случаи. Что я делаю не так?

TypeError: Electron.inita is not a constructor

; 
(function() { 
  var arbitals = document.querySelectorAll('.animate-electron__arbital'); 
 
  function randomNumInt(min, max) { 
    return Math.floor(Math.random() * (max - min)) + min; 
  } 
 
  function addElectrons(electronCount, arbitals, arbitalNum, startCardinats) { 
    var electron = document.createElement('div'); 
    electron.classList.add('animate-electron__electron'); 
    electron.style.width = randomNumInt(45, 55) + 'px'; 
    var electronWidth = getComputedStyle(electron).width; 
    electron.style.height = electronWidth; 
    arbitals[arbitalNum].appendChild(electron); 
  } 
 
  function Electron() { 
    this.degrees = randomNumInt(0, 20); 
    this.arbital = arbitals[randomNumInt(0, 3)]; 
    this.item = document.createElement('div'); 
 
    this.itemCreate = function() { 
      this.item.classList.add('animate-electron__electron'); 
      this.item.style.width = randomNumInt(45, 55) + 'px'; 
      var electronWidth = getComputedStyle(this.item).width; 
      this.item.style.height = electronWidth; 
      this.arbital.appendChild(this.item); 
    } 
 
    this.itemRun = function() { 
      var diametr = parseFloat(getComputedStyle(this.arbital).width); 
 
      this.item.style.right = diametr / 2 - Math.cos(this.degrees) * diametr / 2 + 'px'; 
      this.item.style.bottom = diametr / 2 - Math.sin(this.degrees) * diametr / 2 + 'px'; 
 
      var moving = setInterval(function() { 
        this.degrees += 0.2; 
        this.item.style.right = diametr / 2 - Math.cos(this.degrees) * diametr / 2 + 'px'; 
        this.item.style.bottom = diametr / 2 - Math.sin(this.degrees) * diametr / 2 + 'px'; 
 
      }.bind(this), 500) 
    } 
 
    this.inita = function() { 
      this.itemCreate(); 
      this.itemRun(); 
    } 
  } 
 
  new Electron.inita(); 
 
}())
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  outline: none; 
  font-family: 'Roboto', sans-serif; 
} 
 
 
/*Header*/ 
 
.header { 
  height: 79px; 
} 
 
.top-menu { 
  position: absolute; 
  padding: 30px 0; 
  padding-left: 80px; 
} 
 
.top-menu__item { 
  display: inline-block; 
  margin-left: 46px; 
} 
 
.top-menu__link { 
  font-size: 16px; 
  color: #475055; 
  text-decoration: none; 
  transition: 0.3s; 
} 
 
.top-menu__link:hover { 
  color: #56ccc8; 
} 
 
.left-menu-button { 
  background-color: #56ccc8; 
  position: absolute; 
  left: 0; 
  height: 100%; 
  width: 80px; 
  top: 0; 
  cursor: pointer; 
} 
 
.left-menu-button:hover .left-menu-button__row:nth-child(2) { 
  margin: 8px 0; 
} 
 
.left-menu-button__icon { 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
} 
 
.left-menu-button__row { 
  width: 30px; 
  height: 2px; 
  background-color: #fff; 
} 
 
.left-menu-button__row:nth-child(2) { 
  margin: 6px 0; 
  transition: .3s; 
} 
 
.left-menu { 
  position: absolute; 
  left: 0; 
  bottom: 0; 
  transform: translateX(-100%); 
  width: 300px; 
  height: calc(100% - 79px); 
  background-color: white; 
  transition: .5s; 
  z-index: 100; 
} 
 
.left-menu--active { 
  transform: translateX(0%); 
} 
 
.left-menu h2 { 
  color: #475055; 
  font-size: 18px; 
  font-weight: 400; 
  text-transform: uppercase; 
  margin: 30px 0; 
  margin-left: 16px; 
  display: block; 
} 
 
.left-menu__list { 
  list-style: none; 
} 
 
.left-menu__item {} 
 
.left-menu__link { 
  padding: 16px; 
  display: block; 
  color: #475055; 
  font-size: 16px; 
  text-decoration: none; 
  border-bottom: 1px solid #e1e5e7; 
  transition: .3s; 
} 
 
.left-menu__link:hover { 
  background-color: #56ccc8; 
  color: #fff; 
} 
 
 
/*Main section*/ 
 
.main { 
  height: calc(100vh - 79px); 
  background-color: #c5cdd1; 
  position: relative; 
} 
 
.game-block { 
  position: absolute; 
  top: 0; 
  height: 100%; 
  width: 65%; 
  overflow: hidden; 
} 
 
.game-block:first-child { 
  background-color: #81ecec; 
  left: 0; 
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%); 
} 
 
.game-block:last-child { 
  background-color: #00cec9; 
  right: 0; 
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); 
} 
 
.animate-electron { 
  position: absolute; 
  left: 30%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  width: 40%; 
  perspective: 600px; 
  transform-style: preserve-3d; 
} 
 
.animate-electron:before { 
  content: ''; 
  display: block; 
  padding-top: 100%; 
} 
 
.animate-electron__core { 
  width: 30%; 
  height: 30%; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  border-radius: 50%; 
  background-color: #56ccc8; 
  animation: coreAnimation 3s ease infinite; 
} 
 
@keyframes coreAnimation { 
  0% { 
    transform: translate(-50%, -50%); 
  } 
  50% { 
    transform: translate(-50%, -60%); 
  } 
  100% { 
    transform: translate(-50%, -50%); 
  } 
} 
 
.animate-electron__arbitals {} 
 
.animate-electron__arbital { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  border-radius: 50%; 
  border: 6px solid #56ccc8; 
  transform-style: flat; 
} 
 
.animate-electron__arbital:first-child { 
  transform: rotateY(70deg) rotateZ(20deg); 
} 
 
.animate-electron__arbital:nth-child(2) { 
  transform: rotateY(60deg) rotateX(60deg) rotateZ(-30deg); 
} 
 
.animate-electron__arbital:last-child { 
  transform: rotateY(-60deg) rotateX(60deg) rotateZ(100deg); 
} 
 
.animate-electron__electron { 
  background-color: #b2bec3; 
  border-radius: 50%; 
  transform: translate(50%, 50%); 
  position: absolute; 
  transition: 0.5s linear; 
}
<header class="header"> 
  <div class="top-menu"> 
    <div class="left-menu-button"> 
      <div class="left-menu-button__icon"> 
        <div class="left-menu-button__row"></div> 
        <div class="left-menu-button__row"></div> 
        <div class="left-menu-button__row"></div> 
      </div> 
    </div> 
    <nav class="top-menu__navigation"> 
      <ul class="top-menu__list"> 
        <li class="top-menu__item"> 
          <a href="#" class="top-menu__link">Главная</a> 
        </li> 
        <li class="top-menu__item"> 
          <a href="#" class="top-menu__link">Источники</a> 
        </li> 
        <li class="top-menu__item"> 
          <a href="#" class="top-menu__link">Правила игр</a> 
        </li> 
      </ul> 
    </nav> 
  </div> 
  <nav class="left-menu"> 
    <h2>Игры</h2> 
    <div class="left-menu__item"> 
      <a href="#" class="left-menu__link">Электрон</a> 
    </div> 
    <div class="left-menu__item"> 
      <a href="#" class="left-menu__link">Лаборатория</a> 
    </div> 
  </nav> 
</header> 
<main class="main"> 
  <a href="#" class="game-block"> 
    <div class="animate-electron"> 
      <div class="animate-electron__arbitals"> 
        <div class="animate-electron__arbital"></div> 
        <div class="animate-electron__arbital"></div> 
        <div class="animate-electron__arbital"></div> 
      </div> 
      <div class="animate-electron__core"></div> 
    </div> 
  </a> 
  <a href="#" class="game-block"></a> 
</main>

Answer 1

Данное выражение

new Electron.inita();

рассматривается как new (Electron.inita)();, то есть сначала идет попытка получить свойство inita и лишь затем использование его как конструктора.

Так как у функции Electron нет такого свойства - получается закономерная ошибка.

Воспроизвести можно простым примером:

function A() {} 
 
new A.a();

Чтобы появилось это свойство, в качестве конструктора нужно вызывать функцию Electron:

new Electron().inita()

либо обрамить скобками: (new Electron).inita()

function A() { 
  this.a = function() { 
    console.log('a') 
  } 
} 
 
new A().a(); 
(new A).a();

READ ALSO
Как правильно вызвать функцию?

Как правильно вызвать функцию?

Как правильно вызвать функцию в Jquery, если её название записано в переменную?

132
Удаление символов в строке по маске Xx и xX (adventofcode 5 day challenge)

Удаление символов в строке по маске Xx и xX (adventofcode 5 day challenge)

Необходимо строку в файле (в аттаче) длинной 50000 символов отсортировать по маске Xx и xX и удалить их из строки

126
Вопрос про события. (vue js, jquery)

Вопрос про события. (vue js, jquery)

В общем имеется следующий js код (vue)Переделывал этот же код на jquery, вопрос тот же

139
Из PHP массива в двухуровневый SELECT

Из PHP массива в двухуровневый SELECT

есть массив вида [0]=>["name" => "cat_name", "id" => "cat_id", "child_cat" => ["child_name" => "child_cat_name", "child_id" => "child_cat_id"]

134