Front-end/JavaScript

[JS] 자바스크립트에서 오버로딩, 오버라이딩, constructor, arguments

파리외 개발자 2022. 6. 25. 23:02

상속의 개념에 이어서 메소드 오버로딩과 오버라이딩에 대해 알아본다.

 

[JS] 자바스크립트에서 상속

상속 여기 하나의 클래스가 있고 속성1개와 메서드1개를 가지고 있다. 또 하나의 클래스를 정의하는데 아무 내용도 없는 클래스로 만든다. 빈 클래스 MyChild에 new를 사용해 아까 만든 클래스 MyPare

developefeel.tistory.com

 

Constructor

상속 관계에 있는 두 클래스의 인스턴스를 각각 생성해본다.

생성한 인스턴스들의 constructor가 각각 어떤 클래스를 가르키는지 확인해본다.

첫번째 조건문은 실행되는 것으로 보아

par인스턴스의 constructor에는 부모클래스의 인스턴스가 담겨있는 것을 볼 수 있다.

하지만 자식인스턴스인 ch에는 Child가 담겨있지 않아서 

두번째 조건문은 실행되지 않는다.

consturtor에는 해당 클래스의 인스턴스를 담게 되는데,

상속시에는 자식 constructor에 부모 클래스의 정보가 담기게 된다.

즉, ch.constructor에는 Child가 아닌 Parent가 담기므로 조건문이 실행이 되지 않았던 것

상속시에 자식 constructor에 자신의 인스턴스를 담으려면

명시적으로 constructor에 Child를 담아주도록 한다.

  • constructor에는 클래스인스턴스 정보가 들어감
  • 상속시엔 부모 인스턴스가 들어감
  • 명시적으로 자신의 인스턴스를 담아줄 수 있음

 

오버라이드

두 상속관계의 클래스와 생성자를 주고

부모에만 속성1, 메소드1개를 준다.

자식 constructor에 담겨있던 부모인스턴스 정보를

자식 클래스로 바꿔준다.

그리고 자식 클래스에도 부모와 같은 이름의 method를 생성해주며

내용은 부모클래스와 다르게 자식속성 이라고 나타내도록 한다.

인스턴스를 생성하고 child의 method를 호출하면

부모와 자식의 method중 어느것이 호출되는 지 확인한다.

부모인스턴스가 먼저 생성되고 다음 자식 인스턴스가 생성되면서

생성자가 출력된다.

그 후 method는 자식속성으로 나타남을 볼 수 있다.

  • 메소드 오버라이딩은 함수 재정의
  • 부모의 메서드를 자식 클래스에서 이름은 같고 내용은 다르게 해서 정의

 

오버로딩

JS에서 오버로딩 기능은 따로 제공하지는 않지만

arguments를 이용해 비슷하게 구현할 수 있다.

arguments는 함수 호출시 전달하는 매개변수를 array형태로 담고있다.

다만 형태만 그럴 뿐이지 array는 아니라서 내장함수는 사용불가능하고

length와 index만 사용할 수 있다.

sum함수가 전달받는 인자값에 따라 다른 결과를 출력한다.

오버로딩이란 인자의 수에 따라 다른 연산을 하도록 하는데

이를 JS에서는 argument를 이용해 비슷하게 구현할 수 있다.

'Front-end > JavaScript' 카테고리의 다른 글

[JS] Symbol  (0) 2022.08.08
[JS] 중복없는 자료구조, Set  (0) 2022.08.07
[JS] 자바스크립트에서 상속  (0) 2022.06.23
[JS] 클래스 프로퍼티와 메서드  (0) 2022.06.19
[JS] 함수형 설계와 클래스형 설계  (0) 2022.06.17