오버라이딩과 프로퍼티 섀도잉

오버라이딩이란?
자식이 부모가 가지고 있는 프로퍼티 또는 메서드를 재정의 해서 사용하는 것을 말합니다.

아래의 코드를 봅시다.

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

SoccerPlayer.prototype.say = function () {
  return `저의 이름은 ${this.name} 이고 소속팀은 ${this.myTeam} 입니다.`;
};

const tom = new SoccerPlayer('tom', 3, '토트넘');

console.log(tom.say());
// 저의 이름은 kane 이고 소속팀은 토트넘 입니다.

위와 같이 SoccerPlayer 생성자 함수로 tom 이라는 객체를 생성 하였습니다.
tom 이 다른 팀으로 이적하고 싶다고 말한다고 가정 해 봅시다. 어떻게 해야 할까요?

tom 객체의 프로토타입의 메서드와 같은 이름인 say 메서드를 tom 객체에 추가 합니다. 그리고 say 메서드의 반환 값으로 다른 팀으로 이적하고 싶다는 말을 반환 합니다.

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

SoccerPlayer.prototype.say = function () {
  return `저의 이름은 ${this.name} 이고 소속팀은 ${this.myTeam} 입니다.`;
};

const tom = new SoccerPlayer('tom', 3, '토트넘');

tom.sayMyTeam = function () {
  return `저의 이름은 ${this.name} 입니다. 저는 다른팀으로 이적하고 싶어요. `;
};

console.log(tom.sayMyTeam());
// 저의 이름은 tom 입니다. 저는 다른팀으로 이적하고 싶어요. 

위와 같이 프로토타입의 메서드와 같은 이름을 가진 메서드를 객체에 추가하면 프로토타입의 메서드는 가려지게 됩니다. 이것을 프로퍼티 섀도잉 이라고 합니다.

프로토타입 프로퍼티, 메서드 삭제

프로토타입의 프로퍼티나 메서드는 어떻게 삭제 해야할까요?
위의 코드를 예를 들면

delete tom.sayMyTeam;

위와 같이 delete 를 사용하면 프로토타입의 sayMyTeam 메서드는 삭제가 될까요?
아닙니다. 이와 같이 하위 객체를 통해 프로토타입의 변경이나 삭제는 불가능 합니다. 프로토타입의 프로퍼티, 메서드를 삭제하려면 직접 프로토타입에 접근해서 삭제 해야 합니다.

delete SoccerPlayer.prototype.sayMyTeam;
or
delete tom.__proto__.sayMyTeam;

위와 같은 코드로 작성해서 프로토타입에 접근하면 프로토타입 메서드를 삭제 할 수 있습니다.

console.log(tom.__proto__); // { sayMyTeam: [Function (anonymous)] }
delete tom.__proto__.sayMyTeam;

console.log(tom.__proto__); // {}

위와 같이 sayMyTeam 메서드가 프로토타입에서 삭제 된 것을 확인 할 수 있습니다.