ADD: 6-1

ch06/6-1.md

@@ -0,0 +1,47 @@
+# 6-1 프로토타입의 개념
+
+프로토타입의 개념을 이해하기 위해 먼저 클래스를 알아보자.
+
+```jsx
+<script>
+  function 공장() {
+    this.width = 71.5;
+    this.height = 146.7;
+  }
+</script>
+```
+
+es6 문법에서 class가 등장했지만 사실 class도 내부적으로는 위와 같이 동작하는 함수이다.
+
+위 함수를 new 연산자를 이용하여 다음과 같이 인스턴스를 생성할 수 있다.
+
+![그림-1](https://github.com/inu-appcenter/core-javascript-study/blob/main/ch06/images/6-1-1.png?raw=true "그림-1")
+
+생성된 인스턴스를 살펴보면 prototype라는 프로퍼티를 확인할 수 있는데, 자바스크립트는 함수에 자동으로 객체인 prototype 프로퍼티를 생성해 놓는다.
+
+프로토타입은 일종의 유전자라고 생각하면 쉽다.
+
+```jsx
+<script>
+  function 공장() {
+    this.width = 71.5;
+    this.height = 146.7;
+  }
+
+  공장.prototype.brand = "Apple";
+
+  var iphone = new 공장();
+</script>
+```
+
+위와 같이 생성자 함수의 prototype에 프로퍼티를 추가하면, 해당 함수로 생성된 인스턴스들은 해당 프로퍼티를 사용할 수 있다.
+
+![그림-2](https://github.com/inu-appcenter/core-javascript-study/blob/main/ch06/images/6-1-2.png?raw=true "그림-2")
+
+인스턴스에는 숨겨진 프로퍼티인 proto가 자동으로 생성되며, 이 프로퍼티는 생성자 함수의 prototype을 참조하고 있기 때문에 인스턴스에서도 prototype 프로퍼티에 접근할 수 있다.
+
+![그림-3](https://github.com/inu-appcenter/core-javascript-study/blob/main/ch06/images/6-1-3.png?raw=true "그림-3")
+
+proto 프로퍼티는 생략이 가능하여 인스턴스에서 프로퍼티를 찾지 못할 경우, proto 프로퍼티를 이용하여 prototype 프로퍼티에 접근한다. 이것을 프로토타입 체인이라고 한다.
+
+쉽게 말해 prototype은 생성자함수의 프로퍼티이고, proto는 인스턴스에서 생성자의 prototype 에 접근할 수 있는 연결고리이다.