🐸 [JavaScript] 프로토타입

JavaScript

• 멀티 패러다임 프로그래밍 언어
  • 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍 을 지원
• 객체 기반의 프로그래밍 언어
  • JS를 이루고 있는 거의 "모든 것"이 객체 임
  • 원시 타입의 값을 제외한 나머지 값들은 모두 객체

---

객체지향 프로그래밍

• 전통적인 명령형 프로그래밍
  • Program : 명령어 또는 함수의 목록 (절차 지향적 관점)
• 객체지향 프로그래밍
  • Program : 객체의 집합
  • 프로그래밍에 실세계의 실체를 인식하는 철학적 사고 를 접목
    • 실체 : 속성을 가짐
    • 속성으로 실체를 구별 가능
    • 추상화 : 다양한 속성 중, Program에 필요한 것만 간추려 표현하는 것

// 이름과 주소 속성을 갖는 객체
const person = {
    name: 'Hwang',
    address: 'Busan'
};

console.log(person);

-> 객체 : 속성을 통해, 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조

- 원을 객체로?

const circle = {
    radius: 5,

    getDiameter() {
        return 2 * this.radius;
    },
    getPerimeter() {
        return 2 * Math.PI * this.radius;
    },
    getArea() {
        return Math.PI * this.radius ** 2;
    }
};

console.log(circle);

console.log(circle.getDiameter());
console.log(circle.getPerimeter());
console.log(circle.getArea());

반지름 : 원의 상태를 나타내는 데이터
지름, 둘레, 넓이 : 동작

객체지향 프로그래밍은

• 객체 상태를 나타내는 데이터 (property)
• 상태 데이터를 조작할 수 있는 동작 (method)

데이터와 동작을 하나의 논리적 단위로 묶어 생각.

각 객체는 독립적으로 존재할 수 있고, 다른 객체와 관계성을 가질 수도 있다.

---

상속과 프로토타입

상속

• 객체지향 프로그래밍의 핵심
• 어떤 객체의 property 또는 method를, 다른 객체가 상속받아 그대로 사용할 수 있는 것

프로토타입

• JS는 프로토타입을 기반으로 상속을 구현
  -> 불필요한 중복을 제거

// 생성자 함수
function Circle(radius) {
    this.radius = radius;
    this.getArea = function() {
        return Math.PI * this.radius ** 2;
    };
}

// 반지름이 1,2인 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);

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

모든 인스턴스가 동일한 내용의 method를 사용할 경우?
-> method를 단 하나만 생성하여, 모든 인스턴스가 공유해서 사용하도록 하는 것이 바람직함

하지만 위의 코드에서, getArea method는 모든 인스턴스가 중복 소유하게 됨
-> 불필요한 메모리 낭비

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);
console.log(circle1.getArea());
console.log(circle2.getArea());

---

프로토타입 객체 (프로토타입)

: 객체 간 상속을 구현하기 위해 사용됨

prototype : 어떤 객체의 상위(부모) 객체의 역할을 하는 객체
-> 다른 객체에 공유 property(method 포함)를 제공

prototype을 상속받은 하위(자식) 객체
-> 상위 객체의 property를 자신의 property처럼 자유롭게 사용할 수 있다.

• 모든 객체는 [[Prototype]] 라는 내부 슬롯을 가짐
  • 내부 슬롯의 값 : prototype의 참조
• 모든 객체는 하나의 prototype을 가짐
  • 모든 prototype은 생성자 함수와 연결되어있다.

- __proto__ 접근자 프로퍼티

• 모든 객체는 __proto__ 접근자 프로퍼티를 통해 [[Prototype]] 내부 슬롯에 간접 접근 가능
  • [[Prototype]] : 객체 자신의 prototype

__proto__는 접근자 프로퍼티다.

• 내부 슬롯은 property가 아니다.
  • (원칙) 내부 슬롯과 내부 method에 직접 접근하거나 호출하는 방법은 제공하지 X
  • 일부 내부 슬롯과 내부 method에 한하여, 간접 접근 수단을 제공하기는 함
• 접근자 프로퍼티?
  • 자체적으로 [[Value]] property를 갖지 않고, [[Get]] [[Set]] property attribute로 구성된 property.
  • [[Get]] [[Set]] : 다른 data property의 값을 읽거나 저장할 때 사용하는 접근자 함수

Object.property 의 접근자 프로퍼티인 __proto__

-> getter/setter 함수라고 부르는 접근자 함수를 통해
[[Property]] 내부 슬롯의 값, 즉 프로토타입을 취득하거나 할당한다.

