[Group Study, 모던 자바스크립트 Deep Dive] - 19 프로토타입 Part1

 

Group study background

나만 그런건지는 모르겠지만, 실무를 하다보면 잊어버리는 개념들이 있다.

가끔 FE 뉴비나 novice인분들에게 질문을 받는데, 아리송 할때만큼 쪽팔릴때가 없었다.

인간은 망각의 동물이라고 교수님께서 말씀하셨지만 반복 학습의 힘을 믿는다. React 오픈카톡방에서 모집한 스터디원분들과 함께 "모던 자바스크립트 Deep Dive" 1권 톺아보기를 시작한다!

 

정보 전달용이 아닌 개인 스터디 레코딩용 포스트입니다.

---

Preface 

 자바스크립트는 명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 프로그래밍 언어이다.(가장 논쟁이 많이 되는 주제 중 하나) C++이나 Java처럼 캡슐화를 위한 키워드인 public, private, protected 등이 없어 오늘도 역시...언급되는 근본없는 언어 취급+객체지향언어가 아니라고 오해를 받는다. 하지만 프로토타입 기반의 객체지향 프로그래밍 언어이다.

 

ES6에서 클래스가 도입되었다. 하지만 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새로운 객체지향 모델을 제공하는 것은 아니다. 클래스도 함수이기 때문에 기존 프로토타입 기반 패턴의 Sytax Sugar이라고 할 수 있다. 클래스와 생성자 함수 모두 프로토타입 기반의 인스턴스를 생성하지만 정확히 동일하게 동작하지는 않는다. 클래스는 생성자 함수보다 엄격하고 생성자 함수에서 제공하지 않는 기능도 제공한다.

 

---

19.1 객체지향 프로그래밍

 객체지향 프로그래밍은 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다. 여기에서 쓰이는 추상화는 "사물이나 개념"의 다양한 속성 중에서 프로그램에 필요한 속성만 간추려내어 표현하도록 한다.

 즉, 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 개체라 하고, 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다.

[예제 19-01]

const circle = {
  radius: 5,
  getDiameter() {
    return 2*this.radius
  },
  getPerimeter() {
    return 2*Math.PI*this.radius
  },
  getArea() {
    return Math.PI * this.radius**2
  },
}

 위의 예제처럼 객체지향 프로그래밍은 객체의 상태(State)를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작(behavior)을 하나의 논리적인 단위로 묶ㅇ 생각한다. 따라서 객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다. 

 각 객체는 고유의 기능을 갖는 독립적인 부품으로 볼 수 있지만 자신의 고유한 기능을 수행하면서 다른 객체와 관계성을 가질 수 있다. 다른 객체와 메세지를 주고 받거나 데이터를 처리할 수도 있다. 또는 다른 객체의 데이터나 동작을 상속받아 사용하기도 한다.

---

19.2 상속과 프로토타입

 상속은 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말한다. 

 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거하고 코드를 재사용한다. 

[예제 19-02]

function Circle(radius) {
 this.radius = radius;
 this.getArea = function() { return Math.PI * this.radius**2 }
}

const circle1 = new Circle(1)
const circle2 = new Circle(2)

// Circle 생성자 함수는 인스턴스를 생성할 때마다 동일한 동작을 하는
// getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.
// getArea 메서드는 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다.
console.log(circle1.getArea == circle2.getArea)

Circle 생성자 함수는 인스턴스를 생성할 때마다 getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다.

[그림 19-01] 메서드 중복 생성

 

아래 예제처럼 자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거할 수 있다. 상속은 코드의 재사용이란 관점에서 매우 유용하다. 

[예제 19-03]

function Circle(radius) {
 this.radius = radius;
}

// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를
// 공유해서 사용할 수 있도록 프로토타입에 추가한다.
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩 되어 있다.
Circle.prototype.getArea = function() {
  return Math.PI * this.radius ** 2
}

const circle1 = new Circle(1)
const circle2 = new Circle(2)


// Circle 생성자 함수가 생성한 모든 인스턴스는 부모 객체의 역할을 하는 프로토타입
// Circle.prototype으로부터 getArea 메서드를 상속받는다.
// 즉, Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유한다.
console.log(circle1.getArea == circle2.getArea)

 

