Javascript 생성자(Constructor)와 클래스(Class)

자바스크립트 ES6이전에는 Class를 사용할 수 없어서 대용으로 생성자와 프로토 타입을 사용해서 클래스처럼 사용할 수 있었다.

기존의 방식 생성자와 프로토 타입 코딩 나쁜 방식과 좋은 방식을 먼저 보자.

 

//나쁜 방식( 생성자 내부에 메서드를 넣는 행위)
//하나씩 생성시마다 메서드 메모리를 줘야해서 메모리 낭비됨.

function Person (name,age,value,lang) {
    this.name=name;
    this.age=age;
    this.value=value;
    this.lang=lang;
    
    this.sum = function(){
        return this.age+this.value;
    }
}
let kim = new Person("김씨",23,55,"chn");

//메서드 변경
kim.sum= function (){ // function () 사이에 메서드 명을 작성해줘도된다. function sum()
	return this.age;
}

console.log(kim);
console.log(kim.sum());

//좋은 방식
function Person (name,age,value,lang) {
    this.name=name;
    this.age=age;
    this.value=value;
    this.lang=lang;
}
// 메서드를 프로토 타입으로 따로 빼서 메모리낭비를 줄일 수 있고
// 메서드 리턴값을 바꿔야 한다고 하더라도 필요로하는 객체에서 메서드만 바꿔줄수 있음.
Person.prototype.sum = function (){
	return this.age+this.value;
}

let kim = new Person("김씨",23,55,"chn");

//메서드 변경
kim.sum= function (){ // function () 사이에 메서드 명을 작성해줘도된다. function sum()
	return this.age;
}
console.log(kim);
console.log(kim.sum());

이렇게 구성을 해야 했던 것이 ES6이후에 Class가 도입되면서!  

 

class Person{
    constructor(name,age,value,lang){
        this.name= name;
        this.age=age;
        this.value=value;
        this.lang=lang;
    }

    sum(){

        return 'class'+(this.age+this.value);

    }
}

let kim = new person("김씨",23,55,"chn");
kim.sum= function(){
	return 'class'+this.age;
}
console.log(kim);
console.log(kim.sum());

 기존의 프로토 타입 언어였던 자바스크립트를 다른 객체지향 언어처럼 클래스를 사용할 수 있게 됐다. 

 

바벨에서 ES6 클래스방식을 ES5이하 방식으로 변경하면 무려... 엄청난 코드가 나오는데 쉽게 사용할 수 있게 됐다.

아래에서 확인해보자. 안나오면 엔터라든지 줄 삭제하면 볼 수 있다.

https://babeljs.io/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=MYGwhgzhAEAOCmAnCB7AdgbwFDV9Y6EALogK7BEqIAUaYAtvADRgDmzAbmCKc-GqwCU2PKOhEAFgEsIAOjqMAvNAXwA3DjG5JM2W3iL9GrdulyuPAxd7GTOuf1aLHt3AF8sm3BFL1qwzxNoRHgiUkQ0aAByUEgIKIBqans9dgSU63hBDS9oDzcgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.8.6&externalPlugins=

Babel · The compiler for next generation JavaScript