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

[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() {} 으로 작성하는게 더 좋습니다. 앞의 형태는 객체가 생성될 때마다 함수가 새로 생기지만 뒤의 형태는 모든 객체가 같은 함수를 공유하는 형태가 되기 때문에 메모리 낭비가 발생하지 않습니다.

댓글(0)

Designed by JB FACTORY