javascript prototype

subtitle

프로토타입

객체지향 프로그래밍

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다. 자바스크립트를 이루고 있는 거의 모든 것이 객체다. 원시 타입을 제외한 나머지는 모두 객체다.

속성을 통해 여러 개의 값을 하나의 단위로 구성한 자료구조를 ‘객체’라 하며, 객체지향 프로그래밍은 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임이다.

상속

function Circle(radius) {
	this.radius = radius;
	this.getArea = function () {
		return Math.PI * this.radius ** 2;
	}
}

const circle = new Circle(1);
const circle = new Circle(2);

console.log(circle1.getArea === circle2.getArea) // false

console.log(circle1.getArea()) // 3.14...
console.log(circle2.getArea()) // 12.56...
JavaScript
복사

위 예제에서 Circle 생성자 함수는 인스턴스를 생성할 때마다 getArea 메서드를 중복 생성하고 모든 인스턴스가 중복 소유한다. 이처럼 동일한 생성자 함수에 의해 생성된 모든 인스턴스가 동일한 메서드를 중복 소유하는 것은 메모리를 불필요하게 낭비한다. 인스턴스를 생성할 때마다 메서드를 생성하므로 퍼포먼스에도 악영향을 준다. 만약 10개의 인스턴스를 생성하면 내용이 동일한 메서드도 10개 생성된다.

자바스크립트는 프로토타입 기반으로 상속을 구현한다. 상속을 통해 불필요한 중복을 제거해보자.

function Circle(radius) {
	this.radius = radius;
}

Circle.prototype.getArea = function() {
	return Math.PI * this.radius ** 2;
}

const circle = new Circle(1);
const circle = new Circle(2);

console.log(circle1.getArea === circle2.getArea) // true

console.log(circle1.getArea()) // 3.14...
console.log(circle2.getArea()) // 12.56...
JavaScript
복사

프로토타입 객체

프로토타입 객체(또는 줄여서 프로토타입)란 객체지향 프로그래밍의 근간을 이루는 객체 간 상속을 구현하기 위해 사용된다.

Object.prototype

프로토타입 체인의 종점에 있는 최상위 객체이다. 이 객체의 프로퍼티와 메서드는 모든 객체에 상속된다.

프로토타입 체인

프로토타입 체인은 단방향 링크드 리스트로 구현되어야 한다. 순환 참조 프로토타입 체인이 만들어지면 종점이 존재하지 않기 때문에 프로토타입 체인에서 프로퍼티를 검색할 때 무한 루프에 빠진다. 따라서 아무런 체크 없이 무조건적으로 프로토타입을 교체할 수 없도록 __proto__ 접근자 프로퍼티를 통해 프로토타입에 접근하고 교체하도록 구현되어 있다.

하지만 코드 내에서 __proto__ 접근자 프로퍼티를 직접 사용하는 것은 권장하지 않는다. 모든 객체가 __proto__ 접근자 프로퍼티를 사용할 수 있는 것은 아니기 때문이다. 다음과 같이 직접 상속을 통해 Object.prototype을 상속받지 않는 객체를 생성할 수도 있기 때문에 __proto__ 접근자 프로퍼티를 사용할 수 없는 경우가 있다.

// obj는 프로토타입 체인의 종점이기 때문에 Object.__proto__를 상속받을 수 없다.
const obj = Object.create(null); 
JavaScript
복사

따라서 Object.getPrototypeOf 메서드를 사용하는 편이 좋다.

console.log(obj.__proto__) // undefined
console.log(Object.getPrototypeOf(obj)) // null
JavaScript
복사

프로토타입을 교체하고 싶은 경우에는 Object.setPrototypeOf 메서드를 사용할 것을 권장한다.

함수 객체의 prototype 프로퍼티

함수 객체만이 소유하는 prototype 프로퍼티는 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다. 일반 객체는 prototype 프로퍼티를 소유하지 않는다.

(function () {}).hasOwnProperty('prototype') // true
JavaScript
복사

