📝 오늘 한 것

1. 프로토타입

📚 배운 것

6. 프로토타입

자바스크립트는 프로토타입 기반 언어이다.
클래스 기반 언어에서는 '상속'을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형으로 삼고 이를 복제(참조)함으로써 상속과 비슷한 효과를 얻는다.

1) 프로토타입의 개념 이해

(1) constructor, prototype, instance

prototype / __proto__

어떤 생성자 함수를 new 연산자와 함께 호출하면
생성자 함수에 정의된 내용을 바탕으로 새로운 인스턴스가 생성된다.

이때 인스턴스에는 __proto__라는 (생략 가능한) 프로퍼티가 자동으로 부여되는데
이 프로퍼티는 생성자 함수의 prototype이라는 프로퍼티를 참조한다.

여기서 prototype은 객체이고, 이를 참조하는 __proto__ 역시 객체이다.
prototype 객체 내부에 인스턴스가 사용할 수 있는 메서드를 저장하면
인스턴스에서는 __proto__를 통해 이 메서드에 접근할 수 있게 된다.

실무에서는 가급적 __proto__ 대신 Object.getPrototypeOf() 혹은 Object.create()를 이용하도록 한다.

생략 가능한 프로퍼티 __proto__

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

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

var suzi = new Person("Suzi");
suzi.__proto__.getName(); // undefined

suzi.__proto__.getName()가 undefined를 return 했다.
이는 getName()은 메서드인데 메서드는 호출 시 메서드명 바로 앞의 객체가 곧 this가 되기 때문이다.
이 경우 suzi.__proto__가 this가 되는데 이 객체에는 _name 프로퍼티가 존재하지 않기 때문에 undefined가 반환된 것이다.

suzi.getName(); // Suzi

__proto__는 생략 가능한 프로퍼티이기 때문에 위와 같이 작성하면 Suzi 값을 얻을 수 있다.
suzi.__proto__의 getName 메서드를 사용하면서도 getName 메서드 안에서의 this가 suzi.__proto__가 아니라 suzi를 가리키도록 하는 것이다.
__proto__는 생략 가능한 프로퍼티이기 때문에 생성자 함수의 prototype에 어떤 메서드나 프로퍼티가 있다면, 인스턴스에서도 마치 자신의 것처럼 해당 메서드나 프로퍼티에 접근할 수 있게 된다.

크롬 개발자 도구로 살펴보기

var arr = [1, 2];
console.dir(arr);
console.dir(Array);

어떤 생성자 함수의 인스턴스는 해당 생성자 함수의 이름을 표기함으로써 해당 함수의 인스턴스임을 표기한다. ex) Array(2), Constructor(name) 등
생성자 함수의 prototype과 인스턴스의 __proto__가 동일한 것을 확인할 수 있다. (책 참고)

한편, 출력 결과에서 짙은색은 열거 가능한 프로퍼티, 즉 for in 등으로 객체의 프로퍼티 전체에 접근하고자 할 때 접근 가능한 프로퍼티를 말한다.

(2) constructor 프로퍼티

생성자 함수의 프로퍼티인 prototype 객체 내부에는 constructor라는 프로퍼티가 있다.
생성자 함수의 prototype 프로퍼티를 참조하는 인스턴스의 __proto__ 객체 내부에도 마찬가지이다.
constructor 프로퍼티는 단어 그대로 원래의 생성자 함수를 참조하는 것으로 인스턴스로부터 그 원형이 무엇인지를 알 수 있는 수단이다.

var arr = [1, 2];

var arr2 = arr.constructor(3, 4);
console.log(arr2); // [3, 4]

한편, constructor는 읽기 전용 속성이 부여된 예외적인 경우(기본형 리터럴 변수 - number, string, boolean)를 제외하고는 값을 바꿀 수 있다.
그런데 constructor의 값을 바꿔도 이미 만들어진 인스턴스의 원형이 바뀌거나 데이터 타입이 변하지는 않는다.
즉, constructor를 변경하더라도 그저 참조하는 대상이 변경될 뿐이므로 어떤 인스턴스의 생성자 정보를 알아내기 위해 constructor 프로퍼티를 사용하는 것이 항상 안전하지는 않은 것이다.

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

var p1 = new Person("사람1");
var p1Proto = Object.getPrototypeOf(p1);
var p2 = new p1Proto.constructor("사람2");

p1과 p2는 모두 Person의 인스턴스가 된다.

2) 프로토타입 체인

(1) 메서드 오버라이드

앞서 살펴본 것처럼 prototype 객체를 참조하는 __proto__를 생략하면 인스턴스는 prototype에 정의된 프로퍼티나 메서드를 자신의 것처럼 사용할 수 있다.
한편, 인스턴스가 prototype 객체에 정의된 프로퍼티 또는 메서드와 동일한 이름의 프로퍼티 또는 메서드를 가지고 있는 경우에는 메서드 오버라이드가 발생한다.
메서드 오버라이드란 원본 메서드가 그대로 있는 상태에서 다른 메서드를 그 위에 덮어씌우는 것을 말한다.

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

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

var iu = new Person("지금");
iu.getName = function () {
  return "바로" + this.name;
};

console.log(iu.getName()); // 바로 지금(o), 지금(x)

iu.__proto__.getName이 아닌 iu 객체에 있는 getName 메서드가 호출된 것을 확인할 수 있다.
이는 자바스크립트 엔진이 메서드를 찾을 때 우선 가장 가까운 대상인 iu 객체 자신의 프로퍼티를 검색하고, 없으면 그 다음으로 가까운 대상인 __proto__를 검색하기 때문이다.

