[ 자바스크립트 ] 클래스 (class)

김수연·2022년 9월 28일
0
post-thumbnail

들어가기 전에

생성자 함수와 프로토타입

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

Person.prototype.isAdult = function(){
    if(this.age > 20) return '성인입니다.';
    else return '청소년입니다.';
}

const mark = new Person('Mark', 23);
const bob = new Person('Bob', 14);

console.log(mark.isAdult());
console.log(bob.isAdult());
  • 생성자 함수는 파스칼 케이스로 이름을 설정해 구별
  • 생성자 함수로 만들어진 인스턴스에서 인자를 받아 속성 정의
  • 메서드는 prototype 객체에 정의
  • 생성자 함수로 만드는 인스턴스는 상위 객체에 접근해서 메서드를 사용한다.

생성자 함수: 데이터는 생성자 함수에서, 이를 조작하는 것은 프로토 객체에 따로 작성
class: 객체를 생성하기 위한 템플릿으로 데이터와 이를 조작하는 코드를 하나로 추상화한다.
-> 비록 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가진다


# class

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

    isAdult(){
        if(this.age > 20){
        	return `${this.name}은 성인입니다.`
    	}else{
        	return `${this.name}은 청소년입니다.`
    	}
    }
}


const mark = new Person('Mark', 23);
const bob = new Person('Bob', 14);

console.log(mark.isAdult()); // 'mark은 성인입니다.'
console.log(bob.isAdult()); // 'bob은 입니다.'

📌 class 선언

Class를 정의하는 방법 중 하나는 class 선언을 이용하는 것이다. class를 선언하기 위해서는 클래스의 이름(여기서 "Rectangle")과 함께 class 키워드를 사용해야 한다.

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
  • 인자는 constructor 메서드가 받아서 속성을 정의한다.
  • new 키워드로 인스턴스를 만들 수 있다.

📌 consturctor

  • constructor 메서드는 class 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드이다.
  • 클래스 안에 한 개만 존재할 수 있다.
  • 만약 클래스에 여러 개의 constructor 메서드가 존재하게 되면 SyntaxError가 발생한다.

class 확장

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

    isAdult(){
	    if(this.age > 20){
        	return `${this.name}은 성인입니다.`
    	}else{
        	return `${this.name}은 청소년입니다.`
    	}
	}
}

생성자 함수 확장

function Person2 (name, age){
	Person.call(this,name,age); // Person이 생성자 함수라고 가정	
}

Person2.prototype = Object.create(Person.prototype);
Person2.prototype.constructor = Person2;

class 확장

class Person2 extends Person {
    constructor(name, age){
        super(name, age);
    }
}


const mark = new Person2('Mark', 23);
const bob = new Person2('Bob', 14);

console.log(mark.isAdult()); // 'mark은 성인입니다.'
console.log(bob.isAdult()); // 'bob은 청소년입니다.'

console.log(mark instanceof Person2); // true
console.log(mark instanceof Person); // true
  • 기존 Person 클래스 함수를 extends 키워드로 Person2로 확장하고
  • super 함수로 Person 클래스의 인자를 사용한다.
  • 메서드까지 추가 코드 작성 없이 사용할 수 있다
profile
길을 찾고 싶은 코린이 of 코린이

0개의 댓글