📝 자바스크립트가 상속을 구현하는 방식에 대해서 설명해보고자 합니다! 상속하는 방법은 constructor로 상속하기/Object.create(ES5)로 상속하기가 있습니다.
그 중 constructor를 먼저 살펴보겠습니다.
📌 상속 방법1: Constructor
: constructor란 쉽게 말해 object 생성 기계이다.
비슷한 obejct를 만들고 싶을 때, 자식에게 쉽게 상속할 수 있다.
constructor를 사용해 상속하기
1. constructor(부모)를 생성한다
function Student(이름, 나이){
this.name = 이름;
this.age = 나이;
this.sayHi = function(){
console.log('안녕하세요 ' + this.name + '입니다');
}
}- 일반 함수를 만드는 것과 다르게 함수 이름의 첫 글자는 대문자로 한다.
- 문자나 함수를 다 넣어서 만들 수 있다.
- constructor 안의 this는 새로 생성되는 object를 뜻한다 = instance라고 표현한다
" 새로 생성되는 object의 name이라는 속성에 이름(parameter)를 대입해주세요 "
2. constructor의 속성들을 자식에게 상속한다
var 학생1 = new Student('Park', 20);
var 학생2 = new Student('Kim', 13);- constructor 이름 앞에
new를 붙여 상속한다. - 여기서는 Student가 가지고 있는 name, age, sayHi의 속성들을 물려받게 된다.
📌 상속 방법2: Object.create (ES5)
상속 기능을 구현하려면 ?
1. constructor 함수를 만들거나 (-> ES6의 class는 다른 게시글에서 다뤘습니다!)
2. Object.create를 이용하거나
Object.create(물려받을 부모 object)
var 부모 = { name : 'Kim', age : 50 };
var 자식 = Object.create(부모); // = prototype을 부모로 해주세요~
var 손자 = Object.create(자식); // = prototype을 자식으로 해주세요~constructor와 차이점
: constructor 함수를 만들어서 자식에게 상속하면, 자식이 그 값들을 직접 갖지만
Object.create를 이용해서 자식에게 상속하면, 자식이 그 값들을 직접 갖는 것이 아니라 prototype이 갖는다.
📌 Prototype ?
: 상속을 구현할 수 있는 또 하나의 문법이다.
사실 prototype은 constructor를 만들면 자동으로 생긴다.
prototype은 함수에만 생성이 된다.
prototype을 사용해 상속하기
1. constructor(부모)를 생성한다
function Student(name){
this.name = name;
this.age = 15;
this.sayHi = function(){
console.log('안녕하세요 ' + this.name + '입니다');
}
}- constructor를 만들면 prototype이라는 공간이 자동으로 생긴다. 👉 궁금하면 Student.prototype 출력해보기!
- 여기서 Student.prototype을 출력해보면 object임을 알려준다.
2. 부모의 prototype에 값을 추가하여 자식에게 상속하기
Student.prototype.gender = "남";
var 학생1 = new Student('Park');
var 학생2 = new Student('Kim');- 부모의 prototype, 즉 Student.prototype에 gender라는 속성을 추가한다.
- Student.prototype은 object이기 때문에 object에 값을 추가하는 형식으로 작성하면 상속된다.
학생1.gender를 출력하면남이 출력된다.- 하지만,
학생1을 출력하면 gender라는key가 출력되지 않는다 👉 prototype을 통해 유전자에 추가되어 있다! 학생1에 직접 추가되지 않고, prototype에 추가되어 있을 경우 어떻게남이 출력되는지는 다음 내용을 통해 알아보자.
📌 Prototype의 동작원리
: 객체지향 언어인 자바스크립트를 한층 더 깊게 이해하기 위해 필요한 prototype의 개념에 대해서 자세하게 살펴보자!
앞선 case에서 prototype의 동작원리를 이해하자면,
✔︎ 학생1.name
① 학생1이 직접 name을 가지고 있는가?
→ 가지고 있음 - 그럼 출력!
✔︎ 학생1.gender
① 학생1이 직접 gender를 가지고 있는가?
→ 없음
② 그럼 학생1의 부모 유전자(=Student.prototype)이 gender를 가지고 있는가?
→ 가지고 있음 - 그럼 출력!
즉, 값을 가지고 있는 오브젝트를 찾을 때까지 " 자식->부모->부모의 부모->부모의 부모의 부모..를 조사 " 한다.
그렇담 내장함수는 어떻게 동작하는가 ?
: 앞선 내용들을 통해서 array나 object의 내장함수가 동작하는 원리에 대해서도 이해할 수가 있게 된다.
✔︎ array의 경우
/* array를 생성하는 방법 2가지 */
var arr = [1,2,3]; // 1번
var arr = new Array(1,2,3); // 2번- 1번 방법은 이해하기 쉽기 때문에 우리가 자주 사용하는 array 생성 방식이다.
- 2번 방법은 컴퓨터가 array를 해석할 수 있는 방식이다. 보통 우리가 1번 방식대로 작성하면 컴퓨터가 2번으로 바꾸어 해석한다.
arr.sort();👆 그렇다면 해당 내장함수를 사용할 수 있는 이유는 무엇일까?
① arr에 sort()가 있는가?
→ 없음
② 그럼 arr 부모의 유전자(=Array.prototype)에 sort()가 있는가?
→ Array.prototype.sort() 있음 - console에 출력해보면 다양한 내장함수들이 나온다.
obejct의 경우도 마찬가지이므로 생략하겠다,,,
📌 결론
: console 창에 출력해보면 부모, 부모의 부모...까지 탐색할 수 있다.
끝까지 탐색해보면, 모든 object 자료형 / array자료형 / 함수 자료형의 조상은 "Object()"이다.
그래서 자바스크립트는 모든게 다 Object인 객체지향 언어라는 결론을 도출해낼 수 있다
📚 Reference
: 코딩애플 강의
