JS DeepDive 19장 프로토타입

한칙촉·2024년 4월 15일

JavaScript

모던 자바스크립트 딥다이브

목록 보기

16/19

자바스크립트

명령형, 함수형, 프로토타입 기반, 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어
자바스크립트를 이루고 있는 거의 "모든 것"이 객체

객체지향 프로그래밍

= 여러 개의 독립적 단위, 즉 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임

속성 = 실체를 인식하거나 구별
추상화 = 다양한 속성 중에서 프로그램에 필요한 속성만 간추려 내어 표현
객체 = 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조

상속과 프로토타입

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

// 생성자 함수
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);

console.log(circle1.getArea === circle2.getArea); // false

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

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
}

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

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

// Circle 생성자 함수가 생성하는 모든 인스턴스는 하나의 getArea 메서드를 공유
console.log(circle1.getArea === circle2.getArea); // true

getArea 메서드는 모든 인스턴스가 동일한 내용의 메서드를 사용하므로 단 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직함

→ 자신의 상태를 나타내는 radius 프로퍼티만 개별적으로 소유하고 내용이 동일한 메서드는 상속을 통해 공유하여 사용

프로토타입 객체

객체지향 프로그래밍의 근간을 이루는 객체 간 상속 구현을 위해 사용
어떤 객체의 상위 객체의 역할을 하는 객체로서 다른 객체에 공유 프로퍼티를 제공
모든 객체는 하나의 프로토타입을 가짐
모든 프로토타입은 생성자 함수와 연결되어 있음

prototype 접근자 프로퍼티

1. __prototype__는 접근자 프로퍼티

모든 객체는 __prototype__ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근 가능

접근자 프로퍼티 = 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수([[Get]], [[Set]] 프로퍼티 어트리뷰트)로 구성됨

2. __prototype__ 접근자 프로퍼티는 상속을 통해 사용됨

모든 객체는 상속을 통해 Object.prototype.__proto__ 접근자 프로퍼티 사용 가능

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

상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지
프로토타입 체인은 단방향 링크드 리스트로 구현되어야 함
→ 프로퍼티 검색 방향이 한쪽 방향으로만 흘러가야 함

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

프로토타입의 참조를 취득하고 싶은 경우에는 Object.getPrototypeOf 메서드를 사용하고, 프로토타입을 교체하고 싶은 경우에는 Object.setPrototypeOf 메서드를 사용할 것을 권장

함수 객체의 prototype 프로퍼티

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

// 함수 객체는 prototype 프로퍼티를 소유
(function () {} ).hasOwnProperty('prototype'); → true

// 일반 객체는 prototype 프로퍼티를 소유하지 않음
({}).hasOwnProterty('prototype'); → false

모든 객체가 가지고 있는 __prototype__ 접근자 프로퍼티와 함수 객체만이 가지고 있는 prototype 프로퍼티는 결국 동일한 프로토타입을 가리키지만 이를 사용하는 주체가 다름

구분	소유	값	사용 주체	사용 목적
__prototype__	모든 객체	프로토타입의 참조	모든 객체	객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용
prototype 프로퍼티	constructor	프로토타입의 참조	생성자 함수	생성자 함수가 자신이 생성할 객체의 프로토타입을 할당하기 위해 사용

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

constructor 프로퍼티 = prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수

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

const me = new Person('Lee');

// me 객체의 생성자 함수는 Person임
console.log(me.constructor === Person); // true

me 객체의 프로토타입의 constructor 프로퍼티를 통해 생성자 함수와 연결됨
→ me 객체는 프로토타입인 Person.prototype의 constructor 프로퍼티를 상속받아 사용 가능

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

// obj 객체는 Object 생성자 함수로 생성한 객체가 아니라 객체 리터럴로 생성했음
const obj = {};

// 하지만 obj 객체의 생성자 함수는 Object 생성자 함수임
console.log(obj.constructor === Object); // true

// 인수가 전달되지 않았을 때 추상 연산 OrdinaryObjectCreate를 호출하여 빈 객체를 생성
let obj = new Object();
console.log(obj); // {}

// new.target이 undefined나 Object가 아닌 경우
// 인스턴스 → Foo.prototype → Object.prototype 순으로 프로토타입 체인이 생성됨
class Foo extends Object {}
new Foo(); // Foo {}

