#기본기18_ES6 클래스와 전동적인 함수생성자의 차이점과 활용성

 

차이점 :  GPT씨

1. 문법적 차이

• ES6 클래스: 클래스 선언은 class 키워드를 사용하여 정의됩니다. 클래스 내부에서 메서드는 화살표 함수가 아니라 일반 함수로 정의됩니다. 클래스는 클래스 몸체 안에 있는 메서드들을 포함하며, 클래스는 constructor 메서드를 통해 초기화됩니다.

// ES6 클래스문법
class Person {
	constructor(name, age){
	  this.name = name;
   	  this.age = age;
    }
    introduce() {
    	console.log(`Hello, My name is ${this.name} and I'm ${this.age} years old.`)
    }
}

const person = new Person('kim', 100); 
console.log(person) // Person {name: 'kim', age: 100}
console.log(person.introduce()) // Hello, My name is kim and I'm 100 years old.

• 전통적인 함수 생성자: 함수 생성자는 함수를 사용하여 객체를 생성합니다. 함수 생성자는 보통 함수 내부에 프로토타입을 사용하여 메서드를 정의하고, new 키워드를 사용하여 객체를 생성합니다.

// 생성자함수
function Person (name, age){
	this.name = name;
    this.age = age;
}
Person.prototype.introduce = function() {
	console.log(`Hello, My name is ${this.name} and I'm ${this.age} years old.`)
}

const person = new Person('kim', 100);
console.log(person) // Person {name: 'kim', age: 100}
console.log(person.introduce()) // Hello, My name is kim and I'm 100 years old.

 

2. 상속

• ES6 클래스: 클래스는 상속을 통해 다른 클래스로부터 메서드와 속성을 상속할 수 있습니다. extends 키워드를 사용하여 상속을 정의하고, super 키워드를 사용하여 부모 클래스의 생성자를 호출할 수 있습니다.

class Mankind{
    constructor(gender){
        this.gender = gender;
    }
    sorting() {
        console.log(`I'm ${this.gender}.`)
    }
}

class Person extends Mankind {
	constructor(name, age, gender){
      super(getnder); // 부모 클래스의 생성자 호출
	  this.name = name;
   	  this.age = age;
    }
    introduce() {  // 메소드 sorting은 자동으로 상속됨
    	console.log(`Hello, My name is ${this.name} and I'm ${this.age} years old.`)
    }
}

* 오버라이딩 : 상속받은 메서드를 재정의 하는 것, 자식.메서드() 호출시 새롭게 정의한 메서드가 행된다.

 

• 전통적인 함수 생성자: 함수 생성자를 사용하는 경우에는 프로토타입 체인을 통해 상속을 구현해야 합니다. 이는 복잡하고 오류를 발생시킬 여지가 있습니다.

// 생성자함수

function Mankind(gender){
	this.gender = gender;
}
Mankind.prototype.sorting = function() {
        console.log(`I'm ${this.gender}.`)
    }


function Person (name, age, gender){
	this.name = name;
    // 부모 생성자 호출 및 상속
    Mankind.call(this, gender)
    this.age = age;
}
Person.prototype.introduce = function() {
	console.log(`Hello, My name is ${this.name} and I'm ${this.age} years old.`)
}

// 상속

// 자식 생성자의 프로토타입을 부모 생성자의 인스턴스로 설정하여 상속
Person.prototype = Object.create(Mankind.prototype);

// 자식 생성자의 프로토타입에 constructor 속성을 복구
Person.prototype.constructor = Person;

const person = new Person('kim', 100, "man");
console.log(person.sorting()) // I'm man.

3. 가독성과 유지 보수성

• ES6 클래스: 클래스의 문법은 더 명확하고 간결하며 가독성이 높습니다. 클래스를 사용하면 코드를 더 쉽게 이해하고 유지 보수할 수 있습니다.
• 전통적인 함수 생성자: 함수 생성자는 프로토타입과 this에 대한 개념을 이해해야 하며, 클래스보다 더 복잡한 구조를 가지고 있습니다. 따라서 코드를 이해하기가 어려울 수 있습니다.

 

언제 사용하는 것이 좋을까?

• ES6 클래스: 새로운 코드를 작성할 때는 ES6 클래스를 사용하는 것이 좋습니다. ES6 클래스는 문법이 간결하고 직관적이며, 상속 및 프로토타입 관리가 용이합니다.
• 전통적인 함수 생성자: 기존 코드와의 호환성을 유지하거나 브라우저 호환성을 고려할 때는 전통적인 함수 생성자를 사용해야 합니다. 또한 프로토타입을 직접 다루어야 하는 특수한 상황에서는 함수 생성자를 선택할 수 있습니다.

요약하면, ES6 클래스는 대부분의 경우에 더 선호되는 선택지이며, 전통적인 함수 생성자는 특수한 상황에서만 사용됩니다. 하지만 중요한 것은 코드의 일관성을 유지하고 코드베이스를 가독성 있고 관리하기 쉽게 유지하는 것입니다.

 

 

다음은 getter와 setter에 대해서..

 

 

 

 

 

 

심화학습 : https://urbanbase.github.io/dev/2021/03/28/ECMAScript6.html

Class vs Factory Function, 더 나은 선택은?