[3주차 스터디]19장-프로토타입

프로토타입

• 자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향을 지원하는 멀티 패러다임 프로그래밍 언어
• js 에서 원시 타입 값을 제외한 나머지 값들은 모두 객체

상속과 프로토타입

• 상속(inheritance)을 통해 객체의 프로퍼티, 메서드를 다른 객체가 상속받아 그대로 사용할 수 있게 됨.

• JavaScript는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거.

• 프로토타입 사용x

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

동일한 메서드가 중복 생성된다.

• 프로토타입 기반 상속 구현

// 생성자 함수
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);
 
console.log(circle1.getArea === circle2.getArea);  // true

자신의 상태를 나타내는 radius 만 개별적으로 소유 getArea메서드를 상속받아서 사용
코드 재사용으로 중복 제거

프로토타입 객체

• 프로토 타입 객체는 객체간 상속을 구현하기 위해 사용
• 모든 객체는 [[ Prototype ]] 이라는 내부슬롯 가지고, 이 값은 객체의 생성 방식에 의해 결정 됨 (null 일 수도 있음)

  정리 : 객체가 생성될 때 객체 생성 박식에 따라 프로토 타입이 결정되고 [[ Prototype ]]에 저장

• 모든 객체는 하나의 프로토타입을 가짐(null 인 경우 프로토 타입 없음)
• 모든 프로토타입은 생성자 함수와 연결되어 있다.

정리

• [[ Prototype ]] 직접 접근 불가, 객체는 __ proto __ 접근자 프로퍼티 사용하여 자신의 [[ Prototype ]] 내부슬롯에 접근 가능

• 프로토 타입은 constructor 프로퍼티를 통해 생상자 함수에 접근 가능

• 생성자 함수는 prototype 프로퍼티를 통해 프로토타입에 접근 가능

__ proto __ 는 접근자 프로퍼티

• 접근자 프로퍼티는 자체적으로 값을 가지지 않고 접근자 함수를 제공 (getter / setter)

const obj = {};
const parent = { x: 1 };
 
// getter 함수인 get __proto__가 호출되어 obj 객체의 프로토타입을 취득
obj.__proto__;
// setter함수인 set __proto__가 호출되어 obj 객체의 프로토타입을 교체
obj.__proto__ = parent;
 
console.log(obj.x); // 1

__ proto __ 접근자 프로퍼티는 상속을 통해 사용됨

• __ proto __ 접근자 프로퍼티는 객체가 직접 소유하는 것이 아니라 Object.prototype의 프로퍼티 입니다.
• Object 객체는 최상위 객체이므로 모든 객체는 상속을 통해 __ proto __ 접근자 프로퍼티를 사용 가능

const person = { name: 'Lee' };
 
// person 객체는 __proto__ 프로퍼티를 소유하지 않는다.
console.log(person.hasOwnProperty('__proto__')); // false
 
// __proto__ 프로퍼티는 모든 객체의 프로토타입 객체인 Object.prototype의 접근자 프로퍼티다.
console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));
// {get: ƒ, set: ƒ, enumerable: false, configurable: true}
 
// 모든 객체는 Object.prototype의 접근자 프로퍼티 __proto__를 상속받아 사용할 수 있다.
console.log({}.__proto__ === Object.prototype); // true

Object.prototype

모든 객체는 프로토타입의 계층 구조인 프로토타입 체인에 묶여 있다.
자바스크립트 엔진은 프로퍼티에 접근 시 __ proto __ 접근자 프로퍼티가 가리키는 참조를 따라 프로토타입의 프로퍼티를 순차적으로 검색

__ proto __ 접근자 프로퍼티를 통해 접근하는 이유?

• 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지 하기 위해
• 프로토 타입은 단방향 링크드 리트스로 구현되어야 한다.
• 순환 참조하는 프로토타입 체인이 만들어 진다면 프로퍼티 검색 시 무한 루프

__ proto __ 접근자 프로퍼티 직접 사용 권장 하지 않음

• 직접 상속을 통해 Object.prototype를 상속받지 않은 객체를 생성할 수도 있음.

// obj는 프로토타입 체인의 종점. 따라서 Object.__proto__를 상속받을 수 없다.
const obj = Object.create(null);
 
// obj는 Object.__proto__를 상속받을 수 없다.
console.log(obj.__proto__); // undefined
 