// 인수가 전달된 경우에는 인수를 객체로 변환
// Number 객체 생성
obj = new Object(123);
console.log(obj); // Number {123}

// String 객체 생성
obj = new Object('123');
console.log(obj); // String {"123"}

객체 리터럴에 의해 생성된 객체는 Object 생성자 함수가 생성한 객체가 아님

리터럴 표기법에 의해 생성된 객체도 상속을 위해 프로토타입이 필요
→ 리터럴 표기법에 의해 생성된 객체도 가상적인 생성자 함수를 가짐
프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재

프로토타입의 생성 시점

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성됨
(생성자 함수는 사용자 정의 생성자 함수와 빌트인 생성자 함수로 구분)

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

생성자 함수로서 호출할 수 있는 함수, 즉 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성됨
생성자 함수로서 호출할 수 없는 함수, 즉 non-constructor는 프로토타입이 생성되지 않음
생성된 프로토타입의 프로토타입은 언제나 Object.prototype

// 화살표 함수는 non-constructor
const Person = name => {
  this.name = name;
};

// non-constructor는 프로토타입이 생성되지 않음
console.log(Person.prototype); // undefined

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

모든 빌트인 생성자 함수는 전역 객체가 생성되는 시점에 생성됨
생성자 함수 또는 리터럴 표기법으로 객체를 생성하면 프로토타입은 생성된 객체의 [[Prototype]] 내부 슬롯에 할당됨
→ 생성된 객체는 프로토타입을 상속받음

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

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

const obj = { x: 1 };

// 객체 리터럴에 의해 생성된 obj 객체는 Object.prototype을 상속받음
console.log(obj.consturctor === Object); // true
console.log(obj.hasOwnProperty('x')); // true

obj 객체는 constructor 프로퍼티와 hasOwnProperty 메서드 등을 소유하지 않지만 자신의 자산인 것처럼 자유롭게 사용 가능
obj 객체가 자신의 프로토타입인 Object.prototype 객체를 상속받았기 때문임

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

const obj = new Object();
obj.x = 1;

// Object 생성자 함수에 의해 생성된 obj 객체는 Object.prototype을 상속받음
console.log(obj.constructor === Object); // true
console.log(obj.hasOwnProperty('x')); // true

Object 생성자 함수 방식은 빈 객체를 생성한 이후 프로퍼티를 추가해야 함
객체 리터럴 방식은 객체 리터럴 내부에 프로퍼티를 추가함

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

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

Person.prototype.sayHello = function () {
  console.log(`Hi! My name is ${this.name}`);
};

const me = new Person('Lee');
const you = new Person('Kim');

me.sayHello(); // Hi! My name is Lee
you.sayHello(); // Hi! My name is Kim

사용자 정의 생성자 함수 Person과 더불어 생성된 프로토타입 Person.prototype의 프로퍼티는 constructor 뿐임
프로토타입은 객체이므로 일반 객체와 같이 프러퍼티 추가, 삭제가 가능
추가, 삭제된 프로퍼티는 프로토타입 체인에 즉각 반영됨

프로토타입 체인

객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색함 = 프로토타입 체인
= 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 매커니즘

프로토타입 체인의 최상위에 위치하는 객체는 언제나 Object.prototype
Object.prototype = 프로토타입 체인의 종점(end of prototype chain)

프로토타입 체인 = 상속과 프로퍼티 검색을 위한 매커니즘
스코프 체인 = 식별자 검색을 위한 매커니즘

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

const Person = (function () {
  // 생성자 함수
  function Person(name) {
    this.name = name;
  }
  
  // 프로토타입 메서드
  Person.prototype.sayHello = function () {
    console.log(`Hi! My name is ${this.name}`);
  };
  
  // 생성자 함수를 반환
  return Person;
}());

const me = new Person('Lee');

me.sayHello = function () {
  console.log(`Hey! My name is ${this.name}`);
};

// 인스턴스 메서드가 호출됨
// 프로토타입 메서드는 인스턴스 메서드에 의해 가려짐
me.sayHello(); // Hey! My name is Lee

