5. 프로토타입

주요 개념 및 내용

기본적으로 4장에서 했던 내용과 연장선이며 자바스크립트에서 원칙적으로는 클래스란 존재하지 않고, OOP 사상을 반영하기위해서 고안한 여러가지 방법이 있다. 그 중에서 [[Prototype]](__proto__) 체계는 핵심적 내용이고 [[Prototype]]체계는 중요한 역할을 한다.

즉, 모든 객체는 연결되어 있다는 관점이 중요하다 어떻게 보면 참조의 연결(링크)의 흐름을 완벽히 이해하는게 중요하고 [[Prototype]]과 .prototype의 구분도 중요하고, 상속을 대변하는듯한 .prototype과 .constructor 개념은 가히 중요

주의사항

• Object.create(객체)

  객체와 함수의 명을 잘 음미해보자.. 객체를 만들어서 내보내는데 그게 Object란 의미로 보인다. 표현 그대로 매개변수로 받은 객체정보를 반환(할당)하는 역할을 한다. 이때 할당하는 위치가 중요한데 바로 [[Prototype]]에 할당이 된다.

  var anotherObj = {
    a: 2
  };
  // anotherObj의 정보를 -> myObj2의 __proto__에 주입
  var myObj2 = Object.create(anotherObj);

• 프로토타입 연쇄

  자바스크립트는 여러타입이 있지만 그 중에서도 객체기반의 내용이다. 객체의 프로퍼티를 검색하기 위해서 프로토타입 체인(연쇄)라는 알고리즘? 같은 프로세스 흐름이 엔진에서 실행하게 되는것 같다. 그렇다 객체의 프로퍼티는 자신 + [[Prototype]] 이다. 그래서 [[Prototype]]이해는 중요하다. 그리고 어떤 프로퍼티를 찾다가 더 이상 존재하지 않는 위치. 즉, 종착점은 Object.prototype이다. 따라서 모든 객체는 Object를 [[Prototype]]으로 갖게 된다. 자바의 Object 암묵적 상속과 같은 개념이라 볼 수 있겠군.. 타랭귀지와 비교는 금물이다.~

  여기서 짐작 할 수 있는 내용은 모든 객체는 실제로 자신 + [[Prototype]]이기 때문에 [[Prototype]]의 프로퍼티나 내용등? 까지도 사용 할 수 있다는 점이다. 이런 부분 때문에 OOP와 상속개념을 적용 할 수 있다고 판단하고 고안되어진것 같다.

• 가려짐

  위임을 통해 프로퍼티를 수정할 때는 조심! 이유는 가려짐 때문에 의도와는 다르게 해당 프로퍼티가 아닌 다르게 작용할 수 있다. 1. [[Property]] 연쇄 상위 수준에서 객체의 일반 데이터 접근 a프로퍼티가 읽기 전용이 아닌경우 최상위 객체의 직속프로퍼티 a가 새로 추가되는 상황(가려짐프로퍼티) 2. [[Property]] 연쇄 상위 수준에서 객체의 일반 데이터 접근 a프로퍼티가 읽기전용 (ex, const?) -> 가려짐 발생x / 엄격:에러, 비엄격:무시 3. [[Property]] 연쇄 상위 수준에서 객체의 일반 데이터 접근 a프로퍼티가 Setter 인 경우 -> 항상 Setter 호출 / 재정의 x, 새로 추가x

  1에 경우만 = 할당 연산자를 통해 가려짐, 2,3 경우 Object.defineProperty()를 통해서만 가려짐. 2의 경우 읽기전용인데 가려짐?

  ```javascript var anotherObj = { a: 2 }; var myObj2 = Object.create(anotherObj); // anotherObj의 정보를 -> myObj2의 proto에 주입

  console.log(anotherObj.a); // 2 console.log(myObj2.a); // 2 console.log(anotherObj.hasOwnProperty("a")); // true console.log(myObj2.hasOwnProperty("a")); // false : myObj2에는 a가 없음, [[Prototype]]에 존재

  anotherObj.a = 20; // myObj2도 변경됨 -> myObj2.a는 anotherObj.a의 레퍼런스와 연결되어 있기 때문

  /* 암시적 가려짐 발생 : prototype -> Get : a -> myObj2.a = another.a + 1 ; 1. myObj2 에서 a를 찾는다. 2. a가 없다 -> [[Prototype]] [[Get]]을 통해 a를 하위에서 찾음. 3. 찾은 a의 값을 1증가시켜서 [[Put]]을 통해 myObj2.a를 만들어서 할당 (가려짐)

  => [[Prototype]]의 a프로퍼티. 즉, another.a를 증가시켜서 영향을 미칠것 같지만, 가려짐에 의해 그렇지 않다. */ myObj2.a++; // 암시적 가려짐

console.log(anotherObj.a); console.log(myObj2.a);

```

• [[Get]] 호출

• prototype과 __proto__의 차이

• .constuctor

테스트 코드