자바스크립트 - 프로토타입

프로토 타입

---

ECMAScript 에서 클래스 정의를 위한 문법을 지원하더라도 ECMAScript 오브젝트는 기본적으로 클래스 기반의 언어인 C++, 자바 같은 언어와는 다르다.

자바스크립트에서는 리터럴 형식으로 오브젝트를 생성하는 방식과 constructor 를 이용한 오브젝트 생성 방법이 있다. constructor는 prototype 속성을 가지고 있는 function이다. prototype 속성은 프로토타입 기반 상속과 공유 속성을 구현하기 위해 사용된다.

new 연산자를 사용하여 객체를 생성할 수 있는데, new 연산자 없이 constructor 를 호출하게 된다면 해당 함수에 정의된 constructor 에 따라 작동을 하게 된다.

var dateOfMeeting = new Date(2019, 12, 2) 
// Thu Jan 02 2020 00:00:00 GMT+0900 (한국 표준시)

var toDay = Date();
// Sun Dec 01 2019 23:10:14 GMT+0900 (한국 표준시) -- 현재시간이 노출됨

// 위의 예를 참조로 하면 Date() 는 Date객체를 반환하지 않고 현재 시간을 표현한 스트링 문자열을 생성한다.

construct에 의해 생성된 모든 객체들은 암묵적으로 constructor의 prototype 필드에 대한 레퍼런스를 가지고 있다. 이 프로토타입은 는 null이 아닌 해당 객체에 대한 프로토타입 레퍼런스를 가지게 되는데 이것을 프로토타입 체인이라고 한다.

예를 들어 한 오브젝트에서 name이라는 속성을 찾으려 한다면 처음 대상으로 했던 객체에서 name 속성을 찾고 없으면 해당 객체의 prototype을 타고 상위 프로토타입에서 name 속성을 찾는 식으로 값을 찾는다.

var parent = {
name : 'testName'
}

var child = {};

child.__proto__ = parent; // 프로토 타입 체이닝

console.log(child.name); // 'testName'

---

프로토 타입의 확장

프로토타입 객체도 객체이므로 일반 객체와 동일하게 프로퍼티를 추가하거나 삭제할 수 있다. ?? [[prototype]] 객체의 데이터 프로퍼티는 get은 할 수 있지만 set 액세스는 허용이 되지 않는다.. 라고 나와있는데 좀더 자세히 봐야 할것 같다.

// 프로토 타입의 확장
function menbungCreator(name) {
  this.name = name;
}

var me = new menbungCreator('no_dap');

menbungCreator.prototype.scream = function() {
  console.log(`${me.name} ;;`);
}

me.scream(); // no_dap ;;
// 프로토타입에 추가된 메서드를 실행할 수 있다.

프로토타입은 객체에만 존재하지만 자바스크립트에서 문자열은 객체처럼 동작하므로 문자열도 프로토타입 확장이 가능하다.

var str = 'test';

String.prototype.me = function() {
console.log('javascript hell');
}

str.me(); // javascript hell
// String 프로토타입에 메서드 정의 후 실행 할 수 있다.

---

프로토타입 체인 동작 조건

프로토 타입 체인은 값을 참조할 경우에만 동작하며 값을 할당 하는 경우에는 프로토 타입 체인이 동작하지 않는다. 왜냐하면 자바스크립트에서는 객체에 해당 프로퍼티가 없으면 동적으로 추가하기 때문.