객체생성자란?

함수를 사용해서 새로운 객체를 만들어내는 것

• 객체생성자 생성

    // 함수 선언
    function Computer(keyboard, mouse, monitor) { // 객체생성자의 함수명 첫글자는 대문자로!
        this.keyboard = keyboard;
        this.mouse = mouse;
        this.monitor = monitor;
        this.setup = function() {
            console.log(keyboard);
        }
    }
  
    // NEW
    const intel = new Computer('k380', 'lazer', 'lg'); // 새로운 객체를 만들기 위해 new를 사용
    const razen = new Computer('ck87', 'logitech', 'samsung');
  
    // 새로 만들어진 객체
    intel.keyboard; // k380
    intel.monitor; // lg
    intel.setup; // k380
  
    razen.mouse; // logitech
    razen.monitor; // samsung
    razen.setup; // ck87
  
    console.log(intel);
    /* Computer {keyboard: "ck87", mouse: "logitech", monitor: "samsung", setUp: 'ck87'}
     keyboard: "ck87"
    monitor: "samsung"
    mouse: "logitech"
    setUp: 'ck87 () */
    console.log(razen);
    /* Computer {keyboard: "k380", mouse: "lazer", monitor: "lg", setUp: 'k380'}
    keyboard: "k380"
    monitor: "lg"
    mouse: "lazer"
    setUp: 'k380' */
  

프로토타입이란?

위 예제에서 setup 함수의 경우 같은 기능임에도 객체 각각에 따로 선언되어 비효율적임, 이를 해결하기 위해 프로토타입을 사용.
여러 다른 객체에서 공통된 내용을 만들어주는 기능을 함.

• 프로토타입 생성

    function Computer(keyboard, mouse, monitor) {
        this.keyboard = keyboard;
        this.mouse = mouse;
        this.monitor = monitor;
    }
  
    Computer.prototype.setup = function() {
        console.log(keyboard);
    }
  
    const intel = new Computer('k380', 'lazer', 'lg'); 
    const razen = new Computer('ck87', 'logitech', 'samsung');
  
    intel.keyboard; // k380
    intel.monitor; // lg
    intel.setup; // k380
  
    razen.mouse; // logitech
    razen.monitor; // samsung
    razen.setup; // ck87
  
    console.log(intel);
    /* Computer {keyboard: "ck87", mouse: "logitech", monitor: "samsung"}
     keyboard: "ck87"
    monitor: "samsung"
    mouse: "logitech" */
    console.log(razen);
    /* Computer {keyboard: "k380", mouse: "lazer", monitor: "lg"}
    keyboard: "k380"
    monitor: "lg"
    mouse: "lazer" */
  

위 예제에 intel, razen의 객체를 보면 setup이 중복되어 나오지만 프로토타입으로 빼준 이후에는 중복되지 않음

객체생성자 상속

객체생성자 함수의 기능을 다른 함수에 상속 할 수 있음

// Animal 객체생성자
function Animal(type, name, sound) {
    this.type = type;
    this.name = name;
    this.sound = sound;
}

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

// Dog 함수
function Dog(name, sound) {
    Animal.call(this, 'dog', name, sound);
}
Dog.prototype = Animal.prototype; // Animal을 Dog에 상속

// Cat 함수
function Cat(name, sound) {
    Animal.call(this, 'cat', name, sound);
}
Cat.prototype = Animal.prototype; // Animal을 Cat에 상속

const dog = new Dog('아깽이', '왈왈');
const cat = new Cat('캣초딩', '야옹');

dog.say(); // 왈왈
cat.say(); // 야옹

클래스

객체생성자로 만들었던 코드를 좀 더 깔끔하게 만들어주며 상속도 쉽게 해줄수 있음

class Animal {
    constructor(type, name, sound) { // constructor 안에 파라미터를 넣어주는 것 같음
        this.type = type;
        this.name = name;
        this.sound = sound;
    }
    say() { // console.log 해보면 프로토타입 건 것과 같다고 나옴
        console.log(this.sound);
    }
}

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

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