javascript_in_depth_3

프로토타입과 객체지향, 그리고 상속

객체지향 프로그래밍(Object-Oriented Programming)

프로그램을 수많은 '객체'라는 기본 단위로 나누고 이 객체들의 상호작용으로 서술하는 방식이다. 객체지향 개발 방법은 큰 문제를 작게 쪼개는 것이 아니라, 먼저 작은 문제들을 해결할 수 있는 객체들을 만든 뒤, 이 객체들을 조합해서 큰 문제를 해결하는 상향식(Bottom-up) 해결법을 도입한 것이다. 이 객체란 것을 일단 한번 독립성/신뢰성이 높게 만들어 놓기만 하면 그 이후엔 그 객체를 수정 없이 재사용할 수 있으므로 개발 기간과 비용이 대폭 줄어들게 된다.

나무 위키(객체지향언어)

위와 같은 방법을 실제로 구현하려면 프로그래밍 언어가 다음 기능을 제공해야 한다.

1. 캡슐화 : 데이터나 기능을 하나로 묶는 것을 의미한다. 캡슐화의 구현을 위해 객체지향언어는 클래스(Class)라는 키워드를 제공한다. 클래스는 속성과 행동으로 이루어진 틀이며, 이를 실체화한 것을 객체 또는 인스턴스(Instance)라고 한다.
2. 상속 : 공통적인 특징을 정의한 클래스의 기능을 물려받는것을 의미한다.
3. 다형성 : 하나의 메소드나 클래스를 다양한 방법으로 동작시키는 것을 의미한다.

자바스크립트는 객체지향 언어인가?

자바스크립트는 이벤트와 함수 기반 언어이고 객체지향 언어는 아니다. 자바스크립트는 함수 기반 언어인 스키마(Scheme)를 기반으로 만들어진 뒤 자바에서 다양한 프로그래밍 개념들을 가져왔다. 따라서 객체지향 언어는 아니지만 객체지향과 비슷한 특징들을 지원한다. 언어적으로 이를 가능케 하는 개념이 바로 프로토타입(prototype)이다.

프로토타입을 통한 객체지향

자바스크립트의 객체 생성

function과 new 키워드 활용한 객체의 생성

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

var unikys = new Person("unikys", "unikys.tistroy.com");

ECMAScript 6에서 제공하는 class 키워드를 이용한 객체의 생성

class Person {
    constructor(name, blog) {
        this.name = name;
        this.blog = blog;
    }
}

var unikys = new Person("unikys", "unikys.tistroy.com");

class와 function 선언의 차이

• 함수처럼 바로 실행하면 에러가 발생한다
• class 키워드로 클래스를 선언하는 소스가 실행되고 난 이후에 객체생성 가능

this의 이해

this가 어떻게 결정되는지 알려면 함수 호출하는 방법에 대해 살펴봐야 한다. 자바스크립트에서는 대부분 함수가 다음의 네 가지 방법으로 호출된다.

• 일반 함수로의 호출
• 멤버 함수로의 호출
• call() 함수를 이용한 호출
• apply() 함수를 이용한 호출

함수 호출 방법에 따른 this의 변화

this는 함수나 스코프 기반으로 결정되는 것이 아니라 호출 방법에 따라 변경된다. 이러한 점은 특히 콜백 함수를 인자로 넘기는 등의 동작이 일반적인 자바스크립트에서는 중요하게 알고 넘어가야 하는 개념이다.

new 키워드

객체지향 언어에서 많이 쓰이는 new 키워드는 메모리를 새롭게 할당하고 해당하는 클래스의 생성자를 호출함으로써 인스턴스를 초기화한다. 자바스크립트에서 new 키워드는 생성자 함수를 파라미터로 사용하고, 이 생성자 함수를 통해서 객체의 생성과 초기화가 내부적으로 한꺼번에 일어난다.

new 동작

