JavaScript - 프로토타입(prototype), 클래스(class)

🤍프로토타입(prototype)

|JS의 상속과 객체

• JS는 객체지향 프로그래밍 언어
• JS의 객체는 key-value 구조의 자료구조
• Python과 같은 클래스기반의 객체지향 프로그래밍 언어의 객체와 다름
• JS는 클래스개념이 존재하지 않고, 프로토타입이라는 개념을 활용해 상속을 구현
• ES5 까지는 이러한 방식으로 원하는 객체를 생성하였으나, ES6+ 부터는 class 키워드로 대체

function Rectangle(width, height) {
 this.width = width
 this.height = height
}
Rectangle.prototype.getArea = function () {
 return this.width * this.height
}
function Square(length) {
 Rectangle.call(this, length, length)
 this.isSquare = true
}
Square.prototype = Object.create(Rectangle.prototype)
Square.prototype.constructor = Square
Square.prototype.getPerimeter = function () {
 return 2 * (this.width + this.height)
}
const s1 = new Square(2)

 

|생성자 함수

생성자 함수와 prototype,constructor의 관계

생성자 함수와 prototype, constructor

 

🤍클래스(class)

|ES6에서 추가된 class 키워드

• 클래스를 사용하는 객체지향 프로그래밍 언어처럼 객체를 생성할 수 있도록 class 키워드 등장
• 상속 역시 훨씬 직관적으로 구성
• 실제로 클래스-인스턴스의 구조로 바뀐 것이 아님. 여전히 내부적으로는 프로토타입을 사용

class Rectangle {
 constructor(width, height) {
 this.width = width
 this.height = height
 } 
 
 getArea() {
 return this.width * this.height
 }
}
class Square extends Rectangle {
 constructor(length) {
 super(length, length)
 this.isSquare = true
 }
 getPerimeter() {
 return 2 * (this.width + this.height)
 }
}
const s1 = new Square(2)

|JS 클래스의 구성 요소

• class 키워드 뒤에 식별자 이름 지정 .(Upper Camel Case 사용)
• 다른 클래스를 상속할 경우 식별자 이름 뒤에 extends 키워드를 붙이고, 상속받고자 하는 클래스이름 기입.
• 중괄호로 블록을 생성하고, 내부 메서드 정의는 function 키워드 없이 정의.
• 생성자 함수는 constructor라는 이름으로 정의. (Python 의 init 과 같음)
• this로 객체의 속성 정의. (Python의 self와 같음)
• 하위클래스에서 생성자 함수를 정의할 경우, super()를 통해 상위클래스의 생성자 함수를 호출해야 함