IT/Javascript

javascript class 속성의 private 및 static 을 붙이면 일어나는 일

KeepGooing 2021. 6. 23. 10:19
반응형

진행하기 앞서 아래 사항을 염두하자.

1. private 필드는 class 선언문 내부의 class 생성자(class constructor)에서 접근이 가능하다.

2. Private static 필드는 class evaluation 시 class 생성자(class constructor)에 추가된다. 

*여기서 class evaluation은 class 스캔의 뜻인듯.

 

 

//ChatbotDialog.js

class ChatbotDialog {

   constructor(){
        this.temp = 'temp';
     }
        
   continueOrNot = async () => {
      return console.log('continueOrNot')
   }
   
   chatbotDialog = async () => {
   	  	console.log('this->>>>>', this)
        console.log('ChatbotDialog->>>>>', ChatbotDialog);
	  return; 
   }

}
module.exports = ChatbotDialog;


// dialog.js
const chatbotdialog = require(./ChatbotDialog.js);
const dialog = {
    const dialogInstance = new chatbotdialog();
    dialogInstance.chatbotDialog();
}

결과
    // this->>>>> ChabotDialog {
    //     continueOrNot: [Function],
    //     chatbotDialog: [Function],
    //     temp: 'temp'
    //   }
    //   ChabotDialog->>>>>> [Function: ChabotDialog]

public한 형태로 외부 파일에서 호출 했을 때

this는 말 그대로 해당 Class를 가리킨다.

ChatbotDialog는 생성자

 

 

//ChatbotDialog.js

class ChatbotDialog {

   constructor(){
        this.temp = 'temp';
     }
        
   continueOrNot = async () => {
      return console.log('continueOrNot')
   }
   
   chatbotDialog = async () => {
   	  	console.log('this->>>>>', this)
        console.log('new ChabotDialog() ->>>>>>', new ChabotDialog());
	  return; 
   }

}
module.exports = ChatbotDialog;


// dialog.js
const chatbotdialog = require(./ChatbotDialog.js);
const dialog = {
    const dialogInstance = new chatbotdialog();
    dialogInstance.chatbotDialog();
}

결과
    // this->>>>> ChabotDialog {
    //     continueOrNot: [Function],
    //     chatbotDialog: [Function],
    //     temp: 'temp'
    //   }
    
    
  //   new ChabotDialog() ->>>>>> ChabotDialog {
  //   continueOrNot: [Function],
  //   chatbotDialog: [Function],
  //   temp: 'temp'
  //  }

 

생성자 호출 시 this와 같은 새로운 class 호출

 

//ChatbotDialog.js

class ChatbotDialog {

   constructor(){
        this.temp = 'temp';
     }
        
   #continueOrNot = async () => {
      return console.log('continueOrNot')
   }
   
   chatbotDialog = async () => {
   	  	console.log('this->>>>>', this)
        console.log('new ChabotDialog() ->>>>>>', new ChabotDialog());
	  return; 
   }

}
module.exports = ChatbotDialog;


// dialog.js
const chatbotdialog = require(./ChatbotDialog.js);
const dialog = {
    const dialogInstance = new chatbotdialog();
    dialogInstance.chatbotDialog();
}

결과
  // this->>>>> ChabotDialog { chatbotDialog: [Function], temp: 'temp' }
  // new ChabotDialog() ->>>>>> ChabotDialog { chatbotDialog: [Function], temp: 'temp' }

 

continueOrNot를 private 했을 때 

class 내에서 사라짐

 

흠... 작성하다보니 일일이 케이스 별 결과보다

한꺼번에 여러 예시를 보여주는게 좋을 듯해서 아래 코드로 최종적으로 정리해보고자 한다.

(고로 아래 케이스만 봐도 한방에 해결)

 

//ChatbotDialog.js

class ChatbotDialog {
   #temp	
   constructor(){
        this.temp = 'temp';
     }
        
   #continueOrNot = async () => { // 생성자를 통해서만 접근이 가능
      return console.log('continueOrNot')
   }
   
   static #continueOrNot = async () => { //정적 메소드 (호출을 위한 Instance 필요없음) 클래스 evaluation 시에 자동으로 생성자에 올라감 / 그러나 내부 클래스 안에서만 사용가능
      return console.log('continueOrNot')
   }
   
   chatbotDialog = async () => {
     
	  return; 
   }

}
module.exports = ChatbotDialog;


// dialog.js
const chatbotdialog = require(./ChatbotDialog.js);
const dialog = {
    const dialogInstance = new chatbotdialog();
    dialogInstance.chatbotDialog();
}

 

 

 

반응형