1. 생성자 함수의 타입에 따라 해당 prototype을 가진 object 생성 (기본형인 경우 Object.prototype)
2. 생성자 함수를 생성된 object로 호출한 결과를 저장
3. 결과가 Object인 경우 저장한 호출 결과를 반환, 아니면 생성된 object를 반환

How does the new operator work in JavaScript?

프로토타입의 정의

prototype은 다른 객체들과 공유되는 속성을 제공하는 객체이다. 생성자가 객체를 생성할 때, 객체는 내부적으로 생성자의 prototype 속성을 활용하여 속성들의 레퍼런스를 참조한다. 생성자의 prototype 속성은 constructor.prototype과 같은 표현식으로 프로그램 내에서 접근이 가능하고, 객체의 prototype에 추가된 속성은 상속 받는 객체들까지 함께 공유된다.

ECMAScript 4.3.5 prototype

프로토타입의 사용

prototype을 사용하는 예

constructor.prototype 코드로 접근하여 새로운 함수를 추가하고, 새로 생성된 객체들은 내부적으로 prototype를 공유하여 사용하므로 prototype에 추가된 함수를 사용할 수 있다. prototype의 또 다른 특징은 객체라는 점, 그리고 자바스크립트에서 객체 변경은 아주 자유롭다는 점이다. 따라서, 객체 생성 이후에도 prototype에 새로운 함수와 변수를 추가하거나 수정할 수 있다.

프로토타입과 생성자

function 키워드로 정의한 객체가 생성될 때 다음과 같은 일이 일어난다.

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

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

Person.prototype.getBlog = function() {
  return this.blog;
}

생성자로 활용되는 Person의 경우에 아래와 같은 순환 구조로 속성이 만들어진다.

순환 구조에서 new Person()으로 객체를 생성하면 다음과 같은 구조가 생성된다.

proto라는 프로토타입에 정의된 getName, getBlog 함수는 Person 객체에 들어가지 않고, 계속 proto에 남아있다. 그리고 새로운 Person 객체에서 F를 호출해서 초기화하면 F안에서 this.name과 this.blog를 설정함으로써, 초기화된 Person 객체가 name과 blog 속성을 갖게 된다.

변수의 constructor.prototype 순환 구조 확인
프로토타입에 있는 변수값을 직접 변경하는 예

객체 내의 속성 탐색 순서

객체가 가지는 변수에 접근하려면, 일단 객체 자체의 속성부터 찾은 다음, 있으면 그 속성을 참조하고 없으면 자신의 프로토타입에 저장된 속성들을 검사한다. 그리고 거기에도 없으면 undefined를 반환한다. 여기서 프로토타입은 다른 객체가 될 수 있으므로 프로토타입을 다른 F와 프로토타입을 가지는 객체로 설정하면, 그것이 상속의 기본적인 형태가 된다.

자바스크립트에서 모든 객체는 프로토타입이라는 다른 객체를 가리키는 내부 링크를 가지고 있다. 한 객체의 프로토타입 또한 프로토타입을 가지고 있고, 이것이 반복되다 null을 프로토타입으로 가지는 객체에서 끝난다. 이와 같은 객체들의 연쇄를 프로토타입 체인(prototype chain) 이라고 부른다.

프로토타입 체인을 통한 속성 공유 예

프로토타입의 장단점

• 생성자를 사용하여 객체를 많이 생성하는 경우 : 프로토타입 사용
• 생성자를 사용해서 객체를 조금 생성하는 경우 : 속성을 부여해서 사용

프로토타입 체인이 많아지거나 속성에 접근하는 횟수가 엄청 늘어나게 되면 탐색시간이 길어지는 것이 사용자 경험으로 나타날수 있다는 단점이 있다. 따라서 해당 객체에 자주 접근해서 참조해야 하는 속성이라면 프로토타입에 있는 값은 기본값으로만 활용하고, 객체 자체의 속성으로 새로 추가하여 프로토타입 체인 탐색을 최소화 하는것이 프로토타입과 프로토타입 체인을 활용하는 현명한 방법일 것이다.