자바스크립트의 프로토타입 (Javascript prototype)

자바스크립트에는 프로토타입이라는 개념이 있다.

 

자바스크립트 내의 객체들은 프로토타입으로부터 메서드와 속성을 상속받는다....라고만 하면 알아듣기 어려우니까

 

코드를 직접 보자.

---

예시로, 배열을 만들면 배열객체에 사용할 수 있는 메서드들이 있다. 이걸 어디서 설정해둔걸까?

---

우리가 코딩을 하다보면 수많은 메서드를 사용하는데

 

위에 있는 캡처처럼 배열의 .push() 라던가, .length() 라던가...  코딩하면서 수없이 사용하는 것들이다.

 

근데 이렇게 객체 뒤에 '.' 붙이는 거.... 어디서 많이 보던 문법이지 않은가?

 

그렇다. 객체의 프로퍼티를 참조할때 쓰는 문법이다.

let obj = {};
obj.name = "John";
console.log(obj.name); // "John"

이런식으로 우리는 객체에 . 을 붙여서 객체의 프로퍼티를 추가하거나 조회할 수 있다.

 

.length() 나 .push() 같은 메서드들도 똑같이 배열객체에 추가된 프로퍼티 중 하나인 것이다.

 

그리고 이 프로퍼티들을 다 가지고 있는 놈이 프로토타입(Prototype) 객체라는 놈이다.

---

Array 객체의 prototype 프로퍼티를 참조하면 이런식으로 나온다.

---

근데 내가 만든건 프로토타입 객체가 아니라 그냥 임의의 배열인데?

 

모든 객체는 프로토타입으로부터 프로퍼티를 상속받는다.

 

배열을 만들면 Array 프로토타입 객체의 프로퍼티를 상속받아 사용할 수 있게 되는것이다.

 

이를 잘 응용하면 프로토타입에 속성을 추가하여 사용할 수 도 있다.

---

String.prototype.capitalizeFirstLetter = function () {
	return this.charAt(0).toUpperCase() + this.slice(1);
};

"hello".capitalizeFirstLetter(); // "Hello"

---

이런식으로 자주 쓰는 함수들을 프로토타입에 추가하여 사용해 보자!