__proto__ 접근자 프로퍼티를 통해 프로토타입에 접근하면,
내부적으로 __proto__ 접근자 프로퍼티의 getter 함수인 [[Get]]이 호출된다.

__proto__ 점근자 프로퍼티를 통해 새로운 프로토타입을 할당하면,
__proto__ 접근자 프로퍼티의 setter 함수인 [[Set]]이 호출된다.

const obj = {};
const parent = { x: 1 };

// setter 함수인 set __proto__가 호출됨
// -> obj 객체의 프로토타입을 교체
obj.__proto__ = parent;

console.log(obj.x); // 1

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

__proto__ 접근자 프로퍼티는 객체가 직접 소유하는 프로퍼티가 아니다.
-> Object.prototype의 프로퍼티임

모든 객체는 상속을 통해 Object.prototype.__proto__ 접근자 프로퍼티를 사용할 수 있다.

const person = { name: 'Hwang' };

// person 객체는 __proto__ 프로퍼티를 소유하지 않는다
console.log(Object.hasOwnProperty('__proto__'));

// __proto__ 프로퍼티 : 모든 객체의 프로토타입 객체인 Object.prototype의 접근자 프로퍼티
console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));

// 모든 객체는 Object.prototype의 접근자 프로퍼티  __proto__를 상속받아 사용할 수 있다.
console.log({}.__proto__ === Object.prototype);

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

[[Property]] 내부 슬롯의 값에 접근하기 위해 접근자 프로퍼티를 사용하는 이유?
=> 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위함

const parent = {};
const child = {};

// child의 프로토타입을 parent로 설정
child.__proto__ = parent;
// parent의 프로토타입을 child로 설정
parent.__proto__ = child;

// 이런 코드가 error 없이 정상적으로 처리되면?
// -> 서로가 자신의 프로토타입이 되는 비정상적인 프로토타입 체인이 만들어짐
// -> error 발생 함

-> 프로토타입 체인은 단방향 linked list로 구현되어야 함
(property 검색 방향이 한쪽 방향으로만 흘러가야 함)

순환 참조하는 프로토타입 체인이 만들어지면?
-> property 검색시, 무한 루프에 빠짐
<- 프로토타입 체인의 종점이 존재하지 않기 때문

그래서?

아무런 체크 없이 무조건적으로 프로토타입을 교체할 수 없도록 함
__proto__ 접근자 프로퍼티를 통해서 프로토타입에 접근하고 교체하도록 구현되어 있음

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

코드 내에서 __proto__ 접근자 프로퍼티를 직접 사용하는 것은 권장하지 않음.
모든 객체사 __proto__ 접근자 프로퍼티를 사용할 수 있는 것이 아니기 때문

직접 상속을 통해 Object.prototype을 상속받지 않는 객체를 생성할 수도 있기 때문에, __proto__ 접근자 프로퍼티를 사용할 수 없는 경우가 있을 수 있음

// obj는 prototype chain의 종점.
// -> Object.__proto__를 상속받을 수 없다.
const obj = Object.create(null);

console.log(obj.__proto__);

// -> __proto__보다 Object.getPrototypeOd 메서드를 사용하는 편이 좋다.
console.log(Object.getPrototypeOf(obj));


// -----------------------------------------------------------------------

const obj = {};
const parent = { x: 1 };

// obj 객체의 prototype을 취듯
Object.getPrototypeOf(obj);
// obj 객체의 prototype을 교체
Object.setPrototypeOf(obj, parent);

console.log(obj.x);

- 함수 객체의 prototype 프로퍼티

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

prototype 프로퍼티는, 생성자 함수가 생성할 객체의 프로토타입을 가리킨다.
따라서 생성자 함수로서 호출할 수 없는 함수, 즉 non-constructor 인 화살표 함수와 ES6메서드 축약 표현으로 정의한 메서드는 prototype 프로퍼티를 소유하지 않으며, 프로토타입도 생성하지 않는다.

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

---

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

---

프로토타입의 생성 시점

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

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

---

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

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

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

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

---

프로토타입 체인

---

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

---

프로토타입의 교체

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

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

---

instanceof 연산자

---

직접 상속

- Object.create에 의한 직접 상속

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

---

정적 프로퍼티/메서드

---

프로퍼티 존재 확인

- in 연산자

- Object.prototype.hasOwnProperty 메서드

---

프로퍼티 열거

- for...in 문

- Object.keys/values/entries 메서드

---

(수정중)