[JavaScript] Prototype

자바스크립트에서는 상속을 구현하기 위해 객체에 프로토타입이라는 개념을 적용하여, 부모 객체의 프로토타입을 자식 객체에서 쓸 수 있게 하였다. ES6에서 class가 추가되어 아래와 같이 class로 상속을 구현할 수 있게 되었지만, 문법이 추가된 것이지 자바스크립트가 클래스 기반으로 바뀐 것은 아니라고 한다.

 

class World {
	constructor(nation) { // 생성자 
    	this.nation = nation;
     	}
    whereRUfrom() { // 메소드
    	console.log("I'm from " + this.nation);
        }
     }
     
class Asia extends World { // extends 키워드로 World 클래스를 부모 클래스로 삼음
	constructor(nation) {
    	super(nation); // super 키워드로 부모 객체의 변수값 물려받음
        }
    whereRUlive() { 
    	console.log("I live in " + this.nation);
       	}
      }

let imfrom = new Asia('SouthKorea'); // 클래스의 새로운 객체인 imfrom 변수 생성
imfrom.whereRUfrom();

 

자바 스크립트의 객체는 모두 [[Prototype]]이라는 속성을 가지고 있으며 new 키워드로 만들어진 객체는 모두 부모 객체의 프로토타입을 상속 받는다. 

 

var arr = new Array(1,2,3);
arr.pop();
arr.push(4);

 

arr는 자바스크립트 내장객체인 Array의 자식이며 별도의 코드를 작성하지 않아도 Array가 가진 프로토타입을 물려받아 pop과 push같은 메소드를 사용할 수 있다. 한 마디로 Prototype은 객체의 '유전자'다. 부모가 자식에게 유전자를 물려주듯 부모 객체는 자식 객체에게 prototype을 물려준다. 

 

function mechanic() {
this.a = 'saw';
this.b = 'driver';
}

mechanic.prototype.name = 'kim';

var tools = new mechanic();

console.log(tools.name); // mechanic의 프로토타입인 name을 출력

 

 

프로그램 내에 이미 빌트인된 함수와 프로토타입들도 있지만, "함수명.prototype.프로토타입명 = '내용';"으로 프로그래머가 직접 함수에 임의의 프로토타입을 추가할 수 있다. 위 코드에서는 함수에 'kim'이라는 임의의 프로토타입을 부여하였고, new 키워드로 만들어진 변수 tools가 mechanic에게서 물려받은 프로토타입을 사용하는 모습을 볼 수 있다.  

 

 

 

 

ref.

1) 코딩 애플 유투브

2) 자바스크립트 딥다이브 책

3) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array