프로퍼티 섀도잉 = 상속 관계에 의해 프로퍼티가 가려지는 현상
오버라이딩 = 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용
오버로딩 = 함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서드를 구별하여 호출

// 인스턴스 메서드를 삭제
delete me.sayHello;
// 인스턴스에는 sayHello 메서드가 없으므로 프로토타입 메서드가 호출됨
me.sayHello(); // Hi! My name is Lee

// 프로토타입 체인을 통해 프로토타입 메서드가 삭제되지 않음
delete me.sayHello;
// 프로토타입 메서드가 호출됨
me.sayHello(); // Hi! My name is Lee

하위 객체를 통해 프로토타입에 get 엑세스는 허용되나 set 액세스는 허용되지 않음
프로토타입 체인으로 접근하는 것이 아니라 프로토타입에 직접 접근해야함

delete Person.prototype.sayHello;
me.sayHello(); // TypeError: me.sayHello is not a function

프로토타입의 교체

프로토타입은 임의의 다른 객체로 변경할 수 있음
= 부모 객체인 프로토타입 동적 변경 가능

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

const Person = (function () {
  function Person(name) {
    this.name = name;
  }
  
  // 생성자 함수의 Prototype 프로퍼티를 통해 프로토타입 교체
  Person.prototype = {
    // constructor 프로퍼티와 생성자 함수 간의 연결을 설정
    constructor: Person,
    sayHello() {
      console.log(`Hi! My name is ${this.name}`);
    }
  };
  
  return Person;
}()};

const me = new Person('Lee');

// constructor 프로퍼티가 생성자 함수를 가리킴
console.log(me.constructor === Person); // true
console.log(me.constructor === Object); // true

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

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

const me = new Person('Lee');

// 프로토타입으로 교체할 객체
const parent = {
  // constructor 프로퍼티와 생성자 함수 간의 연결 설정
  constructor: Person,
  sayHello() {
    console.log(`Hi! My name is ${this.name}`);
  }
};

// 생성자 함수의 prototype 프로퍼티와 프로토타입 간의 연결 설정
Person.prototype = parent;

// me 객체의 프로토타입을 parent로 교체
Object.setPrototypeOf(me, parent);
// 위의 코드는 me.__proto__ = parent; 와 동일하게 동작

me.sayHello(); // Hi! My name is Lee

// constructor 프로퍼티가 생성자 함수를 가리킴
console.log(me.constructor === Person); // true
console.log(me.constructor === Object); // false

// 생성자 함수의 prototype 프로퍼티가 교체된 프로토타입을 가리킴
console.log(Person.prototype === Object.getPrototypeOf(me)); // true

instanceof 연산자

객체 instanceof 생성자 함수

우변의 생성자 함수의 prototype에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true, 아닌 경우 false로 평가됨

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

const me = new Person('Lee');

// 프로토타입으로 교체할 객체
const parent = { };

// 프로토타입의 교체
Object.setPrototypeOf(me, parent);

// Person 생성자 함수와 parent 객체는 연결되어 있지 않음
console.log(Person.prototype === parent); // false
console.log(parent.constructor === Person); // false

// parent 객체를 Person 생성자 함수의 prototype 프로퍼티에 바인딩
Person.prototype = parent;

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

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

prototype이 null이면 프로토타입 체인의 종점에 다다른 것임
생성자 함수에 의해 프로토타입이 교체되어 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴되어도 instanceof에는 아무 영향 X
= 생성자 함수의 prototype 프로퍼티와 프로토타입 간의 연결은 파괴 X

직접 상속

Object.create에 의한 직접 상속

첫번째 매개변수 : 생성할 객체의 프로토타입
두번재 매개변수 : 생성할 객체의 프로퍼티 키와 프로퍼티 디스크립터 객체로 이뤄진 객체

Object.create 메서드는 첫번째 매개변수에 전달한 객체의 프로토타입 체인에 속하는 객체를 생성
→ 객체를 생성하면서 직접적으로 상속을 구현하는 것

new 연산자가 없어도 객체 생성 가능
프로토타입을 지정하면서 객체 생성 가능
객체 리터럴에 의해 생성된 객체도 상속받기 가능

프로토타입 체인의 종점에 위치하는 객체는 Object.prototype의 빌트인 메서드 사용 불가
Object.prototype.hasOwnProperty.call(obj,'a'); 와 같이 간접적으로 호출하는 것이 좋음

