class

• 자바스크립트는
  • 프로토타입 기반 객체지향 언어, 객체지향 프로그래밍 능력이 있음
    
    • 클래스가 필요 없음.  ES5까지는 클래스 없이, 생성자 함수+프로토타입으로 객체지향 언어의 상속 구현 가능
• ES6부터 클래스 기반 언어를 사용하는 프로그래머들을 위하여 C#, Java와 비슷한 새로운 객체 생성 메커니즘 제시
• 클래스는 함수

 

Class vs. 생성자 함수

	class	생성자 함수
new연산자 없이 호출	X  에러 발생	O 일반 함수로 호출됨
상속을 지원하는 extends와 super키워드 제공	O	X
호이스팅	X	O 함수 선언문으로 정의된 생성자 함수는 '함수' 호이스팅 function hi(){} 함수 표현식으로 정의한 생성자 함수는 '변수' 호이스팅 let hi = function(){}
strict mode 실행	O 해제 불가능	X
프로퍼티 attribute [[Enumerable]]의 값이 false (열거되지 않음)	O	O

2022.08.17 - [Javascript] - 함수

 

class는 object를 뽑아내는 기계

var bom = {
 age: 6,
 sex: 'female',
 character: 'sensitive'
}

var mamma = {
 age: 7,
 sex: 'male',
 character: 'eater'
}

var guru = {
 age: 3,
 sex: 'female',
 character: 'timid'
}

//new연산자로 객체 만들기 
function dog(){
 this.age = 4; 
 this.sex = 'male';
 this.character = 'outgoing'
 }
 
 var marron = new Dog();
 console.log(marron); //dog {age: 4, sex: 'male', character: 'outgoing'}
 
 //객체에 매개변수 활용해서 값 넣기
 function dog(puthere){
 this.age = 4; 
 this.sex = 'male';
 this.character = puthere
 }
 
 var marron = new Dog(cute);
 console.log(bom); //dog {age: 4, sex: 'male', character: 'cute'}

 

ES6 Class 문법

: function과 this. 대신 class, constructor를 사용하여 만들 수 있음, 부모-자식 상속 기능 

class Dog {
 constructor(){
  this.age = 4; 
  this.sex = 'male';
  this.character = 'outgoing'
 }
}

new Dog()

출처

코딩애플 | 객체지향 Class 문법 10분만에 이해시켜줌 (자바스크립트)

모던 자바스크립트 Deep Dive