함수 4

https://www.youtube.com/watch?v=_tmIikzjvOk&t=5119s

에서 발췌

[01:22:35]

(a.)

const Data = class extends Array {

constructor (row, col) {prop(this, {row, col});}

};

es5와 es6의 가장 큰 차이점은, 

es5까지는 어떠한 상속을 받아서(prototype을 이용하여) class를 만들었다하여도 만들어지는 객체는 Object입니다. prototype체인이 되었을 뿐 실제 만들어진 객체는 Object입니다. 

그러나 es6의 class를 사용하여 new를 만들면, 언제나 타고 타고 타고 올라가서 마지막 부모 것이 만들어집니다. 이걸 home object라고 합니다. home object의 대상은 core 객체(date, regExp, function, object...) 입니다. 타고 타고 올라가서 home object의 인스턴스가 됩니다. es6에서는, 배열을 상속받았을 때 new를 때리면 진짜 배열이 됩니다. length조절되고, push가 작동하는 진짜 배열입니다. es5때까지는 이게 안됩니다. es5에서는 뭘 상속하고 뭘 체이닝을 해도 만들면 무조건 object입니다. 그 외의 유일하게 만들 수 있는 객체는 함수입니다. 따라서 es5에서 커스텀으로 만들 수 있는 객체는 함수와 객체 뿐입니다. 체이닝만 바꿔줄 뿐입니다. 

그래서 es6의 클래스 구문은 대체 불가능 합니다. 클래스 구문 외에는 니놈들이 어레이를 상속한 니놈들만의 객체를 만들 수 없습니다. 

es6에서는 this를 binding해서 바꾸는 능력이 있습니다. 기존 es5의 생성자 체인에서는 마지막에 만들어진 객체 this를 체인으로 넘겨줍니다(apply등을 이용해서 사실상) 얘들은 마지막에 만들어진 object의 this를 위로 올려주는 거지 아래에서 내려오는 게 아니지요.

그런데 es6는 이 생성자에서 상속을 받으면 우리가 체이닝을 안해도 super로 부를 때 체이닝이 일어나는데 이 체이닝되는 과정이 어떻게 되냐면 부모쪽 것이 먼저 만들어져서 부모쪽 것이 내려와서 자식에 있는 constructor의 this를 바꿔버립니다. this를 대체할 수 있다는 말입니다. 이것이 es6의 핵심적인 기능 입니다. 

그전에는 this에 무엇을 할당할 수 없었습니다. 그냥 주어질 뿐입니다. 니놈들은 this를 바꿀 수 없습니다. es6는 내부에서 this를 바꿀 수 있습니다. 생성자 체인에서 계속 this를 바꿔줄 수 있습니다. 위에서 제일 먼저 만들고, 아래쪽에 갈 때마다 this를 바꿉니다. 너(자식)의 this는 위에서 만든 것으로 계속 바꿉니다.

그래서 binding this라는 기능이 있고, 따라서 (a.)는 Array객체를 베이스로 하는 객체가 만들어집니다.