1. 프로토타입 (Prototype)
- 자바스크립트는 원형 객체로 새로운 객체를 생성하는 프로토타입 기반 언어다.
- 따라서 자바스크립트의 동작 원리를 이해하기 위해서는 프로토타입의 개념을 잘 이해하고 있어야 한다!
자바스크립트는 프로토타입 기반 언어이다.
- 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미이다.
프로토타입 객체? 👨👩
- 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다.
- 자식 객체는 부모 객체의 프로퍼티(속성) 또는 메서드를 상속받아 사용할 수 있게 한다.
이러한 부모 객체를 프로토타입 객체, 줄여서 프로토타입이라 한다.
자식 객체가 부모 객체의 속성 또는 메서드를 상속받아 사용할 수 있게 한다.
- 우리는 배열 자료형을 만들고, 배열의 끝에 하나 이상의 요소를 추가할 때
push()메서드를 사용한다.const arr = [1, 2, 3, 4]; arr.push(5); // 5 (배열의 새로운 길이를 반환) console.log(arr); // [1, 2, 3, 4, 5] - 여기서 궁금증이 하나 생길 수 있다.
🤔 :arr에 이런 메서드를 추가해준 적이 없는데 어떻게 사용이 가능한걸까?
- 자바스크립트에서 배열을 만들 때는 또 다른 방법이 있다.
- 바로
new 생성자함수명()을 사용해서 새로운 객체를 생성하는 것이다.const arr = new Array(1, 2, 3, 4); arr.push(5); // 5 (배열의 새로운 길이를 반환) console.log(arr); // [1, 2, 3, 4, 5] - 처음 예시에서는
arr라는 변수를 배열 리터럴([])로 생성했지만
내부적으로는new Array()로 새로운Array객체를 생성한 것이다. (참고링크)
프로토타입 프로퍼티(속성)
- 그리고 이
push()메서드는Array의prototype프로퍼티에 속성으로써 정의되어 있다.
확인하기 위해 개발자도구 창에Array.prototype를 검색해보자!
push()메서드 외에도 다양한 내장 메서드들이 존재하는 것을 알 수 있다. 👀
- 다시말해,
new키워드로 생성자 함수를 사용해 객체를 만들면 생성자 함수의prototype프로퍼티와 새롭게 만들어진 객체 인스턴스 사이에는 일종의 연결고리가 생긴다.
- 즉,
Array라는 부모 객체(프로토타입)가 있고, 자식인arr가Array에게 메서드를 상속받아 사용할 수 있게 된 것이다.
__proto__ 프로퍼티(속성)
__proto__프로퍼티에 접근하면 내부적으로Object.getPrototypeOf가 호출되어 프로토타입 객체를 반환한다.
arr객체는__proto__프로퍼티로 자신의 부모 객체인Array.prototype을 가리키고 있다.
2. 프로토타입과 클래스
-
OOP 패턴으로 구현한 Human 예시
class Human { constructor(name, age) { this.name = name; this.age = age; } sleep() { console.log(`${this.name}은 잠에 들었습니다`); } } // 생성자 함수를 이용해 객체를 생성한다. new 키워드를 이용한다. let kimcoding = new Human('김코딩', 30); -
Human클래스의 생성자(constructor) 함수는Human이다.Human.prototype.constructor === Human; // ture 클래스 -
Human클래스의prototype은Human클래스의 인스턴스인kimcoding의__proto__이다.Human.prototype === kimcoding.__proto__; // ture 프로토타입 -
Human클래스의sleep메서드는prototype에 있으며,Human클래스의 인스턴스인kimcoding에서kimcoding.sleep으로 사용할 수 있다.Human.prototype.sleep === kimcoding.sleep; // ture 인스턴스- 클래스
Human과 인스턴스kimcoding,prototype(프로토타입)의 관계
- 클래스