// 따라서 __proto__보다 Object.getPrototypeOf 메서드를 사용하는 편이 좋다.
console.log(Object.getPrototypeOf(obj)); // null

프로토타입 참조 필요 시 : Object.getPrototypeOf 사용
프로토타입 교체 필요 시 : Object.setPrototypeOf 사용

함수 객체의 prototype 프로퍼티

• prototype 프로퍼티는 함수 객체만 가짐
• prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킴
• non-constructor 함수 객체는 prototype 가지지 않음
• __ proto __ 접근자 프로퍼티와 함수 객체 만이 가지고 있는 prototype 프로퍼티는 결국 동일한 프로퍼타입을 가리킨다*
  • __ proto __
    • 모든 객체가 소유
    • 객체가 자식의 프로토타입에 접근 또는 교체 하기 위해 사용
  • prototype 프로퍼티
    • constructor 소유
    • 생성자 함수가 사용 주체
    • 생성자 함수가 자신이 생성할 객체의 프로토타입을 할당하기위해 사용

// 생성자 함수
function Person(name) {
  this.name = name;
}
 
const me = new Person('Lee');
 
// 결국 Person.prototype과 me.__proto__는 결국 동일한 프로토타입을 가리킨다.
console.log(Person.prototype === me.__proto__);  // true

constructor

• 모든 프로토타입은 constructor 프로퍼티를 가진다.
• constructor프로퍼티는 자신을 참조하고 있는 생성자 함수를 가리림
• 함수 객체 (생성자 함수)가 생성될 때 연결 이루어짐

// 생성자 함수
function Person(name) {
  this.name = name;
}
 
const me = new Person('Lee');
 
// me 객체의 생성자 함수는 Person이다.
console.log(me.constructor === Person);  // true

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

• new연산자와 함께 생성자 함수를 호출하여 인스턴스를 생성하는 객체 생성하는 경우 => constructor가 해당 객체를 생성한 생성자 함수 가리킴
• 리터럴 표기법에 의해 생성된 객체경우 constructor가 가리키는 생성자 함수가 객체를 생성한 생성자 함수라고 단정지을 수 없다.

// obj 객체는 Object 생성자 함수로 생성한 객체가 아니라 객체 리터럴로 생성했다.
const obj = {};
 
// 하지만 obj 객체의 생성자 함수는 Object 생성자 함수다.
console.log(obj.constructor === Object); // true

• 리터럴 표기법에 의해 생성된 객체도 상속을 위해 프로토 타입 필요

  프로토타입은 생성자 함수와 더불어 생성되며 prototype, constructor 프로퍼티에 의해 연결되어있기 때문

리터럴 표기법으로 생성된 객체는 가상의 생성자 함수 갖는다.
즉, 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍(pair)로 존재

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

리터럴 표기법	생성자 함수	프로토타입
객체 리터럴	Object	Object.prototype
함수 리터럴	Function	Function.prototype
배열 리터럴	Array	Array.prototype
정규 표현식 리터럴	RegExp	RegExp.prototype

프로토타입의 생성시점

• 프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성 됨

• 생성자 함수는 사용자 정의 생성자 함수와 자바스크립트가 기본 제공하는 빌트인 생성자 함수로 구분할 수 있다.

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

• 생성자 함수로서 호출할 수 있는 함수, 즉 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성
• non-constructor는 프로토타입이 생성되지 않는다.

// 함수 정의(constructor)가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.
console.log(Person.prototype); // {constructor: ƒ}
 
// 생성자 함수
function Person(name) {
  this.name = name;
}
/* ---------------------------------------------- */
// 화살표 함수는 non-constructor다.
const Person = name => {
  this.name = name;
};
 
// non-constructor는 프로토타입이 생성되지 않는다.
console.log(Person.prototype); // undefined

• 생성된 프로토타입은 오직 constructor 프로퍼티만을 갖는 객체.

• 프로토타입도 객체이고, 모든 객체는 프로토타입을 가지므로 프로토타입도 자신의 프로토타입을 가짐.(Object.prototype)

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

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

전역 객체

