<모던 자바스크립트 Deep Dive> 19장 프로토타입 요약

19. 프로토타입

1) 객체지향 프로그래밍

- 자바스크립트는 거의 모든 것이 객체로 이루어진 프로토타입 기반의 객체 기반의 프로그래밍 언어

- 객체지향 프로그래밍은 객체의 집합으로 프로그램을 표현하는 것

- 실체 = 객체, 속성 = 객체가 갖는 특징

- 실체가 가진 여러 속성 중 필요한 속성만을 나타내는 것이 추상화

- 객체는 다시 객체의 상태를 나타내는 데이터인 프로퍼티와, 동작을 나타내는 메서드로 표현됨

- 객체 : 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조

 

 

2) 상속과 프로토타입

- 상속 : 어떤 객체의 프로퍼티나 메서드를 다른 객체가 상속받아 그대로 사용하는 것

- 상속이 갖는 의의는 기존의 코드를 재사용함으로써 중복을 줄인다는 것임

- 자바스크립트는 프로토타입을 기반으로 상속을 구현

 

 

3) 프로토타입 객체

- 프로토타입(=프로토타입 객체)은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체

- 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가지며, 이 내부 슬롯의 값은 객체 생성 방식에 의해 결정됨

 

 

1. __proto__ 접근자 프로퍼티

- 모든 객체는 __proto__ 접근자 프로퍼티를 통해 [[Prototype]] 내부 슬롯에 간접 접근이 가능

- 객체가 직접 소유하는 프로퍼티가 아니므로, 상속을 통해 Object.prototype.__proto__ 접근자 프로퍼티 사용 가능

- 프로토타입 체인의 규칙인 단방향 링크드 리스트를 지키기 위해, __proto__ 접근자 프로퍼티를 통해 프로토타입에 접근함

- 모든 객체가 사용할 수 있는 것은 아니므로, 프로토타입의 참조를 취득하려면 Object.getPrototypeOf 메서드를, 교체하고 싶다면 Object.setPrototypeOf 메서드 사용 권장

 

 

2. 함수 객체의 prototype 프로퍼티

- 함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킴

- 단, 생성자 함수로서 호출할 수 있는 함수에게만 해당

 

 

3. 프로토타입의 constructor 프로퍼티와 생성자 함수

- 함수 객체가 생성될 때, constructor 프로퍼티는 prototype 프로퍼티로서 자신을 참조하고 있는 생성자 함수를 가리킴

// 생성자 함수
function Person(name) {
	this.name = name;
}

// 생성자 함수가 생성한 객체
const me = new Person('Lee');

// me 객체에는 constructor 프로퍼티가 없지만 생성자 함수인 Person에 의해 constructor 프로퍼티를 상속받음
console.log(me.constructor === Person); // true

 

 

4) 리터럴 표기법에 의해 생성된 객체의 생성자 함수와 프로토타입

- 리터럴 표기법에 의해 생성된 객체의 생성자 함수는 프로토타입이 존재하나, constructor 프로퍼티가 가리키는 생성자 함수가 반드시 객체를 생성한 생성자 함수와 같지는 않음

- 리터럴 표기법에 의해 생성된 객체는 Object 생성자 함수와 constructor 프로퍼티로 연결되어있는데, 이는 추상 연산에 의한 것임

- 결국 큰 틀에서 보면 리터럴 표기법에 의해 생성된 객체나 생성자 함수로 생성한 객체나 본질적인 면에서 큰 차이가 없음

- 따라서 constructor 프로퍼티를 통해 연결되어 있는 생성자 함수를 리터럴 표기법으로 생성된 객체를 생성한 생성자 함수와 똑같이 생각해도 됨

 

 

5) 프로토타입의 생성 시점

- 프로토타입과 생성자 함수는 언제나 쌍으로 존재하므로, 프로토타입은 생성자 함수가 생성되는 시점에 함께 생성됨

- 단, 생성자 함수는 다시 사용자 정의 생성자 함수와 빌트인 생성자 함수로 구분되므로 이에 따른 프로토타입 생성 시점도 구분됨

 

 

1. 사용자 정의 생성자 함수와 프로토타입 생성 시점

- 생성자 함수로 호출 가능한 함수인 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 생성됨