한편, non-constructor 화살표 함수와 ES6 메서드 축약 표현으로 정의한 메서드는 prototype 프로퍼티를 소유하지 않으며 프로토타입도 생성하지 않는다.

// es6 메서드 축약 표현으로 정의
const obj = {
	foo() {}
}

console.log(obj.foo.hasOwnProperty('prototype')) // false
JavaScript
복사

모든 객체가 갖고 있는 __proto__ 접근자 프로퍼티와 함수 객체만이 가지고 있는 prototype 프로퍼티는 결국 동일한 프로토타입을 가리킨다. 하지만 이들 프로퍼티를 사용하는 주체가 다르다.

•

__proto__ 접근자 프로퍼티: 모든 객체가 사용하며 객체가 자신의 프로토타입에 접근 또는 교체하기 위해 사용

•

prototype 프로퍼티: 생성자 함수가 사용하며 생성자 함수가 자신이 생성할 인스턴스의 프로토타입을 할당하기 위해 사용 

모든 프로토타입은 constructor 프로퍼티를 갖는다. 생성자 함수가 생성될 때 constructor 프로퍼티는 prototype 프로퍼티로 자신을 참조하고 있는 생성자 함수를 가리킨다. 따라서 인스턴스 객체는 프로토타입인 prototype의 constructor 프로퍼티를 상속받아 사용할 수 있다.

이처럼 프로토타입과 생성자 함수는 단독으로 존재할 수 없고 언제나 쌍으로 존재한다.

프로토타입 생성 시점

프로토타입은 생성자 함수가 생성되는 시점에 더불어 생성된다. 함수 정의(constructor)가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다.

console.log(Person.prototype) // {constructor: f}

// 함수 호이스팅에 의해 런타입 이전에 자바스크립트 엔진에 의해 먼저 실행된다.
function Persom(name) {
	this.name = name
}
JavaScript
복사

함수 선언문으로 정의된 Person 생성자 함수는 어떤 코드보다 먼저 평가되어 함수 객체가 된다. 이때 프로토타입도 더불어 생성된다. 생성된 프로토타입은 Person 생성자 함수의 prototype 프로퍼티에 바인딩된다.

프로토타입 체인

자바스크립트는 객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없다면 [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다. 이를 프로토타입 체인이라 한다. 프로토타입 체인은 자바스크립트가 객체지향 프로그래밍의 상속을 구현하는 메커니즘이다.

오버라이딩과 프로퍼티 섀도잉

const Person = (function() {
	...
	
	// 프로토타입 메서드 
	Person.prototype.sayHello = ...
}())

const me = new Person('Song')

// 인스턴스 메서드
me.sayHello = function ...

me.sayHello() // 인스턴스 메서드가 호출되며 Person의 프로토타입 메서드는 가려진다.
JavaScript
복사

프로토타입 프로퍼티와 같은 이름의 프로퍼티를 인스턴스 에추가하면 프로토타입 체인을 따라 프로토타입 프로퍼티를 검색하여 프로토타입 프로퍼티를 덮어쓰는 것이 아니라 인스턴스 프로퍼티로 추가한다. 이처럼 상속 관계에 의해 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉이라 한다.

또한 인스턴스 메서드를 삭제해도 프로토타입 메서드에는 영향을 주지 않는다.

delete me.sayHello
me.sayHello() // 프로토타입 메서드가 호출된다.
JavaScript
복사

이와 같이 하위 객체를 통해 프로토타입 프로퍼티를 변경 또는 삭제하는 것은 불가능하다. 프로토타입의 프로퍼티를 변경 삭제하려면 프로토타입에 직접 접근해야 한다.

delete Person.prototype.sayHello;
me.sayHello // TypeError: me.sayHello is not a function 
JavaScript
복사

프로토타입 교체

생성자 함수에 의한 프로토타입 교체

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

  Person.prototype = {
    sayHello() {
      console.log(`Hello, my name is ${this.name}`);
    },
  };

  return Person
})();