• 자바스크립트 엔진에 의해 생성되는 특수한 객체
• 브라우저에서는 window, node.js 에서는 global
• 전역객체는 표준 빌트인 객체(Object, String, Number ...), 호스트 객체 (webAPI ...), var 키워드로 선언한 전역변수와 전역함수를 프로퍼티로 갖는다.
  Math, Reflcect, JSON 을 제외한 표준 빌트인 객체는 모두 생성자 함수

• 객체가 생성되기 이전에 생성자 함수와 프로토타입은 이미 객체화 되어 존재
• 이 후 생성자 함수 또는 리터럴로 객체를 생성하면 프로토타입은 생성된 객체의 [[ Prototype ]] 내부 슬롯에 할당된다.

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

• 객체 생성방식
  1. 객체 리터럴
  2. Object 생성자 함수
  3. 생성자 함수
  4. Object.create 메서드
  5. 클래스(ES6)

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

• 객체 리터럴을 평가하여 객체를 생성할 때 OrdinaryObjectCreate에 Object.prototype을 전달하여 연산함.

const obj = { x: 1 }; // 객체 리터럴이 평가되면서 Object 생성자 함수와 Object.prototype과 생성된 객체 사이에 연결 만들어짐
 
// 객체 리터럴에 의해 생성된 obj 객체는 Object.prototype을 상속 받는다.
console.log(obj.constructor === Object); // true
console.log(obj.hasOwnProperty("x")); // true

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

• Object 생성자 함수에 의해 생성되는 프로토 타입은 Object.prototype
• 리터럴 생성방식과 차이점은 프로퍼티를 추가하는 방식
• 리터럴 방식은 객체 리터럴 내부에 프로퍼티 추가
• Object 생성자 함수 방식은 빈 객체를 생성한 이후 프로퍼티 추가

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

• new 연산자와 함께 생성자 함수를 호출하여 인스턴스를 생성할 때 OrdinaryObjectCreate에 생성자 함수의 prototype 프로퍼티에 바인딩되어 있는 객체를 전달하여 연산함.
• 생성자 함수 생성된 프로토타입 객체의 프로퍼티는 constructor뿐
• 생성된 프로토타입 객체( 생성자함수.prototype)에 프로퍼티를 추가 / 삭제 할 수 있고 이 프로퍼티는 인스턴스가 상속받음 (프로토타입 체인에 반영)

프로토타입 체인