- 이 때 생성된 프로토타입의 프로토타입은 언제나 Object.prototype임

 

 

2. 빌트인 생성자 함수와 프로토타입 생성 시점

- 모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성되므로, 이 때 프로토타입도 생성됨

- 이 후 생성된 객체는 프로토타입을 상속받음

 

 

6) 객체 생성 방식과 프로토타입의 결정

- 프로토타입은 추상 연산 OrdinaryObjectCreate에 전달되는 인수(객체가 생성되는 시점에 객체 생성 방식에 의해 결정)에 의해 결정됨

 

 

1. 객체 리터럴에 의해 생성된 객체의 프로토타입

- 객체 리터럴에 의해 생성된 객체의 프로토타입은 추상 연산에 의해 Object.prototype임

- 객체 리터럴 내부에 프로퍼티를 추가함

 

 

2. Object 생성자 함수에 의해 생성된 객체의 프로토타입

- Object 생성자 함수에 의해 생성된 객체의 프로토타입은 추상 연산에 의해 Object.prototype임

- 빈 객체를 생성한 후 프로퍼티를 추가함

 

 

3. 생성자 함수에 의해 생성된 객체의 프로토타입

- 생성자 함수에 의해 생성된 객체의 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 객체임

 

 

7) 프로토타입 체인

- 접근하려는 객체의 프로퍼티가 존재하지 않을 때, 자바스크립트는 [[Prototype]] 내부 슬롯의 참조를 따라 부모 역할의 프로토타입의 프로퍼티를 순차적으로 검색하는데, 이를 프로토타입 체인이라 함

- 프로토타입 체인의 최상위 객체는 언제나 Object.prototype이며 이를 종점이라 칭하고, 모든 객체는 이를 상속받음

- 프로토타입 체인은 상속과 프로퍼티 검색을 위한 메커니즘임

- 스코프 체인과 프로토타입 체인은 서로 협력하여 식별자와 프로퍼티를 검색하는 데에 사용됨

 

 

8) 오버라이딩과 프로퍼티 섀도잉

- 오버라이딩 : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용함

- 프로토타입 프로퍼티와 같은 프로퍼티를 인스턴스에 추가하면, 프로토타입 프로퍼티를 덮어쓰는 것이 아니라 인스턴스의 프로퍼티로 추가되면서 프로토타입 프로퍼티는 가려지는데 이를 프로퍼티 섀도잉이라 함

- 단, 프로퍼티 삭제는 하위 객체를 통해서 할 수 없고 직접 접근해야 함

 

 

9) 프로토타입의 교체

- 프로토타입은 생성자 함수 또는 인스턴스를 통해 교체가 가능

- 프로토타입 교체는 번거로우므로 교체 권장하지 않음

- 상속 관계를 인위적으로 설정하려면 직접 상속하는 방법을 권장

 

 

1. 생성자 함수에 의한 프로토타입의 교체

- 프로토타입을 교체하면 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴되므로, contructor 프로퍼티를 다시 추가하여 되살릴 수 있음

 

 

2. 인스턴스에 의한 프로토타입의 교체

- 인스턴스의 __proto__ 접근자 프로퍼티(혹은 Object.setPrototypeOf 메서드)를 통해 프로토타입 교체 가능

- 이미 생성된 객체의 프로토타입을 교체하는 것

- 프로토타입을 교체하면, constructor 프로퍼티와 생성자 함수 간의 연결이 파괴되므로, constructor 프로퍼티를 추가하여 되살릴 수 있음

 

 

10) instanceof 연산자

- instanceof 연산자는 좌변에 객체를 가리키는 식별자, 우변에 생성자 함수를 가리키는 식별자를 피연산자로 받는 이항 연산자임

- 우변 생성자 함수의 prototype에 바인딩된 객체가, 좌변의 객체의 프로토타입 체인 상에 존재하면 true를 반환하며 그렇지 않으면 false를 반환함

- constructor 프로퍼티가 가리키는 생성자 함수를 찾는 것이 아니라, 생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는지를 확인하므로 주의

const Person = (function () {
	function Person(name) {
    	this.name = name;
    }
    
    // 생성자 함수의 prototype 프로퍼티를 통해 프로토타입 교체
    Person.prototype = {
    	sayHello() {
        	console.log(`Hi! I'm ${this.name}`);
        }
    };
    
    return Person;
}());

