ES6의 클래스 및 클래스 상속

2024년 07월 04일 by이가은

저희가 프로토타입을 활용하여 직접 구현해봤던 클래스는 ES6의 class를 통해 간편히 사용할 수 있습니다!

ES5와 ES6의 클래스 문법 비교

var ES5 = function (name) {
   this.name = name;
};
ES5.staticMethod = function () {
   return this.name + ' staticMethod';
};
ES5.prototype.method = function () {
   return this.name + ' method';
};
var es5Instance = new ES5('es5');
console.log(ES5.staticMethod()); // es5 staticMethod
console.log(es5Instance.method()); // es5 method
 
var ES6 = class {
   constructor(name) {
      // 생성자 함수
      this.name = name;
   }
   static staticMethod() {
      // 생성자 함수(클래스) 자신만이 호출 가능
      return this.name + ' staticMethod';
   }
   method() {
      // 자동으로 prototype 객체 내부에 할당되는 메서드로, 인스턴스가 프로토타입 체이닝을 통해 마치 자신의 것처럼 호출 가능
      return (this.name = ' method');
   }
};
var es6Instance = new ES6('es6');
console.log(ES6.staticMethod()); // es6 staticMethod
console.log(es6Instance.method()); // es6 method

ES6의 클래스 상속

var Rectangle = class {
	constructor (width, hegith) {
		this.width = width;
		this.height= height;
	}
	getArea () {
		return this.width * this.height;
	}
}
var Square class extends Rectangle {
	constructor (width) {
		super(width, width);
	}
	getArea() {
		console.log('size is:', super.getArea());
	}
}