[자바스크립트 필기] #13

프로그래밍 언어/JavaScript

[자바스크립트 필기] #13 - 프로토타입

SpaceCowboy 2021. 8. 6. 15:02

1. 상속과 프로토타입

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

그리고 자바스크립트에서는 프로토타입을 통해 상속을 구현하는데, 이를 통해 불필요한 중복을 줄일 수 있다.

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

// Circle 생성자 함수가 생성한 모든 인스턴스가 getArea 메서드를 
// 공유해서 사용할 수 있도록 프로토타입에 추가한다. 
// 프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다.
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

이처럼 Circle 생성자 함수가 생성한 인스턴스는 자신의 프로토타입, 즉 상위 객체 역할을 하는 Circle.prototype의 모든 프로퍼티와 메서드를 상속받는다.

2. 프로토타입 객체

프로토타입 객체는 상속을 구현하기 위해서 사용된다. 따라서 이 객체는 어떠한 객체의 상위 역할을 해서 모든 속성들을 제공한다.

그리고 모든 프로토타입은 생성자 함수와 연결되어 있다.

3. 리터럴로 생성된 객체의 생성자 함수와 프로토타입

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

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

프로토타입은 생성자 함수가 생성되는 시점에 더불어서 생성된다.

사용자 정의 생성자 함수의 경우

이러한 constructor는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 생성된다.

빌트인 생성자 함수의 경우

Object, String, Number, Function, Array, RegExp, Date, Promise 등 이러한 빌트인 생성자 함수도 일반 함수와 마찬가지로 생성되는 시점에 프로토타입이 생성된다. 그러면 언제 빌트인 생성자 함수가 생성되냐면 전역 객체가 생성될 때 생성된다고 한다.

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

오버라이딩 : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용하는 방식이다.
프로퍼티 섀도잉 : 이처럼 상속 관계에 의해 프로퍼티가 가려지는 현상을 말한다.

6. 프로퍼티 존재 확인

in 연산자

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

console.log('name' in person); // true
console.log('address' in person); // true
console.log('age' in person); // false

Object.prototype.hasOwnProperty 메서드

const person = {
    name: 'Lee'
};

console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('age')); // false

7. 프로퍼티 열거

for ... in 문

객체의 모든 프로퍼티를 순회하며 열거하고 싶으면 for ... in 문을 사용하면 된다.

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

// for ... in 문의 변수 key에 person 객체의 프로퍼티 키가 할당된다. 
for (const key in person) {
    console.log(key + ': ' + person[key]);
}

여기까지 입니다 - 틀린 점이 있다면 꼭 지적해주세요!