객체 리터럴 내부에서 prototype에 의한 직접 상속

const myProto = { x: 10 };

const obj = {
  y: 20,
  __proto__: myProto
};

console.log(obj.x, obj.y); // 10 20
console.log(Object.getPrototypeOf(obj) === myProto); // true

__proto__ 접근자 프로퍼티를 사용하여 직접 상속 구현 가능

정적 프로퍼티/메서드

= 생성자 함수로 인스턴스를 생성하지 않아도 참조/호출이 가능한 프로퍼티/메서드
(생성자 함수가 생성한 인스턴스로 참조/호출 불가능)

function Foo() {}


// 프로토타입 메서드
// this를 참조하지 않는 프로토타입 메서드는 
// 정적 메서드로 변경하여도 동일한 효과를 얻음
Foo.prototype.x = function() {
  console.log('x');
};

const foo = new Foo();
// 프로토타입 메서드를 호출하려면 인스턴스를 생성해야 함
foo.x(); // x

// 정적 메서드
Foo.x = function() {
  console.log('x');
};

// 정적 메서드는 인승텅ㄴ스를 생성하지 않아도 호출 가능
Foo.x(); // x

프로퍼티 존재 확인

in 연산자 : 객체 내에 특정 프로퍼티가 존재하는지 확인
Object.prototype.hasOwnProperty : 객체에 특정 프로퍼티가 존재하는지 확인
= 인수로 전달받은 프로퍼티 키가 객체 고유의 프로퍼티 키인 경우에만 true 반환

프로퍼티 열거

for ...in 문 : 객체의 모든 프로퍼티를 순회하며 열거
([[Enumerable]] 값이 true인 프로퍼티 / 프로퍼티 키가 심벌인 프로퍼티는 열거 X)
Object.keys/values/entries 메서드 : 객체 자신 고유 프로퍼티만 열거
Object.enteries 메서드 : 객체 자신의 열거 가능한 프로퍼티 키와 값의 쌍의 배열을 배열에 담아 반환

한칙촉

빙글빙글돌아가는..

이전 포스트

JS DeepDive 18장 함수와 일급 객체

다음 포스트

JS DeepDive 19장 프로토타입

모던 자바스크립트 딥다이브

객체지향 프로그래밍

상속과 프로토타입

프로토타입 객체

prototype 접근자 프로퍼티

1. prototype는 접근자 프로퍼티

2. prototype 접근자 프로퍼티는 상속을 통해 사용됨

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

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

함수 객체의 prototype 프로퍼티

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

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

프로토타입의 생성 시점

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

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

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

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

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

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

프로토타입 체인

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

프로토타입의 교체

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

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

instanceof 연산자

직접 상속

Object.create에 의한 직접 상속

객체 리터럴 내부에서 prototype에 의한 직접 상속

정적 프로퍼티/메서드

프로퍼티 존재 확인

프로퍼티 열거

JS DeepDive 18장 함수와 일급 객체

JS DeepDive 20장 strict mode

0개의 댓글

JS DeepDive 19장 프로토타입

모던 자바스크립트 딥다이브

객체지향 프로그래밍

상속과 프로토타입

프로토타입 객체

__prototype__ 접근자 프로퍼티

1. __prototype__는 접근자 프로퍼티

2. __prototype__ 접근자 프로퍼티는 상속을 통해 사용됨

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

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

함수 객체의 prototype 프로퍼티

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

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

프로토타입의 생성 시점

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

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

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

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

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

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

프로토타입 체인

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

프로토타입의 교체

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

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

instanceof 연산자

직접 상속

Object.create에 의한 직접 상속

객체 리터럴 내부에서 __prototype__에 의한 직접 상속

정적 프로퍼티/메서드

프로퍼티 존재 확인

프로퍼티 열거

JS DeepDive 18장 함수와 일급 객체

JS DeepDive 20장 strict mode

0개의 댓글

prototype 접근자 프로퍼티

1. prototype는 접근자 프로퍼티

2. prototype 접근자 프로퍼티는 상속을 통해 사용됨

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

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

객체 리터럴 내부에서 prototype에 의한 직접 상속