From 6666720fbf98baf5f2371649a916554664aae118 Mon Sep 17 00:00:00 2001 From: wowba Date: Mon, 4 Sep 2023 17:25:57 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=ED=81=B4=EB=9E=98=EC=8A=A4=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC=201=EC=B0=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\235\264\354\230\201\354\232\261.md" | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 "7_\355\201\264\353\236\230\354\212\244/\354\235\264\354\230\201\354\232\261.md" diff --git "a/7_\355\201\264\353\236\230\354\212\244/\354\235\264\354\230\201\354\232\261.md" "b/7_\355\201\264\353\236\230\354\212\244/\354\235\264\354\230\201\354\232\261.md" new file mode 100644 index 0000000..e69de29 From 0313565c5083c93df8fca6283f1aec607e83fb87 Mon Sep 17 00:00:00 2001 From: wowba Date: Mon, 4 Sep 2023 18:53:53 +0900 Subject: [PATCH 2/3] =?UTF-8?q?=ED=81=B4=EB=9E=98=EC=8A=A4=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\235\264\354\230\201\354\232\261.md" | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git "a/7_\355\201\264\353\236\230\354\212\244/\354\235\264\354\230\201\354\232\261.md" "b/7_\355\201\264\353\236\230\354\212\244/\354\235\264\354\230\201\354\232\261.md" index e69de29..b511fb8 100644 --- "a/7_\355\201\264\353\236\230\354\212\244/\354\235\264\354\230\201\354\232\261.md" +++ "b/7_\355\201\264\353\236\230\354\212\244/\354\235\264\354\230\201\354\232\261.md" @@ -0,0 +1,48 @@ +# 자바스크립트 class +자바스크립트의 class 문법은 클래스 기반 언어와는 달리, +prototype을 좀 더 편하게 사용할 수 있도록 자바스크립트에서 제공하는 편의 기능이다. + +## 자바스크립트의 prototype과 class 언어? +자바스크립트는 prototype 기반 언어이기에 class 기반 언어와는 다르지만, +이를 class 언어의 관점에서 볼 경우 class 문법 비슷하게 느껴질 수 있다. + +자바스크립트는 \_\_proto\_\_ 객체가 생성자 함수의 prototype 속성을 체이닝 하여 접근하는 것이지만 +생성자 함수를 통해 prototype 객체 내부 요소를 새로운 인스턴스에 상속하는 것으로 해석할 수 있다. + +스태틱 메서드 또한 인스턴스에는 상속되지 않으며, 생성자 함수를 this 로 사용할 경우에만 메서드를 통해 호출할 수 있다. +인스턴스에 정의한 메서드의 경우, 이는 프로토타입 메서드 라고 부른다. + +즉, 자바스크립트에서 class 문법을 구현한 것은 프로토타입 체이닝을 잘 연결한 것으로 이해할 수 있다. + +```javascript +class User { + constructor() { + this.name = "Lee" + } + + getName() { // 프로토타입 메서드 + console.log(this.name) + } + + static sayHi() { // 스테틱 메서드 + console.log("Hello World") + } +} + +// User.prototype.methodName => 프로토타입 메서드 선언 +// User.methodName => 스테틱 메서드 선언 +``` + +## class 상속 +프로토타입 체인을 이용하여 클래스 상속을 구현하고자 할 때, 클래스에 존재하는 값이 인스턴스에 영향을 미치지 않는것이 핵심이였다. +자바스크립트는 프로토타입 체이닝에 의해 속성을 찾지 못할경우 \_\_proto\_\_를 따라가 값을 찾는데, +이는 클래스의 값이 인스턴스의 값에 영향을 주는 것이기 때문이다. + +즉 기본적으로 자식클래스가 만들어낸 인스턴스의 \_\_proto\_\_ 속성이 부모 클래스의 prototype을 참조하고, +자식클래스의 prototype에는 불필요한 속성을 남기지 않게 구현하는 것이다. + +![image](https://github.com/zoeyourlife/Core-JavaScript/assets/87873821/9d06f0de-d7b0-48d8-901e-92ba389119fa) + +## ES6 class +ES6 이전에는 class를 구현하기 위해 복잡한 방법을 사용해야 했지만, +class 문법을 통해 이제 간편하게 사용할 수 있다. From d642da81e608542256b8bcf1ea9daa059e2fb89f Mon Sep 17 00:00:00 2001 From: wowba Date: Mon, 4 Sep 2023 18:54:51 +0900 Subject: [PATCH 3/3] =?UTF-8?q?=EB=82=B4=EC=9A=A9=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\235\264\354\230\201\354\232\261.md" | 4 ---- 1 file changed, 4 deletions(-) diff --git "a/7_\355\201\264\353\236\230\354\212\244/\354\235\264\354\230\201\354\232\261.md" "b/7_\355\201\264\353\236\230\354\212\244/\354\235\264\354\230\201\354\232\261.md" index b511fb8..7c71e4e 100644 --- "a/7_\355\201\264\353\236\230\354\212\244/\354\235\264\354\230\201\354\232\261.md" +++ "b/7_\355\201\264\353\236\230\354\212\244/\354\235\264\354\230\201\354\232\261.md" @@ -42,7 +42,3 @@ class User { 자식클래스의 prototype에는 불필요한 속성을 남기지 않게 구현하는 것이다. ![image](https://github.com/zoeyourlife/Core-JavaScript/assets/87873821/9d06f0de-d7b0-48d8-901e-92ba389119fa) - -## ES6 class -ES6 이전에는 class를 구현하기 위해 복잡한 방법을 사용해야 했지만, -class 문법을 통해 이제 간편하게 사용할 수 있다.