[JavaScript]프로토타입의 프로퍼티

프로토타입의 프로퍼티

프로토타입 확장에서 프로토타입 객체인 Object.prototype에 새로운 함수를 추가하는 방법을 소개하였습니다.

[JavaScript]프로토타입 확장(prototype extend)

즉, 프로토타입 객체도 일반 객체처럼 동적으로 프로퍼티를 추가 또는 삭제할 수 있습니다.

다음 예제는 최상위 프로토타입 객체인 Object.prototype에 두 개의 프로퍼티를 추가합니다.

// address 프로퍼티 추가(문자열)
Object.prototype.address = 'Seoul';

// show 프로퍼티 추가(함수)
Object.prototype.show = function() {
  console.log('show() 메서드 호출!'); 
}

console.dir(Object.prototype);

[실행 결과]

Object.prototype 객체를 확인하면 address, show 프로퍼티가 추가된 것을 확인할 수 있습니다. 즉, 프로토타입은 객체이며, 프로퍼티를 추가할 수 있습니다.

그리고 프로토타입 객체의 프로퍼티는 delete 연산자를 사용하여 제거할 수 있습니다.

다음 예제는 delete 연산자로 Object.prototype 객체의 hasOwnProperty 프로퍼티를 제거합니다.

delete Object.prototype.hasOwnProperty;

var obj = {
  name: 'Bob'
}

console.log(obj.hasOwnProperty('name'));

[에러 내용]

hasOwnProperty 프로퍼티가 제거되었으므로 객체에서 hasOwnProperty 메서드를 호출할 수 없습니다. 따라서, 프로토타입 객체의 프로퍼티를 제거하는 경우 JavaScript 표준 API를 제거하지 않도록 주의할 필요가 있습니다.

---

프로토타입의 메서드

프로토타입 객체는 함수인 프로퍼티를 호출하기 위해 점 표기법을 사용하므로 메서드를 가질 수 있습니다.

Object.prototype.show = function() {
  console.log('show() 메서드 호출!'); 
}

Object.prototype.show(); // show() 메서드 호출!

그렇다면, 프로토타입 메서드 내부에서 this를 사용한다면 this는 어디에 바인딩될까요?

"메서드와 this"에서 설명했듯이 메서드에 사용된 this는 메서드를 호출한 객체로 바인딩됩니다.

[JavaScript]메서드와 this(Method and this)

동치 연산자를 사용하여 this와 Object.prototype를 비교하면, true가 반환되는 것을 확인할 수 있습니다.

Object.prototype.showThis = function() {
  console.log(this === Object.prototype); 
}

Object.prototype.showThis(); // true

Object.prototype뿐만 아니라 사용자 정의 함수의 prototype 객체에도 프로퍼티를 추가할 수 있습니다.

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

UserInfo.prototype.showThis = function() {
  console.log(this === UserInfo.prototype);
}

UserInfo.prototype.showThis(); // true

사용자 정의 함수인 UserInfo의 프로토타입에 showThis라는 메서드를 추가했습니다. 그리고 showThis 메서드의 this는 UserInfo의 prototype 객체와 동일합니다.

---

정리

• 프로토타입에도 프로퍼티를 추가하거나 삭제할 수 있습니다.
• 프로토타입 메서드에서 사용된 this는 프로토타입 객체와 동일합니다.