함수의 인스턴스

현재 자바스크립트는 클래스 기능을 제공하지만, 함수로도 클래스와 유사한 형태로 사용할 수 있으며, new 구문을 사용하여 인스턴스를 생성할 수 있습니다.

function Person(name) {
  this.name = name;
  this.getName = function () {
    return this.name;
  };
}

var person = new Person('JYSon');
person.getName(); // JYSon

this

인스턴스가 생성될 때 인스턴스의 실행컨텍스트인 this를 생성합니다. 실행컨텍스트 this에는 멤버변수와 멤버함수(메서드)를 포함할 수 있습니다.

멤버 변수

인스턴스가 생성될 때 this에 변수를 지정할 수 있습니다. 일반 함수처럼 지역변수를 생성하면 함수가 실행되고 종료될 때 같이 사라져 인스턴스로 접근이 불가능합니다.

function P1() {
  var x = 10;
}

function P2() {
  this.x = 10;
}

var p1 = new P1();
var p2 = new P2();

p1.x // undefined
p2.x // 10

P1의 경우 함수가 실행될 때 x변수가 존재하고 실행이 종료되면 같이 사라집니다. 반면, P2의 경우 this에 x변수를 생성하여 인스턴스가 메모리에서 사라지기 전에는 인스턴스를 통해 변수를 접근할 수 있습니다.

메서드

멤버변수와 동일하게 this에 변수를 지정할 수 있고 인스턴스가 메모리에 있을 때까지 접근할 수 있습니다.위 자바스크립트의 특성에서 함수 안에 함수가 들어갈 수 있다와는 다른 형태입니다.

function Square() {
  this.getWidth = function () {
    return 10;
  }
  function getHeight() {
  	return 20;
  }
}

var square = new Square();
square.getWidth(); // 10
square.getHeight(); // Error

class (ES6 ~)

ES6부터 class 구문이 생겨 함수를 통한 인스턴스 생성이 아닌 실제 OOP 처럼 class를 작성하고 사용할 수 있습니다.

class Person {
  constructor(name) {
    this.name = name;
  }
  
  getName() {
  	return this.name;
  }
}

var person = new Person('JYSon');
person.getName(); // JYSon

기본 구조는 OOP의 class와 매우 유사합니다. 하지만 실제 내부 동작을 확인해보면 class도 함수임을 알 수 있습니다.

function Person(name) {
  this.name = name;
  this.getName = function () {
    return name;  
  };
}

var person = new Person('JYSon');
person.getName(); // JYSon

위 두개의 소스는 동일한 동작을 합니다. class를 함수로 변환하는 과정은 추후 Babel 챕터에서 따로 다루도록 하겠습니다.

prototype

자바스크립트는 Prototype 기반의 언어로 함수에 prototype이라는 특수한 객체가 있습니다. OOP의 상속 개념이 자바스크립트에서는 Prototype 기반 상속으로 이루어집니다.

function Person(name) {
  this.name = name;
}

var john = new Person('john');
var eric = new Person('eric');

john.name; // john
eric.name; // eric
john.age = 30;
john.age; // 30
eric.age; // undefined

Person.prototype.hobby = 'develop';

john.hobby; // develop
eric.hobby; // develop

인스턴스에 추가된 속성은 해당 인스턴스에만 존재하고 같은 함수로 생성된 인스턴스에는 존재하지 않습니다. 하지만, 함수의 prototype에 추가된 변수는 해당 함수로 생성된 인스턴스에서 모두 접근이 가능합니다. prototype에 대한 자세한 내용은 Prototype 챕터에서 따로 다루도록 하겠습니다.

정리

자바스크립트의 함수는 OOP 언어처럼 new 구문으로 인스턴스를 생성할 수 있습니다. 실행컨텍스트인 this가 생성되고 이 컨텍스트에 멤버변수와 메서드를 추가할 수 있습니다.
ES6에서 class 구문이 나왔지만, 이것 또한 함수임을 알 수 있습니다. 그리고 class의 상속 또한 prototype 기반으로 작성할 수 있습니다. 함수의 인스턴스화(객체화)에서는 어려운 내용들이 많이 나왔습니다. 우선 간단히 눈으로만 보고 추후에 각각의 챕터로 정리해가겠습니다.

참고자료: https://medium.com/ibare-story/e252506f8525