[클래스] 자바스크립트 클래스(class)와 상속(inheritance)을 알면 객체지향이 쉬워질 것

같아서 시작했는데 더 모르겠어요... 어떡하지 어떻카지 오토카지 우뚜카지 (주절주절)

클래스(class)

객체지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메서드를 정의한 틀
- 클래스는 보통 대문자로 시작
- 클래스에 정의된 속성과 메서드는 인스턴스에서 사용
- 객체를 만드는 생성자 함수를 포함

   <script>
        // 클래스 생성
        class Square {
            // 생성자 생성
            constructor (length) {
               this.length = length
            }

            // 정사각형 둘레 구하는 메소드
            getPerimeter() {
                return 4 * this.length
            }

            // 정사각형 넓이 구하는 메소드
            getArea() {
                return this.length ** 2
            }
        }

        // 객체 선언
        const square = new Square(10)

        // 출력
        console.log(`정사각형의 둘레 : ${square.getPerimeter()}`)
        console.log(`정사각형의 넓이 : ${square.getArea()}`)
    </script>

 

• 생성자(constructor) : 인스턴스를 생성하는데 사용하는 함수로 return값을 만들지 않는다. 클래스 내에 하나의 생성자만 존재할 수 있다.
• 인스턴스(instance) : new 클래스 이름() 으로 선언하며 클래스를 기반으로 만든 객체이다. 즉, 클래스의 실제 객체이며 여러 개를 생성할 수 있다. 
• new 키워드 : 인스턴스를 만들 때 사용하며 즉시 생성자 함수가 실행되고 변수에 인스턴스가 할당된다. 인스턴스를 생성하면 해당 인스턴스가 this의 값이 된다.

 * this : 인스턴스 객체를 의미

 

정리하면,

클래스의 생성자는 인스턴스를 초기화하고, 각 인스턴스는 클래스의 메서드를 호출해 특정 동작을 수행하는 역할

 

 

그래서 클래스를 왜 사용하는걸까❓

- 클래스는 객체 지향 프로그래밍의 핵심 개념 중 하나이다! 코드를 객체 단위로 구조화하여 유지보수성과 재사용성을 높일 수 있고

- 또 클래스를 사용하면 상속, 캡슐화, 다형성 등의 객체 지향적인 개념을 쉽게 구현할 수 있다.

 

---

상속(inheritance)

부모 클래스의 속성과 메서드를 상속 받아 자식 클래스가 확장하고 재사용 하는 것

    <script>
        // 클래스 생성
        class Rectangle {
            // 생성자 생성
            constructor (width, height) {
               this.witdh = width
               this.height = height
            }

            // 사각형 둘레 구하는 메소드
            getPerimeter() {
                return 2 * (this.witdh + this.height)
            }

            // 사각형 넓이 구하는 메소드
            getArea() {
                return this.witdh * this.height
            }
        }

        // 정사각형 클래스(자식) - 부모 클래스 : Rectangle
        class Square extends Rectangle {
            constructor (length) {
                super(length, length)
            }
        }
        // 객체 선언
        const square = new Square(20)

        // 출력
        console.log(`정사각형의 둘레 : ${square.getPerimeter()}`)
        console.log(`정사각형의 넓이 : ${square.getArea()}`)
    </script>

 

• extends 키워드 : 클래스의 자식 클래스 생성
• square 클래스 내부에 getPerimeter(), getArea() 메서드를 따로 작성하지 않아도 부모 클래스인 Rectangle에서 메서드를 상속 받아 사용할 수 있다.
• super() : 부모 생성자를 호출

---

오버라이딩(overriding)

상속받은 부모의 메소드를 재정의 하는 것

    <script>
        
        class LifeCycle {
            call () {
                this.a()
                this.b()
                this.c()
            }
            a () {console.log('a() 메소드를 호출합니다.')}
            b () {console.log('b() 메소드를 호출합니다.')}
            c () {console.log('c() 메소드를 호출합니다.')}
        }
        // 상속
        class Child extends LifeCycle {
            //오버라이딩
            a() {
                super.a() // 부모의 a 호출
                console.log('자식의 a() 메소드입니다.')
            }
        }

        new LifeCycle().call() // 부모의 a,b,c 결과를 호출
        new Child().call() // 자식의 a 결과를 호출, 부모의 b,c 결과를 호출
    </script>

 

- 별도의 객체 선언 없이 부모 클래스로부터 상속받은 함수와 변수들을 그래도 사용할 수 있다.

- super.메서드() : 자식 클래스에서 부모 클래스의 메서드 호출

 

참조 사이트 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain