[모딥다] JS (9) - 프로토타입

1. JavaScript

: 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어

: JS는 객체 기반의 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체라고 할 수 있다.

: 원시 타입의 값을 제외한 나머지 값들(함수 , 배열 , 정규 표현식 등)은 모두 객체라고 할 수 있다.

 

2. 객체지향 프로그래밍

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

: 실세계의 실체를 인식하는 철학적 사고를 프로그래밍에 접목하려는 시도에서 시작함

: 실체는 특징이나 속성을 나타내는 속성(어트리뷰트 / 프로퍼티) 

: 추상화는 다양한 속성 중에서 필요한 속성만 간추려 내어 표현하는 것

ex) "이름"과 "주소"라는 속성을 갖는 person 객체

const person = {
    name : "Lee",
    address : "Seoul"
};


console.log(person);

 

: 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라고 할 수 있다.

: 객체지향 프로그래밍은 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각할 수 있음

: 프로퍼티 = 객체의 상태 데이터 / 동작 = 메서드

 

3. 상속과 프로토타입

: 상속은 객체지향 프로그래밍의 핵심 개념으로, 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것을 말함.

: JS는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거함. 즉, 기존의 코드를 적극적으로 재사용하는 것.

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

// 각각의 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);

 

: JS는 프로토타입을 기반으로 상속을 구현함

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

// getArea를 모든 인스턴스가 공유해서 사용가능하도록 프로토타입에 추가함
Circle.prototype.getArea = function () {
    return Math.PI * radius ** 2;
};

// 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);


console.log(circle1.getArea === circle2.getArea); // true , but 값은 다름

 

4. 프로토타입 객체

: 프로토타입은 어떤 객체의 상위 객체의 역할을 하는 객체로, 다른 객체에 공유 프로퍼티를 제공한다.

: 프로토타입을 상속받은 하위 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티처럼 자유롭게 사용할 수 있다.

: 모든 객체는 [ [ Prototype ] ] 이라는 내부 슬롯을 가지며 이 내부 슬롯의 값은 프로토타입의 참조다.

: 모든 객체는 하나의 프로토타입을 갖으며 모든 프로토타입은 생성자 함수와 연결되어 있다.

 

* __proto__ 접근자 프로퍼티

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

: __proto__ 접근자 프로퍼티는 상속을 통해 사용됨. 즉, Object.prototype의 프로퍼티다.

 

* Object.prototype = 모든 객체는 프로토타입의 계층 구조인 프로토타입 체인에 묶여 있다.  이 때 Object.prototype은 프로토타입 체인의 종점이다. 

 

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

: 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서임.

: 프로토타입 체인은 단방향 링크드 리스트로 구현되어야 함. 즉 검색 방향이 무조건 한쪽 방향으로만 흘러가야 함.

: 그러나 서로가 자신의 프로토타입이 되는 비정상적인 프로토타입 체인이 만들어지면 종점이 존재하지 않기 때문에 무한루프에 빠질 수 있음.

 

* __proto__ 접근자 프로퍼티를 코드 내에서 직접 사용하는 권장되지 않음

: 모든 객체가 사용할 수 있는 것은 아니기 때문이다. (직접 상속을 통해 Object.prototype을 상속받지 않는 객체 생성 가능하기 때문)

 

* 함수 객체의 prototype 프로퍼티 

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

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

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

 

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

: 모든 프로토타입은 constructor 프로퍼티를 갖음. 이 프로퍼티는 prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수를 가리킨다. 

 

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

: 리터럴 표기법에 의한 객체 생성 방식은 인스턴스를 생성하지 않는 방식임. <=> 생성자 함수에 의해 생성된 인스턴스

// 객체 리터럴
const obj = {};

// 함수 리터럴
const add = function (a,b) { return a + b; };

// 배열 리터럴
const arr = [1, 2, 3];

// 정규 표현식 리터럴
const regexp = /is/ig;

 

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

: 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재함.

 

6. 프로토타입의 생성 시점

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

 

* 전역 객체 : 코드가 실행되기 이전 단계에 JS 엔진에 의해 생성되는 특수한 객체

클라이언트에서는 window, node.js에서는 global 객체를 의미함

 

7. 프로토타입 체인

: JS는 객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없으면 [ [ Prototype ] ] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색하는데 이를 프로토타입 체인이라고 함

: JS가 객체지향 프로그래밍의 상속을 구현하는 메커니즘이다. 

: Object.prototype을 프로토타입 체인의 종점이라 한다. 

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

<=> 프로퍼티가 아닌 식별자는 스코프 체인에서 검색함

: 스코프 체인은 식별자 검색을 위한 메커니즘

 

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

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

: 오버로딩이란 함수의 이름은 동일하지만 매개변수의 타입 또는 개수가 다른 메서드를 구현하고 매개변수에 의해 메서들르 구별하여 호출하는 방식이다. 

: JS는 오버로딩을 지원하지ㅇ낳지만 arguments 객체를 사용하여 구현할 수 있다. 

: 프로퍼티 섀도잉이란 상속 관계에 의해 프로퍼티가 가려지는 현상을 의미함.

 

9. 프로토타입 교체

: 프로토타입은 임의의 다른 객체로 변경 가능함. 즉 부모 객체인 프로토타입을 동적으로 변경할 수 있다는 것을 의미함.

: 그러나 번거로우므로 직접 교체하지 않는 것이 좋다. 

: 직접 상속이 더 편리하고 안전하므로 이 방법을 사용하는 것을 추천함.

 

10. instanceof 연산자

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

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

: 생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는 지 확인할 때 사용함

객체 instanceof 생성자 함수

 

11. 직접 상속

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

: 명시적으로 프로토타입을 지정하여 새로운 객체를 생성함

 

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

const myProto = { x : 10 };

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

 

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

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

 

13. 프로퍼티 존재 확인

1) in 연산자

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

key in object

 

2) Object.prototype.hasOWnProperty 메서드

const person = { name : "Lee" };
console.log(Reflect.has(person, 'name')); // true
console.log(person.prototype.hasOwnProperty('name'); // true

 

14. 프로퍼티 열거

1) for ... in 문

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

for (const key in person ) {
    console.log( key + ':' + person[key]);
};


// name : Lee
// address : seoul

 

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

 : Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환함

console.log(Object.keys(person));

// ["name" , "address"]

 

: Object.values 메서드는 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환함

console.log(Object.values(person));

// ["Lee", "Seoul"]

 

: Object.entries 메서드는 객체 자신의 열거 가능한 프로퍼티 키와 값의 쌍의 배열을 배열에 담아 반환함

console.log(Object.entries(person));

// [ ["name", "Lee"] , ["address", "Seou;"]]

Object.entries(person).forEach(([key,value]) => console.log(key, value));

/*
name Lee
address Seoul
*/