[javascript] javascript에서 private 사용하기, javascript 공개, 비공개 메소드 만들기

사전지식

function ghost() {
	this.name = "유령"
	this.getName = function () {
		return this.name;
	}
}

g = new ghost(); //ghost 객체 g를 생성
// console.log(g);

위와 같은 코드를 작성하면 new를 통해 ghost객체를 생성할 수 있다.

 

그러나 이렇게 코드를 작성하면 new를 통해 ghost객체를 생성할 때마다 this.getName이라는 함수를 계속 만들기 때문에 메모리를 많이 잡아먹을 수 있다.

 

이를 해결하기 위해 this.getName을 prototype을 이용하여 부모에게 넘긴다.

function Ghost(){
	this.name = "유령";
}

Ghost.prototype.getName = function(){
	return this.name;
}

 

공개 & 비공개 메소드

숨기고 싶은 메소드는 숨기고, 공개하고 싶은 메소드는 공개하려면

다음과 같이 object를 return해주는 방식을 사용한다.

   function Ghost(){
   	this.name = "유령";
   	return {
          getName : this.getName.bind(this)
        }
   }
   
   Ghost.prototype.getName = function(){
   	return this.name;
   }

하지만 prototype을 사용하는 것은 옛날 방식이다.

 

최근에는 class를 사용한다.

class Ghost{
  constructor(){
      this.name = "유령";
      this.age = 23;
      return {
          getName : this.getName.bind(this)
      }
  }

  getName(){
  	return this.name;
  }
  getAg(){
  	return this.age;
  }
}

const g = new Ghost();
console.log(g.getName()); //"유령"
console.log(g.getAge()); // undefined

ggetname은 오픈되어있지만 getAge는 숨겨져 있는 것을 확인 할 수 있다.

 

추가적으로,

bind를 쓴 이유는 this.getAge의 this를 바꾸어 주기 위해서다.

 

아래 코드에서 getName을 실행하면 undefined가 나온다.

 

우리는 return을 통해 object를 반환했다. 따라서 getName()의 this는 object가 되는 것이다. 

이 object에는 name이라는 객체가 없으니, undefined가 나온다.

class Ghost{
  constructor(){
		this.name = "유령";
		this.age = 23;
      return {
          getName : this.getName 
      }
  }

  getName(){
  	return this.name;
  }
  getAg(){
  	return this.age;
  }
}

const g = new Ghost();
console.log(g.getName()); //undefined

이를 해결하기 위해서 bind를 통해 this를 직접 명시해주는 것이다. this.getNme.bind(this)를 통해 getName의 this는 class Ghost라고 명시해준다.

 

class Ghost{
  constructor(){
		this.name = "유령";
		this.age = 23;
      return {
          getName : this.getName.bind(this)
      }
  }

  getName(){
  	return this.name;
  }
  getAg(){
  	return this.age;
  }
}

const g = new Ghost();
console.log(g.getName()); //유령