[JS] 자바스크립트의 상속과 prototype

이번에 회사에서 배치받은 팀은 모바일 서비스 팀이었다.

 

네이티브 앱 아래에  웹 뷰를 제공하는데 당분간은 프론트 부분을 다루게 될 것 같다.

 

JS는 DOM 조작 외에는 다뤄볼 기회가 없었기에 이번에 prototype에 대한 개념도 처음 알게 되었다.

JS는 prototype 기반 언어라고 불린다는데 기본도 몰랐던 거시였다... 한 동안 JS를 열심히 공부해야할 것 같다.

 

prototype은 JS에서 객체의 상속을 다루는 간단하면서, 중요한 개념이었다. 사실 JS도 이런 기능을 제공한다는 것에 놀라기도 했다.

또 역시 JS답게 굉장히 심플했다.

🧐 자바스크립트 객체 생성

function MyObject(인자) {
	this.property1 = ...
	this.property2 = 인자
}

class MyObject {
	constructor(인자) {
    		this.property1 = ...
    		this.property2 = 인자
      }
}

자바스크립트에서 객체를 생성하는 방법은 크게 위 두 가지 방식인데 아래 방식의 class를 만드는 것은 SE6 이후에 나온 문법이라고 한다.

그래서인지 대체로 function을 사용하는 위 방법으로 작성된 코드들이 대부분인 듯하다.

🤔 자바스크립트 prototype을 이용한 상속

자바스크립트에서 객체를 생성하면 자동적으로 prototype이라는 property가 생성된다.

이 property안에 새로운 객체를 생성하면 그것이 '부모' 객체가 되면서 상속이 일어난다고 할 수 있다.

function Papa(){
	this.age = 50
}

function Son() {
	this.name = 'son'
}

var sam = new Son()
sam.prototype = new Papa()	// Son의 다형성 객체인 sam은 Papa객체를 부모 객체로 상속 받는다.

console.log(sam.name)	// >>> son
console.log(sam.age)	// >>> 50

실제로 sam이라는 객체는 Son 객체이기 때문에 age라는 속성은 없지만, prototype이라는 속성 안에 Papa를 생성하여 상속받았기에 Papa가 가지고 있는 age라는 속성을 가지게 된다.

sam.protytpe.tall = 180
console.log(sam.tall) // >>> 180

위 처럼 꼭 객체를 생성해야하는 것이 아닌 prototype 안에 property를 추가할 수 도 있다.

확실히 문법이 자유롭다.

🥸 자바스크립트 prototype chain

위 코드에서 보듯이 sam.age의 동작은 아래처럼 이뤄진다.

sam 객체에서 age 속성을 찾음 -> 없음 -> prototype에서 찾음 -> prototype안에 Papa 객체에서 찾음 -> 출력

만약, prototype 객체의 Papa 객체에도 없었다면, Papa 객체 안의 prototype에서 찾기를 반복한다. -> 언제까지? 최상위 객체까지

 

이렇게 prototype을 연쇄적으로 찾는다 하여 이를 prototype chain이라고 부른다고 한다.

 

자바를 공부했었다면, 자바스크립트의 prototype을 어렵지 않게 이해할 수 있을 것이라고 생각한다.

 

이상 끄읕