[Javascript] 프로토타입과 상속

 

 

 

1. 프로토타입이란?

Javascript에서는 모든 객체가 다른 객체에 대한 참조인 프로토타입을 가지고 있다. 객체는 프로토타입을 통해 다른 객체로부터 속성과 메서드를 상속받는다. Javascript에는 원래 클래스라는 개념이 없어서 기존 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다. 

 

2. 프로토타입 체인의 역할과 작동방식

프로토타입 체인이란 어떤 프로퍼티나 메서드를 찾을 때, 해당 객체에 그 속성이나 메서드가 없다면 그 원형이 되는 프로토타입을 체인처럼 따라 올라가며 상위 객체에서 그 프로퍼티, 메서드를 찾는 것이다. 예를 들어서 아래와 같은 코드가 있을 때 

// 부모 객체
let animal = {
    name: "Animall",
    sayHello: function() {
        console.log("Woo~~");
    }
};

// 자식 객체
let cow = Object.create(animal);
cow.name = "Cow";
cow.sayHello(); // 출력: "Woo~~"

자식객체인 cow 객체는 sayHello 메서드를 직접 갖고 있지 않지만, 프로토타입 체인을 통해 따라올라가서 부모 객체의 sayHello 메서드를 상속받아 사용한다.

프로토타입의 작동방식은 우선 객체를 생성할 때 객체는 자신의 프로토타입을 가리키는 숨겨진 링크인 __proto__를 가진다. 이것은 부모 또는 상위객체에 대한 참조이다. 설명했던 대로 객체의 프로퍼티나 메서드에 접근하려고 할 때, 먼저 그 해당하는 객체 자체에 그 프로퍼티나 메서드가 있는지 확인을 한다. 그 다음 만약 찾을 수 없다면 Javascript 엔진은 객체의 프로토타입인 __proto__로 이동하여 그 객체의 속성을 검색한다. 계속 해서 찾을 수 없다면 이전과 같은 프로세스로 계속 체인을 타고 올라가며 검색한다. 만약 끝까지 찾을 수 없다면 undefined를 리턴한다. 

 

3. 자바스크립트에서의 상속 개념과 구현 방법

프로토타입의 상속을 통해 객체간의 관계를 설정하며 하위객체는 상위객체의 프로퍼티나 메서드를 상속받는다. 각각의 객체 모두 프로토타입을 가지며, 해당 프로토타입에 정의된 프로퍼티와 메서드는 자신의 것처럼 사용할 수 있다. 이러한 상속을 통해 코드의 재사용성과 유연성을 증가시킬 수 있다. 부모객체를 상속받는 자식객체를 생성하는 방법으로는 보통 아래와 같다

• 1) Object.create() 메서드 사용
• 2) ES6에 도입된 Class로 extends를 사용해서 상속 받기

 

4. ES6에서 도입된 클래스(Class)와 기존 프로토타입 기반 객체생성 비교

1) 프로토타입 기반

기존 javascript의 프로토타입 기반 Object.create() 또는 new 연산자로 객체를 생성한다. 개별 객체가 다른 객체로부터 직접 상속을 받는 방식으로 prototype 프로퍼티를 사용하여 프로토타입을 정의하고 객체를 생성한다. 상속 시에는 기존 객체를 확장하여 새로운 객체를 생성하는데, Object.create() 메서드로 부모객체의 프로토타입을 직접 상속 받을 수 있다.

// 1) 객체생성
function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    return `Hello, ${this.name}!`;
};
const person = new Person('Bob');
console.log(person.sayHello()); // 출력: Hello, Bob!



// 2) 상속
function Student(name, grade) {
    Person.call(this, name);
    this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);
const student = new Student('David', 8);
console.log(student.sayHello()); // 출력: Hello, David!



// 3) 인스턴스 확인
console.log(student instanceof Student); // true
console.log(student instanceof Person); // true

 

2) class 사용하기
클래스는 class 키워드를 사용하여 새로운 클래스를 정의하고 그 내부에 생성자 및 메서드를 정의한다. 새로운 인스턴스를 생성할 때 new 키워드를 사용한다. 상속 시에는 extends를 사용하여 새로운 클래스가 부모 클래스를 상속받을 수 있다.

// 1) 생성
class Person {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        return `Hello, ${this.name}!`;
    }
}
const person = new Person('Alice');
console.log(person.sayHello()); // 출력: Hello, Alice!



// 2) 상속
class Student extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }
}
const student = new Student('Charlie', 10);
console.log(student.sayHello()); // 출력: Hello, Charlie!



// 3) 인스턴스 확인
console.log(student instanceof Student); // true
console.log(student instanceof Person); // true