14. 프로토타입 2탄 - 메소드 오버라이딩, 오버로딩, 섀도잉

안녕하세요. 좋아요요정입니다!

12. 객체지향 프로그래밍 이해하기, 13.프로토타입 기반 객체지향 프로그래밍 이해에 이어서

객체지향 프로그래밍에서 상속을 구현할 때 중요하게 여기는 요소 중 하나인 메소드 오버라이딩과 오버로딩에 대해 알아보겠습니다.

 

 

 

---

오버라이딩

부모가 되는 생성자함수, 클래스가 갖고있는 메서드를 자식 생성자함수, 클래스, 객체에서 같은 이름으로 재정의하여 사용하는 방식입니다. 

이때 자식 생성자함수, 클래스, 객체에 의해 가려진 부모의 메서드를 섀도잉이라고 합니다.

 

예시를 보겠습니다. 

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

Person.prototype.cook = function (menu) {
  console.log(`${this.name}가 ${menu}요리를 합니다.`);
};

const mom = new Person("엄마");
mom.cook('김치찌개');

const chef = new Person("셰프");
chef.cook = function(menu) {
	console.log(`${this.name}가 레스토랑에서 ${menu}요리를 합니다.`);
}

chef.cook('파스타');

부모가 되는 생성자함수 Person이 있습니다.

cook이라는 메서드를 가지고 있고, 인자로 요리명을 받아서 "${요리명}요리를 합니다."를 출력합니다.

그리고 자식 객체 인스턴스 Mom과 Chef가 있습니다.

Chef는 cook 메서드 "레스토랑에서 ${인자값} 요리합니다."를 정의해줬습니다.

mom객체에서 cook을 출력하면 person.prototype의 cook메서드가 출력됩니다.

단계대로 설명하면, Person 생성자 함수를 만들 때 prototype이 함께 생성됩니다.

Person.prototype 에 cook메소드를 구현합니다.

객체 인스턴스 mom을 생성합니다.

mom.cook을 실행하게 되면 실행한 위치를 먼저 조회하고 프로토타입 체인에 의해 상위 요소로 이동해 cook을 찾습니다. Person.prototype에 등록되어있는 cook을 조회하고 실행됩니다. 

 

 

 

객체 인스턴스 chef를 생성합니다.

chef에 동일한 이름을 가진 cook메소드를 등록합니다.

chef.cook을 실행하게되면 실행된 위치에 존재하는 동일한 식별자 cook메소드가 먼저 조회되고 실행이 됩니다.

이와 같이 같은 이름의 메서드를 등록하는걸 오버라이딩이라고 하고, 오버라이딩이나 상속관계로 인해 프로토타입에 등록된 메서드에 접근하지 못하게 되는 현상을 섀도잉이라고 합니다.

 

출력을 하면 아래와 같이 출력됩니다.

 

 

 

---

오버로딩

함수 이름은 동일하지만, 매개변수의 타입이나 개수가 다른 메서드를 구현하여 메서드들을 매개변수에 의해 구별하여 호출하는 방식입니다.

타입을 좀 더 까다롭게 사용하는 언어에서 활용되는 방식이며, 매개변수의 타입을 지정해 다른 메서드를 구현한다는 문장 그대로의 식별이 가능하다고 합니다. 그리고 매개변수나 인수가 다른 경우 에러가 출력됩니다. 인수로 들어오는 각각의 유형에 맞게 실행되도록 처리해야 합니다. 

 

하지만 자바스크립트의 경우 매개변수에 타입을 지정할 수 없고, 매개변수와 인수의 값이 달라져도 에러가 없이 사용 가능합니다. 또한 프로토타입의 체인 상에서 동일한 식별자의 경우 상위 메서드에 접근하지 못하는 섀도잉현상이 되어 조회되지 않았습니다. 애초에 자바스크립트에서는 오버로딩이 지원되지 않습니다.

굳이 필요하다면 대신 함수의 arguments 객체를 이용해 이와 비슷한 현상을 구현해줄 수 있습니다.

 

arguments객체에 매개변수로 들어온 인수의 타입이나 수량을 확인한 뒤 다른 메서드를 실행한다거나 코드블럭을 실행하는 방법으로 진행할 수 있습니다. 

const jiu = new Person("좋아요요정");

jiu.cook = function(menu, num) {
	switch (arguments.length) {
    	case 0:
        	console.info(`요리할 메뉴를 입력해주세요.`);
            break;
    	case 1:
            console.log(`${this.name}가 ${menu}를 요리합니다.`);
            break;
        case 2:
            if(typeof(arguments[1]) === 'number') {
            	console.log(`${this.name}가 ${menu}를 ${num}개 요리합니다.`);
            } else {
                console.error(`요리는 한번에 1종류만 가능합니다. ('요리', '수량')을 입력해주세요.`);
            }
            break;
         default:
         	console.info(`('요리', '수량')을 입력해주세요.`);
            break;
        }
    }

 

 

 

---

객체지향과 프로토타입 부분의 원리를 공부하는 좋은 시간이 되고 있습니다.

블로그 글로는 열심히 작성했는데, 스터디를 진행 중 "객체지향 프로그래밍이란?"이라는 퀴즈에 어버버하며 떠오르는 대로 순서없이 내뱉었네요.. 가장 중요한 핵심문장은 잊고 응용하고 덧붙힌 살들만 주절거리게 되었습니다.. 스코프를 묻는데 스코프체인을 설명하고 말이예요.. 그래서 머릿속에 정리가 제대로 되지 않았구나!! 깨달았습니다.

배운 내용을 말하는 것도 어려운데, 누군가에게 설명하고 이해시킨다는게 정말 대단한 일이구나 다시 깨닫게 되었네요.

그리고 블로그 글 작성이 공부의 끝이 아니라, 기본을 제대로 이해하고 말로 설명할 수 있게끔 연습하는게 중요하겠다 배웠습니다.

다시 한번 돌아보는 계기가 되었습니다. :) 스터디를 진행해주시는 훈님 감사합니다!! 

화이팅!! 행복한 코딩라이프되세요~~ ! 

 

JavaScript 스터디 팀 러버덕과 함께 합니다.