diff --git a/ch06/6-1.md b/ch06/6-1.md new file mode 100644 index 0000000..5a3fc33 --- /dev/null +++ b/ch06/6-1.md @@ -0,0 +1,47 @@ +# 6-1 프로토타입의 개념 + +프로토타입의 개념을 이해하기 위해 먼저 클래스를 알아보자. + +```jsx + +``` + +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 + +``` + +위와 같이 생성자 함수의 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 에 접근할 수 있는 연결고리이다. diff --git a/ch06/images/6-1-1.png b/ch06/images/6-1-1.png new file mode 100644 index 0000000..f5fc761 Binary files /dev/null and b/ch06/images/6-1-1.png differ diff --git a/ch06/images/6-1-2.png b/ch06/images/6-1-2.png new file mode 100644 index 0000000..c7018d0 Binary files /dev/null and b/ch06/images/6-1-2.png differ diff --git a/ch06/images/6-1-3.png b/ch06/images/6-1-3.png new file mode 100644 index 0000000..b3d41e4 Binary files /dev/null and b/ch06/images/6-1-3.png differ