메서드 오버라이딩이 이루어져 있는 상황에서 prototype에 있는 메서드에 접근하려면 call 메서드를 이용해 getName 메서드 내부에서의 this를 iu.__proto__ 객체에서 iu 객체로 바꿔줘야 한다.

iu.__proto__.getName(); // undefined
iu.__proto__.getName.call(iu); // 지금

(2) 프로토타입 체인

크롬 개발자 도구의 출력 결과를 다시 살펴보면, 배열 인스턴스의 프로퍼티인 __proto__ 객체 안에 또 다시 __proto__ 프로퍼티가 있는 것을 확인할 수 있다.
이는 prototype 객체 또한 말 그대로 '객체'이기 때문이다.
기본적으로 모든 객체의 __proto__에는 Object.prototype이 연결된다.

var arr = [1, 2];
arr(.__proto__).push(3);
arr(.__proto__)(.__proto__).hasOwnProperty(2); // true

따라서, 인스턴스는 그 인스턴스의 생성자 함수의 prototype의 메서드뿐 아니라 Object.prototype의 메서드도 자신의 것처럼 사용할 수 있다.
생략 가능한 __proto__를 한 번 더 따라가면 Object.prototype을 참조할 수 있기 때문이다.

이처럼 어떤 데이터의 __proto__ 프로퍼티 내부에 다시 __proto__ 프로퍼티가 연쇄적으로 이어진 것을 프로토타입 체인이라고 한다.
이 체인을 따라가며 검색하는 것을 프로토타입 체이닝이라고 한다.

var arr = [1, 2];
Array.prototype.toString.call(arr); // 1,2
Object.prototype.toString.call(arr); // [ object Array ]
arr.toString(); // 1,2

arr.toString = function () {
  return this.join("_");
};
arr.toString(); // 1_2

// cf. Object.prototype.toString() 은 사용자 지정 객체에서 재정의되지 않으면 [ object type ]을 return 한다.

(3) 객체 전용 메서드의 예외사항

어떤 생성자 함수이든 prototype은 반드시 객체이기 때문에 Object.prototype이 언제나 프로토타입 체인의 최상단에 존재한다.
따라서 객체에서만 사용할 메서드는 다른 여느 데이터 타입처럼 프로토타입 객체 안에 정의할 수 없다.
객체에서만 사용할 메서드를 객체가 아닌 데이터 타입에 사용하면 오류를 던지도록 해야 하는데 Object.prototype은 언제나 모든 프로토타입 체인의 최상단에 존재하기 때문에 어떤 데이터 타입이건 거의 무조건 프로토타입 체이닝을 통해 해당 메서드에 접근할 수 있게 되기 때문이다.
이 같은 이유로 객체 전용 메서드들은 Object.prototype이 아니라 Object에 스태틱 메서드로 부여되어 있다. ex) Object.freeze(instance) (o) / instance.freeze() (x)
반대로 Object.prototype에는 어떤 데이터에서도 활용할 수 있는 범용적인 메서드들만 존재한다.

예외적으로 Object.create를 이용하면 Object.prototype의 메서드에 접근할 수 없는 경우도 있다.
Object.create(null)은 __proto__가 없는 객체를 생성한다.

var _proto = Object.create(null);
_proto.getValue = function (key) {
  return this[key];
};

var obj = Object.create(_proto);
obj.a = 1;

console.log(obj.getValue("a")); // 1
console.dir(obj);
// Ojbect
//   a: 1
//   __proto__:
//     getValue: f (key)

obj의 __proto__에는 getValue 메서드만 존재할 뿐 __proto__ 및 constructor 프로퍼티가 존재하지 않는다.
이렇게 만들어진 객체는 일반적인 데이터에서 반드시 존재하던 내장 메서드 및 프로퍼티들이 제거되어 기본 기능에 제약은 생겼지만 객체 자체의 무게가 가벼워져 성능성 이점을 가진다.

(4) 다중 프로토타입 체인

대각선의 __proto__를 연결해나가기만 하면 무한대로 프로토타입 체인 관계를 이어나갈 수 있다.
__proto__가 참조하는 대상(즉, 생성자 함수의 prototype)이, 연결하고자 하는 '상위 생성자 함수의 인스턴스'를 바라보도록 해주면 된다.

var Grade = function () {
  var args = Array.prototype.slice.call(arguments);
  for (var i = 0; i < arguments.length; i++) {
    this[i] = args[i];
  }
  this.length = args.length;
};

var g = new Grade(100, 80);

변수 g에는 Grade 생성자 함수의 인스턴스가 담겨 있는데, 이는 유사배열객체이다.
유사배열객체에 배열 메서드를 적용하려고 한다.

첫 번재 방법으로 call/apply 메서드를 사용할 수 있다.

var arr2 = Array.prototype.push.call(g, 60);
console.log(arr2); // [100, 80, 60]

두 번째 방법으로 아예 인스턴스에서 배열 메서드를 직접 쓸 수 있게끔 할 수 있다.
이 경우 배열 메서드를 사용하기 위해 연결이 필요한 상위 생성자 함수는 Array() 이므로 다음과 같은 코드를 추가했다.
생성자 함수 Grade의 prototype이 배열의 인스턴스를 바라보도록 한 것이다.

var Grade = function () {
  var args = Array.prototype.slice.call(arguments);
  for (var i = 0; i < arguments.length; i++) {
    this[i] = args[i];
  }
  this.length = args.length;
};

Grade.prototype = []; // 인스턴스 생성 전에 추가해야 한다

var g = new Grade(100, 80);

g.pop();
console.log(g); // Grade(1) [100]

✨ 내일 할 것

1. 클래스