Как получить доступ к методу из контруктора?

164

25 января 2020, 09:10

Имеется такой кусок, пытаюсь вызвать метод класса внутри конструктора, т.е. aplyStyles, но в консоли выбивает такую ошибку:

ReferenceError: aplyStyles is not defined

Как поступают в таких ситуациях?

'use strict'; 
 
;(function() { 
 
	class CubePage { 
 
		constructor() { 
			 
 
			this.cube = document.querySelector('.cube'); 
			this.slides = document.querySelectorAll('.cube_vertical'); 
 
			this.flipping = false; 
			this.cubeDeg = 0; 
			this.pageHeigt = () => { 
 
				let height = 0; 
 
				for(let i = 0; i < this.slides.length; i++) { 
 					let computedStyles = getComputedStyle(this.slides[i]); 
 					height = height + parseInt(computedStyles.height); 
 				} 
 
 				return height; 
			} 
 
			 
 			aplyStyles(slides[0], { 
 				transform: "translateZ(200px)" 
 			}) 
 
 			aplyStyles(slides[1], { 
 				transform: "rotateX(-90deg) translateZ(200px)" 
 			}) 
 			 
 
		} 
 
 
		aplyStyles(elem, styles) { 
 
		  for(var key in styles) { 
		    elem.style[key] = styles[key];   
		  } 
 
		} 
 
		showHeight() { 
			console.log(this.pageHeigt()); 
			console.log(this.slides); 
		} 
	} 
 
	var some = new CubePage; 
	some.showHeight(); 
 
 
})()

Answer 1

Методы класса доступны в конструкторе через ключевое слово this. В вашем случае aplyStyles можно вызвать следующим образом:

this.aplyStyles(this.slides[0], {
  transform: "translateZ(200px)"
})
this.aplyStyles(this.slides[1], {
  transform: "rotateX(-90deg) translateZ(200px)"
})

По сути, мы ссылаемся на текущую сущность, которая может получить эти методы из прототипа. Подробнее об этом можно почитать тут.

P.S. У вас пропущена буква p в имени метода (правильно не aplyStyles, а applyStyles).