[Javascript] 생성자함수, 클래스, 인스턴스의 this

생성자 함수

생성자 함수는 어떤 공통된 성질을 지니는 객체를 생성하는데 사용하는 함수라고 정의한다.

객체지향 언어에서는 생성자를 클래스(class)라고 하고, 클래스를 통해 만든 객체를 인스턴스(instance)라고 한다.

예를들어, '인간'의 공통 속성들을 생각해보면 직립 보행, 언어 구사, 도구 사용 등 이 있다면 이런 공통 속성들을 모아 인간집합을 정의한 것이 바로 클래스이고, 각 사람들은 인간 클래스에 속하는 인스턴스이다. 이러한 인스턴스는 공통점들도 있지만 저마다의 개성도 존재할 수 있다. 생성자(클래스)는 구체적인 인스턴스를 만들기 위한 일종의 틀이라고 생각하면된다. 이 틀에는 해당 클래스의 공통 속성들이 준비되어있고, 여기에 구체적인 인스턴스의 개성을 더해 개별 인스턴스를 만든다.

 

자바스크립트는 함수에 생성자로서의 역할을 함께 부여했다. 이때 new 명령어와 함께 함수를 호출하면 해당 함수가 생성자로 동작한다.

이렇게 어떤 함수가 생성자 함수로서 호출된 경우 내부에서의 this는 곧 새로 만들 구체적인 인스턴스 자신이다.

생성자 함수를 호출(new 명령어와 함게 함수를 호출)하면 우선 생성자의 prototype 프로퍼티를 참조하는 __proto__라는 프로퍼티가 있는 객체(인스턴스)를 만들고, 미리 준비된 공통 속성 및 개성을 해당 객체(this)에 부여한다.

var Cat = function (name, age){
	this.bark = '야옹';
    this.name = name;
    this.age = age;
};

var choco = new Cat('초코', 7);
var nabi = new Cat('나비', 5);
console.log(choco, nabi);

결과

Cat{bark: '야옹', name:'초코', age: 7}
Cat{bark: '야옹', name:'나비', age: 5}

결과를 보면 기존에 this에 대한 전역객체로 출력되는게 아닌걸 확인할 수있는데 이게 바로 함수를 생성자 함수로서 호출하면 내부에서의 this는 새로만들어지는 인스턴스 자신이 되는 것이다. 따라서 생성자 함수 내부에서 this는 choco 인스터스와 nabi 인스턴스를 가리킨다.