Constructor와 Prototype 그리고 Class

임효진·2022년 10월 16일
0

Constructor는 Object를 복사해서 쓰고 싶을때 사용하는 용도입니다. 간단히 복사기라고 생각하면 편할거같습니다

아래의 예시를 보시죠

//여러 직장인 객체가 있습니다.let 직장인A = {name : 'Blake'};
let 직장인B = {name : 'Nikki'};
let 직장인C = {name : 'Ashley'};
//이렇게 쌩 코딩하면 너무 번거롭습니다.

이런 상황에서 Constructor를 사용하는겁니다.  Constructor는 function 키워드를 빌려서 생성합니다.

관습적으로 첫글자는 대문자로 짓습니다. function work()가 아니라 function Work()입니다.

function Machine(이름, 나이) {
//this는 Machine으로부터 생성되는 새로운 객체를 의미합니다.(인스턴스라고 함)//Machine은 생성자 즉 constructor입니다.this.name = 이름;
    this.age = 나이;
}

let person1 = new Machine('Blake', 31);
let person2 = new Machine('Nikki', 27);
let person3 = new Machine('Ashley', 36);
console.log(person1);//Machine { name: 'Blake', age: 31 }console.log(person2);//Machine { name: 'Nikki', age: 27 }console.log(person3);//Machine { name: 'Ashley', age: 36 }

name, age라는걸 받기 때문에 이것을 '상속(inheritance)'이라고 합니다.

Machine constructor가 가진 name, age 속성들을 그대로 물려받아서 오브젝트를 하나 뽑아주는게

물려주는 상속과 비슷하다고 해서 상속이라고 부릅니다.


Prototype

프로토타입은 자바스크립트에만 있는 문법입니다. 상속을 구현할 수 있는 또 하나의 문법입니다.

Machine 안에 보면 prototype이라는 유전자를 원래 가지고 있습니다.(내장으로 딸려있습니다, 일종의 비밀공간)

prototype에 값을 추가하면 상속받은 모든 자식들이 물려받을 수 있습니다.

Machine.prototype.company = 'Apple';

//이러면 person1, person2, person3 모두 company를 쓸 수 있습니다.
  • Prototype에는 여러개의 값을 부여하는 것도 가능하고 함수도 집어넣을 수 있습니다. object처럼 사용가능합니다.
  • Prototype에 추가된 data들은 자식들이 소유하는게 아닌 부모가 소유하고 있습니다.

Q. 그럼 prototype으로 상속시키는거랑 constructor로 상속시키는 것과의 차이는 무엇입니까?

A . 자식들이 값을 직접 가지고 있게 만들고 싶으면 constructor를 사용하고,

부모만 가지고 있고 그걸 자식들이 참조해서 쓰게 만들고 싶으면 prototype으로 상속시키면 됩니다.

⭐️prototype은 생성자(constructor) 함수에만 은밀하게 생성됩니다.

일반적으로 생성하는 object, array에는 prototype이 없습니다.

Constructor를 ES6방식으로 구현하는 상속기능(class)

class Parent {
    constructor(lastName) {
        this.name = lastName;
    }
}

let child = new Parent('Lim');
console.log(child);//Parent { name: 'Lim' }

기존 위의 function부터 시작하는 문법과 기능상 차이는 크게 없으며 가시적으로 표현해줍니다.

profile
프론트 요정임

0개의 댓글

관련 채용 정보