PROTOTYPE

메소드 상속 및 동작원리

prototype으로 메소드 작성시 new연산자로 인스턴스를 생성하면

각 인스턴스에서 __proto__라는 프로퍼티를 통해 메소드로 접근할 수 있다

function Person(n, a) {
  this.name = n;
  this.age = a;
}
Person.prototype.setOlder = function() {
  this.age += 1;
}
Person.prototype.getAge = function() {
  return this.age;
}

var jiwon = new Person('지원', 30);
var suji = new Person('수지', 25);

이 때 __proto__는 생략이 가능하기 때문에 마치 자신의 것처럼 메소드를 호출할 수 있게 해준다

jiwon.__proto__.setOlder();
jiwon.__proto__.setAge();

jiwon.setOlder();
jiwon.getAge();

하지만 this는 메소드명 앞이 되기 때문에 달라진다

Person.prototype.age = 100;
jiwon.__proto__.setOlder();
jiwon.__proto__.setAge(); // 101

jiwon.setOlder();
jiwon.getAge(); // 31

Prototype chaining

[1, 2, 3]

배열을 예로 들면

배열 리터럴은 Array 생성자 함수와 prototype으로 이루어져있다

Array의 prototype에는 배열 메소드가 모두 담겨있다

즉, Array의 prototype은 객체이다

이 prototype이 객체라는 말은 곧 Object 생성자함수의 new연산자로 생성된 인스턴스라는 말이 된다
따라서 Object의 prototype을 상속 받게 된다

그러므로 배열은 Object.prototype 메소드 역시 자기 자신의 메소드처럼 사용할 수 있다

이 때 __proto__로 연결된 것을 prototype chaining이라고 한다

Array.prototype에 toString 메소드를 작성하면

prototype chaining으로 연결된 메소드를 호출 시 같은 결과값을 볼 수 있다

var arr = [1, 2, 3];
arr.toString = function() {
  return this.join('_');
}

console.log(arr.toString()); // 1_2_3
console.log(arr.__proto__.toString.call(arr)); // 1,2,3
console.log(arr.__proto__.__proto__.toString.call(arr)); // [object Array]

var arr = [1, 2, 3];
Array.prototype.toString = function() {
  return '[' + this.join(', ') + ']';
}

console.log(arr.toString()); // [1, 2, 3]
console.log(arr.__proto__.toString.call(arr)); // [1, 2, 3]
console.log(arr.__proto__.__proto__.toString.call(arr)); // [object Array]

var obj = {
  a: 1,
  b: {
    c: 'c'
  },
  d: [5, 6, 7],
  e: function(){}
};

Object.prototype.toString = function() {
  var res = [];
  for(var key in this) {
    res.push(key + ': ' + this[key].toString());
  }
  return '{' + res.join(', ') + '}';
}

Array.prototype.toString = function() {
  return '[' + this.join(', ') + ']';
}

console.log(obj.toString()); // {a: 1, b: {c: c}, d: [5, 6, 7], e: function(){}}