const me = new Person('Lee');

// instanceof는 영향을 받지 않음
console.log(me.constructor === Person); // false

// Person.prototype이 me 객체의 프로토타입 체인 상에 존재함
console.log(me instanceof Person); // true

// Object.prototype이 me 객체의 프로토타입 체인 상에 존재함
console.log(me instanceof Object); // true

 

 

11) 직접 상속

1. Object.create에 의한 직접 상속

- Object.create는 프로토타입을 지정하여 새로운 객체를 생성하면서 직접적으로 상속을 구현함

- 매개변수로 첫 번째에는 생성할 객체의 프로토타입으로 지정할 객체를, 두 번째로는 생성할 객체의 프로퍼티 키와 프로퍼티 디스크립터 객체로 이뤄진 객체를 전달

- 장점 : new 연산자 없이도 객체 생성 가능, 프로토타입을 지정하면서 객체 생성 가능, 객체 리터럴에 의해 생성된 객체도 상속받을 수 있음

 

 

2. 객체 리터럴 내부에서 __proto__에 의한 직접 상속

- Object.create 메서드에 의한 직접 상속보다 깔끔한 방법

const myProto = { x: 10 };

// Object.creat 메서드 이용
const obj = Object.create(myProto, {
	y: { value: 20, writable: true, enumerable: true, configurable: true }
});

// __proto__ 접근자 프로퍼티 이용
const obj = {
	y: 20.
    __proto__: myProto
};

 

 

12) 정적 프로퍼티/메서드

- 생성자 함수로 인스턴스를 생성하지 않아도, 참조/호출할 수 있는 프로퍼티와 메서드를 뜻함

- 생성자 함수가 생성한 인스턴스로 참조/호출 불가능(인스턴스의 프로토타입 체인에 속한 객체의 프로퍼티와 메서드가 아님)

- 인스턴스나 프로토타입 메서드 내에서 this를 통해 인스턴스를 참조할 필요가 없다면, 정적 메서드로 변경 가능

- 정적 프로퍼티와 메서드, 프로토타입 프로퍼티와 메서드는 표기법이 다르므로 구별 필요 ex. 정적 메서드 Object.is() / 프토토타입 메서드 Object.prototype._defineGetter_()

 

 

13) 프로퍼티 존재 확인

1. in 연산자

- 객체 내에 특정 프로퍼티가 존재하는지 여부를 확인

key in object
// key - 프로퍼티 키를 나타내는 문자열, object - 객체로 평가되는 표현식

- 확인 대상 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인하므로 주의

- ES6에서는 in 연산자 대신 Reflect.has 메서드 사용 가능

 

 

2. Object.prototype.hasOwnProperty 메서드

- 객체에 특정 프로퍼티가 존재하는지 확인 가능

- 인수로 전달받은 프로퍼티 키가 객체 고유의 프로퍼티 키인 경우에만 true를 반환하며, 상속일 경우 false를 반환

 

 

14) 프로퍼티 열거

1. for...in 문

- 객체의 모든 프로퍼티를 순회하며 열거할 때에 사용

for (변수선언문 in 객체) {...}

- 프로퍼티의 개수만큼 순회

- 변수선언문에 선언한 변수에 프로퍼티 키를 할당

- 상속받은 프로토타입의 프로퍼티까지 열거(단, [[Enumerable]]의 값이 false인 경우 열거하지 않음)

- 상속받은 프로토타입의 프로퍼티를 제외하려면 Object.protytpe.hasOwnProperty 메서드를 사용하여 확인 필요

- 배열에는 for...in 문 대신 일반적인 for 문 혹은 Array.prototype.forEach 메서드 사용 권장

 

 

2. Object.keys/values/entries 메서드

- 객체 자신의 고유 프로퍼티만 열거하려면 Object.keys/values/entries 메서드 사용 권장

- Object.keys는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환

- ES8에서 도입된 Object.values는 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환

- ES8에서 도입된 Object.entries는 객체 자신의 열거 가능한 프로퍼티 키와 값의 쌍의 배열을 배열에 담아 반환

 

 

 

 

 

 

참고 : 도서 <모던 자바스크립트 Deep Dive>