JavaScript - 프로토타입과 클래스

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

 

1. 객체 생성자

객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있게 해준다.

// 객체 생성자를 사용할때는 함수의 이름 첫글자를 대문자로 해주어야 한다.
function Animal(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
    this.say = function() {
        console.log(this.sound);
    }
}
// 객체 생성자를 사용해서 새로운 객체를 만들때는 new 키워드를 사용한다.
const dog = new Animal('개', '멍멍이', '멍멍');
const cat = new Animal('고양이', '야옹이', '야옹');

dog.say();
cat.say();

실행 결과

 

2. 프로토타입

객체 생성자 설명에서 소개한 코드를 보면 dog 가 가지고 있는 say 함수와 cat 이 가지고 있는 수행하는 코드가 똑같음에도 불구하고 객체가 생성 될 때 마다 함수도 새로 만들어져서 this.say 로 설정이 되고 있는데

같은 객체 생성자 함수를 사용하는 경우 특정 함수 또는 값을 재사용 할 수 있는데 그것을 해주는 것이

프로토타입이다.

function Animal(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
}
// 프로토타입
Animal.prototype.say = function() {
    console.log(this.sound);
}

const dog = new Animal('개', '멍멍이', '뭉멍');
const cat = new Animal('고양이', '야옹이', '냥');

dog.say();
cat.say();

프로토타입은 다음과 같이 객체 생성자 함수 아래에 객체 생성자 함수이름 .prototype.[원하는키] = 코드를 입력하여 설정 할 수 있다.

 

실행 결과

 

 

3. 객체 생성자 상속

객체 생성자 상속은 새로운 객체 생성자를 만들었을때 기존의 객체 생성자의 기능을 새로운 객체 생성자에서 상속 받아 재사용 할수 있게 해주는것을 말한다.

function Animal(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
}
  
Animal.prototype.say = function() {
    console.log(this.sound);
}

// 객체 생성자 상속  
function Dog(name, sound) {
    Animal.call(this, '개', name, sound);
}
// 프로토타입을 공유해야 하기 때문에 서로 같다고 해줌
Dog.prototype = Animal.prototype;
 
// 객체 생성자 상속
function Cat(name, sound) {
    Animal.call(this, '고양이', name, sound);
}

// 프로토타입을 공유해야 하기 때문에 서로 같다고 해줌
Cat.prototype = Animal.prototype;
  
const dog = new Dog('멍멍이', '왈왈');
const cat = new Cat('야옹이', '야~옹');
  
dog.say();
cat.say();

새로 만든 Dog 와 Cat 함수에서 기존 Animal 함수를 상속 받으려면 Animal.call로 호출해주고

그 안에 첫번째 인자로는 this를 넣어주어야 하고 이후에는 Animal 객체 생성자 함수에서 필요로 하는

파라미터를 넣어주어야 한다.

 

추가적으로 prototype 을 공유해야 하기 때문에 상속받은 객체 생성자 함수를 만들고 나서 prototype 값을 Animal.prototype과 같다고 해주어야한다.

 

실행 결과

 

 

4. 클래스

클래스라는 기능은 Python, C++, Java, C#, PHP 등의 다른 프로그래밍 언어에는 있는 기능인데

예전 자바스크립트 (ES5) 에서는 클래스 문법이 따로 없었기 때문에 위에서 작성한 코드처럼 객체 생성자 함수를 사용하여 비슷한 작업을 구현해왔었다.

하지만 ES6부터는 class라는 문법이 추가되어서 객체 생성자로 구현했던 코드를 조금 더 명확하고, 깔끔하게 구현 할 수 있게 해주고 상속도 훨씬 쉽게 해줄 수 있게 되었다.

class Animal {
    constructor(type, name, sound) {
        this.type = type;
        this.name = name;
        this.sound = sound;
    }
    say() {
        console.log(this.sound); 
        /* 클래스 내부에 함수를 만들면 그것을 메서드라 부르게 되고 
        자동으로 프로토타입으로 등록이 됨 */
    }
}

const dog = new Animal('개', '멍멍이', '으르릉');
const cat = new Animal('고양이', '야옹이', '하악');

dog.say();
cat.say();

위 코드와 같이 class 키워드를 사용해 클래스를 선언 하고 그 안에 constructor라는 키워드로 생성자를

생성한 후 파라미터를 넣어주면 된다.

 

실행 결과

 

 

5. 클래스 상속

class Animal {
    constructor(type, name, sound) {
        this.type = type;
        this.name = name;
        this.sound = sound;
    }
    say() {
        console.log(this.sound);
    }
}

class Dog  extends Animal {
    constructor(name, sound) {
        super('개', name, sound);
    }
}

class Cat extends Animal {
    constructor(name, sound) {
        super('고양이', name, sound);
    }
}

const dog = new Dog('댕댕이', '머어어어엉멍');
const cat = new Cat('야오오오오오옹이', '야오오오오오오옹');

dog.say();
cat.say();

상속을 할 때는 extends 키워드를 사용하며 constructor에서 사용하는 super() 함수가 상속받은 클래스의 생성자를 가르킨다.

 

실행 결과