생성자 함수 vs 클래스 ⚖️

surim014·2021년 8월 23일
4

JavaScript

목록 보기
29/29
post-thumbnail

생성자 함수란? 🧐

정의 📋

  • 이름 그대로 객체(인스턴스)를 생성하는 함수

특징 🙌

  • 일반 함수와 동일한 방법으로 생성자 함수를 정의
  • new 연산자와 함께 호출해야만 생성자 함수로 동작
  • new 연산자 없이 호출하게 될 경우, 일반 함수로 동작
  • new 연산자와 함께 생성자 함수를 호출하면 자바스크립트 엔진은 암묵적으로 인스턴스를 생성하고 인스턴스를 초기화한 뒤, 암묵적으로 인스턴스를 반환
  • 명시적으로 this가 아닌, 다른 값을 반환하는 것은 생성자 함수의 기본 동작을 훼손 → 생성자 함수 내부에서 return문은 반드시 생략

문법 🔏

function Person(name, age) {
	this.name = name;
	this.age = age;

	this.sayHello = () => {
		return `Hello, ${this.name}`;
	};
}

const surim = new Person('surim', 100);
console.log(surim);
// Person { name: 'surim', age: 100, sayHello: [λ] }
console.log(surim.sayHello());
// Hello, surim

클래스란? 🧐

정의 📋

  • 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕
  • 새로운 객체 생성 메커니즘

특징 🙌

  • 클래스는 함수이다.
  • 클래스와 생성자 함수 모두 프로토타입 기반의 인스턴스를 생성함 (동일하게 동작하지는 않음)
  • 클래스는 생성자 함수보다 엄격하다.
  • 생성자 함수에서는 제공하지 않는 기능이 제공됨

문법 🔏

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

	sayHello() {
		return `Hello, ${this.name}`;
	}
}

const surim = new Person('surim', 100);
console.log(surim);
// Person { name: 'surim', age: 100, sayHello: [λ] }
console.log(surim.sayHello());
// Hello, surim

생성자 함수 vs 클래스 ⚖️

생성자 함수

  • new 연산자 없이 호출하면 일반 함수로서 호출되기 때문에 별도 처리 필요
  • 생성자 함수는 extends, super 키워드 미제공
  • 함수 선언문으로 정의된 생성자 함수는 함수 자체가 호이스팅이 됨
  • 함수 표현식으로 정의된 생성자 함수는 변수 호이스팅이 발생
  • 암묵적으로 strict mode가 지정되지 않음

클래스

  • new연산자 없이 호출하면 에러 발생
  • 상속을 지원하는 extends, super 키워드 제공
  • 호이스팅이 발생하지 않는 것처럼 동작
  • 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 strict mode 해제 불가
  • 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료함

생성자 함수 && 클래스 ⚖️

  • 프로토타입 기반의 객체지향을 구현
  • 컨벤션으로 파스칼 케이스를 사용 (사용하지 않아도 에러가 발생하지는 않음)
  • 인스턴스를 생성할 수 있는 함수

위의 내용은 생성자 함수와 클래스를 공부하며 개인적으로 정리한 내용입니다.

출처 📝

profile
Junior FrontEnd Developer 😎

2개의 댓글

comment-user-thumbnail
2021년 9월 1일

잘 읽었습니다. 감사합니다 :)

1개의 답글