const person = new Person("John");
JavaScript
복사

Person.prototype에 객체 리터럴을 할당했는데 프로토타입으로 교체한 객체리터럴에는 constructor 프로퍼티가 없다. 따라서 person 객체의 생성자 함수를 검색하면 Person이 아닌 Object가 나온다.

console.log(person.constructor === Person) // false
console.log(person.constructor === Object) // true
JavaScript
복사

프로토타입을 교체하면 constructor 프로퍼티와 생성자 함수 간의 연결이 파괴된다. 다음의 코드로 연결을 되살릴 수 있다.

Person.prototype = {
    constructor: Person, // consturctor와 생성자 함수 연결
    sayHello() {
      console.log(`Hello, my name is ${this.name}`);
    },
  };
JavaScript
복사

인스턴스에 의한 프로토타입 교체

생성자 함수의 프로토타입 프로퍼티에 다른 객체를 바인딩하는 것은 미래에 생성할 인스턴스의 프로토타입을 교체하는 것이다. 반면 __proto__ 프로퍼티를 통해 프로토타입을 교체하는 것은 이미 생성된 객체의 프로토타입을 교체한다는 차이가 있다.

instanceof 연산자

객체 instanceof 생성자함수
JavaScript
복사

생성자 함수의 prototype에 바인딩된 객체가 좌변의 객체의 프로토타입 체인 상에 존재하면 true로 평가되고, 그렇지 않은 경우 false로 평가된다.

프로토타입의 constructor 프로퍼티가 가리키는 생성자 함수를 찾는 것이 아니라 생성자 함수의 prototype에 바인딩된 객체가 프로토타입 체인 상에 존재하는지 확인한다.

직접 상속

Object.create에 의한 직접 상속

Object.create은 명시적으로 프로토타입을 지정하여 새로운 객체를 생성한다. 하지만 ESLint에서는 Object.prototype의 빌트인 메서드를 직접 호출하는 것은 권장하지 않는다. 왜냐하면 Object.create을 통해 프로토타입 체인의 종점에 위치하는 객체를 생성할 수 있기 때문이다. 이 객체는 Object.prototype의 빌트인 메서드를 사용할 수 없다.

const obj = Object.create(null); // 프로토타입 체인 종점에 존재
obj.hasOwnProperty('a') // TypeError: obj.hasOwnProperty is not a function 
JavaScript
복사

프로퍼티 존재 확인

in 연산자

in 연산자는 확인 대상 객체의 프로퍼티뿐만 아니라 확인 대상 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인하므로 주의가 필요하다.

in 연산자 대신 es6에 도입된 Reflect.has 메서드를 사용할 수 있다. in 연산자와 동일하게 동작한다.

Object.prototype.hasOwnProperty 메서드

프로퍼티 키가 객체 고유의 프로퍼티 키인 경우에만 true를 반환하고 상속 받는 프로토타입의 프로퍼티 키인 경우 false를 반환한다.

프로퍼티 열거

for … in

in 연산자처럼 객체의 프로퍼티 뿐만 아니라 상속받은 프로토타입의 프로퍼티까지 열거 한다. 하지만 toString과 같은 Object.prototype의 프로퍼티는 열거되지 않는데, 그 이유는 toString 메서드가 열거할 수 없도록 정의된 프로퍼티이기 때문이다. (enumerable: false)

for … in 문은 프로토타입 체인 상에 존재하는 모든 프로토타입의 프로퍼티 중, 프로퍼티 어트리뷰트 enumerable 값이 true인 프로퍼티를 순회하며 열거한다.

for … in 문은 열거할 때 순서를 보장하지 않는데, 대부분의 모던 브라우저는 순서를 보장하고 숫자인 프로퍼티 키에 대해서는 정렬한다.

만약 객체 자신의 고유 프로퍼티만 열거하고 싶다면 Object.keys, values, entries를 사용하는 것을 권장한다.

book

모던자바스크립트 딥다이브