[그림 19-02] 상속에 의한 메서드 공유

---

19.3 프로토타입 객체

 프로토타입 객체란 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다. 프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티와 메서드를 제공한다. 이를 상속받은 하위(자식) 객체는 상위 객체의 프로퍼티를 자유롭게 사용할 수 있다.

 모든 객체는 [[Prototype]]이라는 내부 슬롯을 가진다. 모든 객체는 하나의 프로토타입을 가지고 모든 프로토타입은 생성자 함수와 연결되어 있다. 객체와 프로토타입 그리고 생성자 함수는 아래 그림처럼 연결되어 있다.

[그림 19-03] 객체와 프로토타입과 생성자 함수는 서로 연결되어 있다.

 

19.3.1  __proto__ 접근자 프로퍼티

 모든 객체는 __proto__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 갑적적으로 접근할 수 있다.

[그림 19-04]

__proto__ 는 접근자 프로퍼티다

내부 슬롯은 프로퍼티가 아니다. 따라서 자바스크립트는 원칙적으로 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않는다. 단 일부 내부 슬롯과 내부 메서드에 한하여 __proto__ 접근자 프로퍼티를 통해 간접적으로 [[Prototype]] 간접적으로 접근할 수 있는 수단을 제공하기는 한다.

 

__proto__ 는 접근자 프로퍼티는 상속을 통해 사용된다.

__proto__ 접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니라 Object.prototype의 프로퍼티다.  모든 객체는 상속을 통해 Object.prototype.__proto__ 접근자 프ㅗ퍼티를 사용할 수 있다.

[예제 19-04]

const person = { name: 'Daniel' }

console.log(person.hasOwnProperty('__proto__')) //false

console.log(Obect.getOwnPropertyDescriptor(Object.property, '__proto'))
// {get:f, set:f, enumerable: true, configurable: true}


console.log({}.__proto === Object.protoptye) // true

__proto__ 는 접근자 프로퍼티를 통해 프로토타입에 접근하는 이유

[[Prototype]] 내부 슬롯의 값, 즉 프로토타입에 접근하기 위해 접근자 프로퍼티를 사용하는 이유는 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서다.

[예제 19-05]

const person = {}
const child = {}

child.__proto__ = parent
parent.__proto__ = child // TypeError: Cyclic __proto__ value

 

위 예제에서는 parent 객체를 child 객체의 프로토타입으로 성정한 후, child 객체를 parent 객체의 프로토타입으로 설정했다. 이러한 코드가 에러 없이 정상적으로 처리되면 서로가 자신의 프로토타입이 되는 비정상적인 프로토타입 체인이 만들어지기 떄문에 __proto__ 접근자 프로퍼니는 에러를 발생시킨다.  따라서 프로토타입 체인은 단방향 링크드 리스트로 구현됭야 한다.

 

__proto__ 접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다.

모든 객체가 __proto__ 접근자 프로퍼티를 사용할 수 있는 것은 아니다. 

[예제 19-06]

// ojb는 프로토타입 체인의 종점이다. 따라서 Object.__proto__를 상속 받을 수 없다.
const obj = Obect.create(null);

// obj는 Object.__proto__를 상속받을 수 없다.
console.log(obj.__proto__) // undefined

// 따라서 __proto__보다 Object.getPrototypeOf 메서드를 사용하는 편이 좋다.
console.log(Object.getPropertyOf(obj)) //null

 따라서 __proto__ 접근자 프로퍼티 대신 프로포타입의 참조를 취득하고 싶은 경우에는 Object.getPropertyOf 메서드를 사용하고, 프로토타입을 교체하고 싶은 경우에는 Object.setPrototypeOf 메서드를 사용할 것을 권장한다.

19.3.2 함수 객체의 prototype 프로퍼티

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

[예제 19-07]

(function() {}).hasOwnProperty('prototype') // true

({}).hasOwnProperty('prototype') // false

 모든 객체가 가지고 있는(Object.prototype으로부터 상속) __proto__ 접근자 프로퍼티와 함수 객체만이 가지고 있는 prototype 프로퍼티는 결국 동일한 프로토타입을 가리킨다.

[표 19-01]

[예제 19-08]

function Person(name) {
 this.name = name;
}