• 객체의 프로퍼티(메서드 포함)에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면, [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색하는 것을 말함

• 프로토타입 체인은 자바스크립트에서 객체지향 프로그래밍의 상속을 구현하는 메커니즘

• 프로토타입 체인의 최상위에 위치하는 객체는 Object.prototype

• 즉, 모든 객체는 Object.prototype을 상속 받음

• Object.prototype에서도 프로퍼티 검색하지 못하면 undefined 반환

  정리
  프로토타입 체인 : 계층적인 구조의 객체의 상속과 프로퍼티 검색을 위한 메커니즘
  스코프 체인 : 함수의 중첩 관계로 이루어진 스코프의 계층적 구조에서 식별자 검색을 위한 메커니즘

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

• 용어 정리

• 오버라이딩* (overriding): 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의 하여 사용하는 방식

• 오버로딩*(overloading) : 함수이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고, 구별하여 호출하는 방식

• 프로퍼티 섀도잉*(property shadowing) : 상속 관계에 의해 프로퍼티가 가려지는 현상

• 자바스크립트는 오버로딩 지원x, 그러나 arguments 객체 사용하여 구현가능

• 프로토타입 프로퍼티를 변경 또는 삭제 하려면 하위 객체를 통해 프로토타입 체인으로 접근하는 것이 아니라 프로토타입에 직접 접근해야함

// 프로토타입 체인을 통해 프로토타입 메서드가 삭제되지 않는다.
delete me.sayHello;
// 프로토타입 메서드가 호출된다.
me.sayHello(); // Hi! My name is Lee
 
/* ------------------------------------ */
// 직접 접근하여 변경 / 삭제 가능
// 프로토타입 메서드 변경
Person.prototype.sayHello = function () {
  console.log(`Hey! My name is ${this.name}`);
};
me.sayHello(); // Hey! My name is Lee
 
// 프로토타입 메서드 삭제
delete Person.prototype.sayHello;
me.sayHello(); // TypeError: me.sayHello is not a function

프로토타입 교체

• 프로토타입은 임의의 다른 객체로 변경 가능 -> 부모 객체인 프로토타입을 동적으로 변경 가능

• 생성자 함수 또는 인스턴스에 의해 교체가능

• 프로토타입의 교체를 통해 상속 관계를 동적으로 변경하는 것은 꽤나 번거로우므로, 직접 교체하지 않는 것이 편리함과 안정성 측면에서 좋음.

instanceof 연산자

객체 instanceof 생성자 함수

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

• 생성자 함수에 의해 프로토타입이 교체되어도 생성자 함수의 prototype프로퍼티와 연결은 파괴되지 않으므로 instanceof연산자는 정상 동작

const Person = (function () {
  function Person(name) {
    this.name = name;
  }
 
  // 생성자 함수의 prototype 프로퍼티를 통해 프로토타입을 교체
  Person.prototype = {
    sayHello() {
      console.log(`Hi! My name is ${this.name}`);
    }
  };
 
  return Person;
}());
 
const me = new Person('Lee');
 
// constructor 프로퍼티와 생성자 함수 간의 연결은 파괴되어도 instanceof는 아무런 영향을 받지 않는다.
console.log(me.constructor === Person); // false
 
// Person.prototype이 me 객체의 프로토타입 체인 상에 존재하므로 true로 평가된다.
console.log(me instanceof Person); // true
// Object.prototype이 me 객체의 프로토타입 체인 상에 존재하므로 true로 평가된다.
console.log(me instanceof Object); // true

정적 프로퍼티/메서드

• 정적(static) 프로퍼티 / 메서드는 생성자 함수로 인스턴스를 생성하지 않아도 참조 / 호출 할 수 있는 프로퍼티 메서드를 말한다.

• 정적 프로퍼티/메서드는 생성자 함수가 생성한 인스턴스로 참조/호출할 수 없음.

• 정적 프로퍼티/메서드는 인스턴스의 프로토타입 체인에 속한 프로퍼티/메서드가 아니므로 인스턴스로 접근할 수 없음.

• 인스턴스/프로토타입 메서드 내에서 this를 사용하지 않는다면 정적 메서드로 변경해도 무방하다.

프로퍼티 존재 확인

in연산자

• in연산자는 객체 내에 특정 프로퍼티가 존재하는지 여부를 확인한다.

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

• in 연산자는 객체의 프로퍼티 뿐만아니라 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인한다. (Object.prototype에서 상속받은 것도 true로 판단)

console.log('toString' in person); // true

Object.prototype.hasOwnProperty 메서드

• 객체 고유의 프로퍼티(상속 받은 프로토타입 제외)만 확인하는 방법.

console.log(person.hasOwnProperty('toString')); // false

프로퍼티 열거

for ... in 문

/*
 key: property를 할당 받을 변수
 object: 열거할 객체
*/
for (const key in object) { ... }

• 프로퍼티의 개수만큼 순회하여 변수 선언문(key)에서 선언한 변수에 프로퍼티 키를 할당.

• 순회 대상의 객체 프로퍼티 뿐만 아니라 상속받은 프로토타입의 프로퍼티까지 열거

• [[Enumerable]]의 값이 false이면 열거하지 않음.

• 키가 심벌인 프로퍼티 또한 열거하지 않음.

• 대부분의 모던 브라우저는 순서를 보장하고 숫자(사실은 문자열)인 프로퍼티 키에 대해서는 정렬을 실시하지만, 원래 for ... in 문은 순서를 보장하지 않으므로 주의.

• 배열에는 for ... in이 아닌 for, for ... of, Array.prototype.forEach 등의 메서드 권장.

// 상속받을 프로퍼티는 제외하고 객체 자신의 프로퍼티만 열거하는 방법
const person = {
  name: 'Lee',
  address: 'Seoul',
  __proto__: { age: 20 }
};
 
for (const key in person) {
  // 객체 자신의 프로퍼티인지 확인한다.
  if (!person.hasOwnProperty(key)) continue;
  console.log(key + ': ' + person[key]);
}
// name: Lee
// address: Seoul

프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티를 순회하며 열거하는 방법.

Object.keys/values/entries 메서드

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

• Object.values: 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환.

• Object.entries: 객체 자신의 열거 가능한 프로퍼티 키와 값의 쌍의 배열을 배열로 반환.

객체 자신 고유의 프로퍼티 중에서 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 열거하는 방법.