JavaScript 객체에 메서드를 추가하는 방법 총정리

JavaScript 객체에 메서드 추가하기

JavaScript 객체에 메서드를 추가하는 것은 객체 생성자(object constructor)에 메서드를 추가하는 것보다 훨씬 간단합니다. 기존 객체의 속성에 함수를 할당하기만 하면 되기 때문입니다.

이미 생성된 객체에 새로운 속성을 정의하듯이, 그 속성 값으로 함수를 지정하면 해당 함수가 곧바로 객체의 메서드로 동작합니다.

예제

아래 예제에서는 먼저 객체 타입을 생성한 뒤, 각 객체의 속성들을 정의합니다. 속성 생성이 완료되면 각 객체에 개별적으로 메서드를 할당하고, 이 메서드를 통해 속성 값에 접근하여 원하는 결과를 출력합니다.

<html>
<body>
<p id = "prop"></p>
<script>
   function Business(name, property, age, designation) {
      this.Name = name;
      this.prop = property;
      this.age = age;
      this.designation = designation;
   }
   var person1 = new Business("Trump", "$28.05billion", "73", "President");
   var person2 = new Business("Jackma", "$35.6 billion", "54", "entrepeneur");
   person1.det = function() {
      return this.Name + " "+" has a property of net worth "+ "" + this.prop;
   };
   person2.det = function() {
      return this.Name + " "+" has a property of net worth "+ "" + this.prop;
   };
   document.write(person2.det() +" and "+person1.det());
</script>
</body>
</html>

실행 결과

Jackma has a property of net worth $35.6 billion and Trump has a property of net worth $28.05billion

핵심 포인트

생성자 함수 자체에 메서드를 추가하면 모든 인스턴스가 영향을 받지만, 개별 객체에 직접 메서드를 할당하면 해당 객체에만 적용됩니다.
메서드 내부에서 this 키워드를 사용하면 해당 객체의 속성 값에 접근할 수 있습니다.
여러 객체가 동일한 메서드를 공유해야 한다면 prototype을 활용하는 것이 더 효율적입니다.