const me = new Person('Daniel');

console.log(Person.prototype === me.__proto__) // true

[그림 19-05]

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

모든 프로토타입은 constructor 프로퍼티를 갖는다. 이 constructor 프로퍼티는 prototype 프로퍼티로 자신을 참고하고 있는 생성자 함수를 가리킨다. 이 연결은 생성자 함수가 생성될 때, 즉 함수 객체가 생성될 때 이뤄진다.

[그림 19-06]

---

19.4 리터럴 표기법에 의한 생성된 객체의 생성자 함수의 프로토타입

 생성자 함수에 의해 생성된 인스턴스는 프로토타입의 constructor 프로퍼티에 의해 생성자 함수와 연결된다. 이때 constructor 프로퍼티가 가리키는 생성자 함수는 인스턴스를 생성한 생성자 함수다.

 리터럴 표기법(객체 리터럴, 함수 리터럴, 배열 리터럴, 정규 표현식 리터럴 등)에 의해 생성된 객체는 생성자 함수에 의해 생성된 객체는 아니다. 하지만 큰 틀에서 생각해 보면 리터럴 표기법으로 생성한 객체도 생성자 함수로 생성한 객체와 본질적인 면에서 큰 차이가 없다. 프로포타입과 생성자 함수는 단독으로 존재할 수 없고 쌍으로 존재하기 때문이다.

---

19.5 프로토타입의 생성 시점

프로토타입은 생ㅇ성자 함수가 생성되는 시점에 더불어 생성된다. 

19.5.1 사용자 정의 생성자 함수와 프로포타입 생성 시점

생성자 함수로서 호출할 수 있는 함수, 즉 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로포타입도 더불어 생성된다. 함수 선언문은 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행된다.  따라서 함수 선언문으로 정의된 Person 생성자 함수는 어떤 코드보다 먼저 평가되어 함수 객체가 되고 프로토타입도 더불어 생성된다.

[그림. 19-07]

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

모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성된다. 생성된 프로토타입은 빌트인 생성자 함수의 prototype 프로퍼티에 바인딩된다.

[그림. 19-08]

---

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

추상 연산 OrdinaryObjectCreate는 필수적으로 자신이 생성할 객체의 프로토타입을 인수로 전달 받는다. 그리고 자신이 생성할 객체에 추가할 프로퍼티 목록을 옵션으로 전달할 수 있다. 추상 연산 OrdinaryObjectCreate는 빈 객체를 생성한 후, 객체에 추가할 프로퍼티 목록이 인수로 전달된 경우 프로퍼티를 객체에 추가한다. 그리고 인수로 전달받은 프로토타입을 자신이 생성한 객체의 [[Prototype]] 내부 슬롯에 할당한 다음, 생성한 객체를 반환한다.

 즉, Prototype은 추상 연산 OrdinaryObjectCreate에 전달되는 인수에 의해 결정된다.

19.6.1 객체 리터럴에 의해 생성된 객체의 프로포타입

자바스크립트 엔진은 객체 리터럴을 평가하여 객체를 생성할 때 추상 연산 OrdinaryObjectCreate를 Object.prototpye을 인수로 호출한다. 

[그림 19-09]

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

Object 생성자 함수를 인수 없이 호출하면 빈 객체가 생성되고 마찬가지로 Object.prototpye을 인수로 OrdinaryObjectCreate  호출된다. 

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

new 연산자와 함께 생성자 함수를 호출하여 인스턴스를 생성하면 다른 객체 생성 방식과 마찬가지로 OrdinaryObjectCreate이 호출된다. 이때 OrdinaryObjectCreate에 전달되는 프로토타입은 생성자 함수의 prototpye 프로퍼티에 바인딩 되어 있는 객체다. 

[그림 19-10]

프로토타입 Person.prototpye에 프로퍼티를 추가하여 하위 객체가 상속받을 수 있도록 테스트 해본다. 이렇게 추가/삭제된 프로퍼티는 프로토타입 체인에 즉각 반영된다.

[예제 19-09]

function Person(name) {
  this.name = name
}


Person.prototype.sayHello = function () { console.log('무.야.호, ' + this.name)}

const me = new Person('Daniel')
const you = new Person('You')

[그림 19-11]