기타

JavaScript에서 생성자를 초기화하면 메소드들이 실행된다.

hojomu 2023. 4. 26. 12:08
// 탭 생성자
class TabsAutomatic {

	// 탭 구성
 	 constructor(groupNode) {
  	  this.tablistNode = groupNode;

 	   this.tabs = [];
	
	    중략
    
	  }
  
	  // 키다운 이벤트에서 첫 탭과 마지막 탭의 이동을 이어지게 하는 함수
		  setSelectedToPreviousTab(currentTab) {
		    var index;
	
		    if (currentTab === this.firstTab) {
		      this.setSelectedTab(this.lastTab);
		    } else {
		      index = this.tabs.indexOf(currentTab);
		      this.setSelectedTab(this.tabs[index - 1]);
		    }
	    
		    // 달력 숨기기
		    allCalendar.classList.add("dis-none");
	    
		  }
}


// Initialize tablist ( 생성자 초기화 )
window.addEventListener('load', function () {
  var tablists = document.querySelectorAll('[role=tablist].automatic');
  for (var i = 0; i < tablists.length; i++) {
    new TabsAutomatic(tablists[i]);
  }
});

 

다음과 같이 JavaScript에서 class를 생성해서 사용할 경우,

new 생성자() 를 이용해서 초기화 할 경우,

 

class 내부에 있는 모든 메소드들이 1회 실행된다. ( 위의 코드에서는 setSelectedToPreviousTab()  )