프로토타입과 클래스

객체 생성자

함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현 할 수 있음

객체 생성자를 사용 할 때에는 보통 함수의 이름을 대문자로 시작,

새로운 객체를 생성 할 때에는 new 를 붙여준다

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

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

dog.say();
cat.say();
// result : 멍멍
// result : 야옹

---

프로토타입

 

같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용 할 수 있음

 

function Animal(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
}

Animal.prototype.say = function () {
    console.log(this.sound);
}
Animal.prototype.sharedValue = 1;

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

dog.say();
cat.say();
// result : 멍멍
// result : 야옹

console.log(dog.sharedValue);
console.log(cat.sharedValue);
// result : 1
// result : 1

---

객체 생성자 상속받기

 

Animal 의 기능을 재사용해서 Cat, Dog 새로운 객체 생성자를 만들어보자

function Animal(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
}

Animal.prototype.say = function () {
    console.log(this.sound);
}
Animal.prototype.sharedValue = 1;

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();
// result : 멍멍
// result : 야옹
console.log(dog.sharedValue);
console.log(cat.sharedValue);
// result : 1
// result : 1

새로 만든 Dog, Cat 함수에서 Animal.call 을 호출중

첫번째 인자에는 this 를 넣어주어야하고 (해당 함수의 값)

파라미터에는 Anumal 객체 생성자 함수에서 필요로 하는 파라미터를 넣음

 

추가적으로 prototype 을 공유해야 하기 때문에 (연결한다고 생각하면 될려나)

portotype 을 Animal.prototype 으로 맞춤

---

클래스

클래스 기능은 C, JAVA, C#, PHP 등의 다른 프로그래밍에 언어에 있는 기능

ES6 부터는 class 가 추가 되었음

객체 생성자의 코드를 좀 더 명확하고 깔끔하게 구현 가능

 

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

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

dog.say();
cat.say();
// result : 멍멍
// result : 야옹

클래스 내부에 함수를 만들면 자동으로 protptype 으로 등록됨

 

클래스를 상속 할 때

class Animal {
    constructor(type, name, sound) {
        this.type = type;
        this.name = name;
        this.sound = sound;
    }
    // say = method
    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();
// result : 멍멍
// result : 야옹

상속 시, extends 키워드를 사용, constructor 에서 사용하는 super() 함수가 상속 받은 클래스의 생성자를 가르킴

class Animal {
    constructor(type, name, sound) {
        this.type = type;
        this.name = name;
        this.sound = sound;
    }
    // say = method
    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 dog2 = new Dog('왈왈이', '왈왈');
const cat = new Cat('냥냥이', '야옹');
const cat2 = new Cat('애옹이', '애옹');

dog.say();
cat.say();
dog2.say();
cat2.say();
// result : 멍멍
// result : 야옹
// result : 왈왈
// result : 애옹

꼭 자바 같네..

 

---