1. 객체지향 프로그래밍
자바스크립트는
'프로토타입' 기반의 객체지향 프로그래밍 언어입니다.
객체지향 프로그래밍이란,
객체를 통해 여러 개의 값을 하나의 단위로 구성한
복합적인 자료구조의 집합입니다.
객체지향 프로그래밍은
프로퍼티(상태)와 메서드(동작)을 하나의 객체로 보고,
이 객체를 다룹니다.
1-1. 객체지향 프로그래밍의 네 가지 특징
-
추상화
객체의 다양한 속성 중에서
프로그램에 필요한 속성만 간추려 내어 표현하는 것 -
캡슐화
데이터 구조와 데이터를 다루는 방법들을
목적에 따라 결합 시켜 묶는 것(변수와 함수를 하나로)
캡슐화를 이유로, 데이터를 절대로 외부에서 직접 접근을 하면 안되고
함수를 통해서만 접근해야 함 -
상속
상위 개념의 특징을 하위 개념이 물려받는 것 -
다형성
부모 클래스에서 정의된 메서드가
자식 클래스 내에서 재정의 되어 사용되는 것
2. 상속과 프로토타입
상속은
어떤 객체의 프로퍼티나 메서드를
다른 객체가 상속받아 사용할 수 있는 것입니다.
자바스크립트에서 프로토타입을 기반으로 상속을 구현하여,
코드 재사용을 추구했습니다.
17장 생성자 함수에서
생성자 함수는 객체 리터럴에 비해
동일한 구조의 객체를 만들 때 유용했는데,
코드 재사용의 문제가 있었습니다.
예를 들어, 프로퍼티 값을 하나만 바꿔주고 싶어도
다른 프로퍼티나 메서드가 중복 생성된다는 문제가 있습니다.
프로토타입 키워드로 상속을 구현하면, 다음과 같습니다.
// 1. 생성자 함수로 Circle 객체 생성
function Circle(radius) {
this.radius = radius;
}
// 2. getArea 메서드 프로토타입에 추가
Circle.prototype.getArea = function() {
return Math.PI = this.radius ** 2;
}
// 3. 인스턴스 생성
const circle1 = new Circle(1);
const circle2 = new Circle(2);
위 코드에서, 프로토타입은 Circle 생성자 함수의
prototype 프로퍼티에 바인딩되어 있습니다.
Circle 생성자 함수가 생성한
모든 인스턴스가 getArea 메서드를 상속받을 수 있습니다.
모든 생성자 함수는
constructor 속성을 지닌 객체를 프로토타입 객체로 가지고 있습니다.
이 constructor 속성은 원본 생성자 함수 자신을 가리키고 있습니다.
console.log(circle1.constructor)
// ƒ Circle(radius) {
// this.radius = radius;
// }
console.log(circle1.constructor.name) // Circle
3. 프로토타입 객체
3-1. [[Prototype]]
프로토타입은 어떤 객체의 상위(부모) 객체의 역할을 하는 객체로
다른 객체에 공유 데이터(프로퍼티,메서드)를 제공합니다.
모든 객체는 [[Prototype]] 이라는 내부 슬롯을 가지며,
값은 프로토타입의 참조입니다.
3-2 .' __ proto __ ' 접근자 프로퍼티
[[Prototype]] 에 직접 접근할 수 없지만,
' __ proto __ ' 접근자 프로퍼티를 통해 간접적으로 접근할 수 있습니다.
그러나 ' __ proto __ ' 접근자 프로퍼티를
코드 내에서 직접 사용하는 것을 권장하지 않습니다.
직접 상속을 통해
Object.prototype을 상속받지 않는 객체를 생성할 수 있어
' __ proto __ ' 를 모든 객체에 사용할 수 있지는 않습니다.
대신
Object.getPrototypeOf() 메서드로 프로토타입의 참조를 얻을 수 있고,
Object.setPrototypeOf() 메서드로 프로토타입을 교체할 수 있습니다.
4. 프로토타입 체인
객체의 속성에 접근하려고 할 때
해당 객체에 접근하려는 프로퍼티가 없다면
자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색합니다.
따라서 프로토타입 체인은 상속과 프로퍼티 검색을 위한 매커니즘입니다.
프로토타입 체인의 최상위에 위치하는 객체는 Object.prototype입니다.
따라서 모든 객체는 Object.prototype을 상속받습니다.
이를 프로토타입 체인의 종점이라고 합니다.
프로퍼티가 아닌 식별자는 스코프 체인에서 검색합니다.
즉, 스코프 체인은 식별자 검색을 위한 매커니즘입니다.
스코프 체인과 프로토타입 체인은 별도로 동작하는 것이 아닌
협력하여 식별자와 프로퍼티를 검색하는 데 사용됩니다.
5. 오버라이딩과 프로퍼티 섀도잉
-
오버라이딩
상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의하여 사용 -
오버로딩
함수 이름 동일 / 매개변수의 타입 또는 개수가 다른 메서드 구현하여 호출 (arguments 객체를 사용하여 구현)
이처럼 상속 관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉이라고 합니다.
6. 프로토타입 개념 정리
6-1. 프로토타입 관련 용어 정리
6-2. 클래스와 인스턴스, 프로토타입의 관계
Human이라는 클래스를 선언하고,
프로토타입과의 관계를 살펴보겠습니다.
// Human 클래스 선언
class Human {
constructor(name, age) {
this.name = name;
this.age = age;
}
sleep() {
console.log(`${this.name}은 잠에 들었습니다`);
}
}
// 생성자 함수를 통한 인스턴스 생성
let kimcoding = new Human('김코딩', 30);
Human.prototype.constructor === Human; // true
Human.prototype === kimcoding.__proto__; //true
Human.prototype.sleep === kimcoding.sleep; //true
위 코드를 이미지로 표현하면, 다음과 같습니다.
Array(배열)과 프로토타입의 관계는 다음과 같습니다.
6-3. DOM과 프로토타입
브라우저에서 DOM을 이용하면,
document.createElement('div')로
새로운 div 엘리먼트를 만들 수 있습니다.
이렇게 생성된 div 엘리먼트는,
HTMLDivElement라는 클래스의 인스턴스입니다.
DOM 엘리먼트는
innerHTML과 같은 속성, 또는 append()와 같은 메서드가 있습니다.
각각의 엘리먼트가 해당 메서드나 속성이 있다는 것을 통해,
Element라는 공통의 부모가 있음을 알 수 있습니다.
화살표 방향은 부모를 가리킵니다.
EventTarget의 부모로는, 모든 클래스의 조상인 Object가 존재합니다.
'__proto__' 를 이용하면
부모 클래스의 프로토타입,
혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있습니다.
