[JS] 프로토타입과 클래스

💡 프로토타입
JavaScript에서 상속을 위해 사용하는 매커니즘

클래스

---

JavaScript에는 class가 없기 때문에 생성자 함수를 사용해서 그 역할을 대신합니다.

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
		this.sayHello = function() {
	    console.log(this.name + " said hello");
	  }
	}
}

new 키워드를 이용해 Human생성자 함수를 실행하고 전달 인자로 name과 age를 줍니다.

let steve = new Human('steve', 30);
steve.sayHello(); // "steve said hello"
let kim = new Human("kim", 25);
kim.sayHello(); // "kim said hello"

이렇게 만든 인스턴스 객체들은 공통적으로 부모의 메서드를 상속 받아서 사용 가능합니다.

상속받은 속성과 메서드는 자식 객체가 직접 가지고 있습니다.

그런데 인스턴스가 만들어지면서 자동으로 [Prototype]이라는 객체가 만들어졌습니다. 이게 뭘까요?

 

프로토타입

---

똑같은 메서드를 굳이 모든 자식 객체들이 가지고 있을 필요는 없습니다.

불필요한 메모리를 낭비하지 않기 위해 부모 객체(생성자)만 가지고 있고 자식들은 그것을 참조, 조회해서 가져다 쓰는 편이 더 좋습니다. 이것을 위해 프로토타입을 사용합니다.

Human의 프로토타입 객체에 메서드를 넣어두면 Human생성자로 만든 모든 객체들은 해당 메서드를 직접 가지고 있지 않아도 사용 가능합니다.

class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
		this.sayHello = function() {
	    console.log(this.name + " said hello");
	  }
	}
  sleep() {
    console.log(`${this.name}은 잠에 들었습니다`);
  }
}

sleep메서드는 sayHello와 달리 prototype에 넣었습니다.

let steve = new Human('steve', 30);

steve인스턴스를 생성하고 콘솔에 찍어보면 다음과 같이 나옵니다.

sayHello와 달리 sleep은 프로토타입 객체 안에 들어있습니다.

프로토타입 구조도

객체 간의 관계를 구조화시키면 다음과 같은 그림이 나옵니다.

Human 객체의 prototype 프로퍼티는 Human의 prototype 객체를 가리키고 prototype 객체는 constructor라는 프로퍼티를 생성해 Human 객체를 가리킵니다.

steve 객체가 생성될 때 __proto__프로퍼티가 같이 생성됩니다. __proto__는 Human의 prototype 객체를 가리킵니다.

그렇기 때문에 Human.prototype으로 Human의 prototype 객체에 접근할 수 있고, steve.__proto__를 통해서도 Human의 prototype 객체에 접근이 가능합니다.

이렇게 서로가 서로를 가리키는 특성으로 인해서 다음과 같은 식이 성립합니다.

Human.prototype.constructor === Human;
Human.prototype === steve.__proto__;
Human.prototype.sleep === steve.sleep;

 

레퍼런스

• 코드스테이츠
• https://www.zerocho.com/category/JavaScript/post/573c2acf91575c17008ad2fc
• https://velog.io/@h0ngwon/Javascript-proto-vs-prototype-%EC%B0%A8%EC%9D%B4
• https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes