[JavaScript] 자바스크립트 - 객체 생성자 함수와 프로토타입

안녕하세요. 이번 포스팅에서는 자바스크립트(JavaScript)에서 객체 생성자 함수를 선언하고 객체를 생성하는 방법에 대해서 알아보도록 하겠습니다.

 

---

자바스크립트에서 객체를 생성하기 위해서는 먼저 자바스크립트 엔진에 내장된 객체 생성자 함수(Object Constructor Function)를 통해 먼저 선언을 해야 합니다.

<script>
    function Person(name)
    {
        this.name = name;
      
        this.showName = function(){
            console.log(name);
        }
    }
</script>

▼ 객체 생성자 함수 선언은 function 키워드를 사용하여 나타냅니다. function 함수명(매개변수){} 와 같은 형태로 사용합니다. 함수명은 소문자로 시작해도 무방하지만, 대문자로 시작하는 게 좋습니다. 함수 정의문에는 1개의 속성과 1개의 함수가 등록되어 있습니다. 속성은 this.name = 속성값; 형태로 사용되며 함수는 this.showName = function(){코드} 형태로 사용합니다. 둘 다 this 키워드를 통해 등록하는 걸 확인 할 수 있습니다. 선언된 함수를 통해 실제로 객체를 생성해보겠습니다.

<script>
    function Person(name)
    {
        this.name = name;
      
        this.showName = function(){
            console.log(this.name);
        }
    }

    var persosn = new Person("LKTProgrammer");
    person.showName();
    
</script>

▼ 객체는 var 참조 변수명 = new Person(인자정보)와 같은 형태로 생성합니다. 위 샘플예제에서는 var person = new Person(name)에 해당하며 person 객체를 생성하고 있습니다. 접근연산자 .을 통해 등록된 함수 showName() 함수를 호출하고 있는 형태입니다.

<script>
    function Person(name)
    {
        this.name = name;
    }

    Person.prototype.showName = function(){
        console.log(this.name);
    }

    var person = new Person("LKTProgrammer");
    person.showName();
</script>

▼ 위의 형태를 한 번 살펴보겠습니다. 생성자 함수 정의문에서 showName() 함수를 등록하는 부분이 사라졌습니다. 대신 아래에 Person.prototype.showName = function() {} 같은 형태로 함수를 등록하고 있습니다. Prototype 객체에 함수를 등록한 형태로 Prototype은 원형을 의미합니다. 같은 객체 생성자 함수로 객체를 생성하면 모든 객체에서 해당 함수를 사용할 수 있습니다. this.함수명 = function() {} 형태보다는 함수명.prototype.함수명 = function() {} 으로 작성하는게 더 좋습니다. 앞의 형태는 객체가 생성될 때마다 함수가 새로 생기지만 뒤의 형태는 모든 객체가 같은 함수를 공유하는 형태가 되기 때문에 메모리 낭비가 발생하지 않습니다.