TIL : Prototype Chain

영아·2021년 4월 9일

ㅎㅎ.. 객체지향 프로그램이 끝나자마자 다음 파트는 Prototype Chain
그래도 클래스와 인스턴스를 공부하고 수업을 듣고나니 조금은 편안했다.
역시 큰 개념을 이해하고 보니 수월 ㅎㅎ
자바스크립트는 클래스가 없고 프로토타입을 기반의 언어라고 한다.
(물론 처음 들었을떄는 당황)😅
그럼 프로토타입이 무엇인지 알아보고 어떻게 객체지향 프로그래밍 언어로 활용되고 있는지 살펴보자!

1. Prototype

프로토타입을 사용하게 되면 객체와 객체를 연결하고 클래스처럼 상속받는 형태로 만들어서 사용 할 수 있다. (자바스크립트는 클래스X)

ES6에서 클래스라는 문법을 만든것이지 클래스가 있는것은 아님!! (처음에 너무 헷갈렸던 부분 🤓)

2.proto, constructor, prototype의 관계

__proto__: [[Prototype]] , 프로토타입 체인이라고 불린다.
(끝까지 프로토타입 체인을 타고 올라가면 Object가 나온다.)
prototype : 모든 function에는 prototype 이라는 속성이 있다. (모델의 청사진을 만들 때 쓰이는 원형객체)
constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수

let Human = function(name) { //생성자함수
this.name = name;
} 
Human.prototype.sleep = function() { //매소드
    console.log('잠자는중')
}; 

let steve = new Human('steve'); //인스턴스

steve.__proto__ === Human.prototype //true

steve instanceof Human //true 
// Human의 인스턴스는 steve? => true
//instanceof 통해서 확인 가능!

3. Pseudoclassical 상속 (ES5)

let Human = function(name) { 
	this.name = name;
} 
Human.prototype.sleep = function() {
	console.log(this.name + ' is sleeping...');
};
let steve = new Human('steve');
let Student = function(name) {
	Human.call(this, name); 
 //사용하지 않으면 Human까지 전달되지 않아서 사용해줘야지 Human의 속성을 가져 올 수 있다.
}.
Student.prototype = Object.create(Human.prototype);
// Human.prototype을 copy한 새로운 객체를 만든다. (기능 가져오기)
Student.prototype.constructor = Student; 
// 이 과정을 생략 하면 constructo가 Humam이 되어버림
Student.prototype.learn = function() {
// 새로운 매소드를 추가
};
let john = new Student('john'); 
john.learn();
john.sleep(); // john is sleeping...

코드를 작성해나가면서 과정을 익히는 걸로 상속의 방법을 이해해보려고 했다.

아직은 명확하게 이해되지 않아서 수업에서 예시로 작성된 코드를 다시한번 써보면서 개념을 정리해 보았다.

4. ES6 : class 상속

class Human { 
  constructor(name) {
    this.name = name; 
 } 
sleep() { 
	console.log(this.name + ' is sleeping...');
}
}
var steve = new Human('steve');
class Student extends Human { // Human을 상속 받을 때 extends를 이용해서 상속받기 
   constructor(name) {//동일한 생성자 함수를 사용할때는 생략도 가능!
    this.name = name; 
 }
  learn() { }// 새로운 메소드 추가
}
var john = new Student('john'); 
john.learn();
john.sleep(); // john is sleeping...

Pseudoclassical코드 보다는 역시 ES6에서 알려준 클래스를 사용해서 쓰는 방법이 훨씬 간편한 것 같다....

마무리..

ES6의 클래스를 사용하게 되면 pseudoclassical방식보다는 편하게 사용한다는 것을 느꼈다.
물론 수업 때 우리는 클래스를 사용한 코드를 더 많이 사용하게 될것이라고 했지만 pseudoclassical방식의 코딩 방법도 몰라서는 안된다고 한다. (아직 사용하시는 분들도 있을것이고, 남아있는 코딩들도 많을 테니깐!)
어찌되었든 자바스크립를 통해서도 이전에 배웠던 클래스와 인스턴스를 구현해서 객체지향적 프로그래밍을 한다는 사실을 조금은 이해하게 되었다.
아직은 개념정도만 배우고 실제로 코드를 통해서 느껴보지 못했기때문에 또 막상 코드를 작성하게 되면 엄청나게 머리가 복잡해질것만 같은 느낌이다 ㅎ..
열심히 연습하고 공부해서 내것으로 만들어보아야지 !!

열정🔥 열정🔥 열정🔥