21년 1월 14일 TIL

오늘 배운 것

Prototype

 

프로토타입을 알기 전에 먼저 상속에 대한 개념을 이해해야한다. 자바스크립트에서 상속이란? 새로운 클래스에서 기존 클래스의 모든 프로퍼티와 메소드를 사용할 수 있는 것을 말한다.

상속을 통해서 입맛에 맞게 수정하여 재사용 가능하고, 클래스간의 관계를 형성하여 조직화 할 수 있다는 장점이 있다.

 

자바스크립트는 C언어와같은 클래스 기반이 아니라 프로토타입 기반의 객체 지향 언어이다. 프로토타입이란? 자바스크립트의 모든 객체는 프로토타입이라는 객체를 가지고 있는데, 모든 객체들은 프로토타입으로 부터 프로퍼티와 메소드를 상속 받는다. 이러한 상속될 때 정보를 제공하는 객체를 프로토타입이라고 한다. 이렇게 프로토타입이 상속될때, 상속되는 가상의 연결고리를 프로토타입 체인이라고 한다.

 

 

Prototype을 사용하여 Pseudoclassical 한 방식으로 상속 연결

 

조건 / 타입	객체	속성	메소드
부모	Human	name	sleep( )
자식	Student	name	sleep( ), study( )

 

// Human 생성

const Human = function (name) {
  this.name = '부모'; // 속성
};

Human.prototype.sleep = function () {
  return 'zzz'; // 기능
};

// Student 생성 (Humans를 상속받는 자식객체)

const Student = function(age) {
  Human.call(this); // 부모의 this와 연결
  this.name = '학생'
  this.age = age;
};

 

부모의 객체의 name 속성을 가지기 위해, .call .apply 로 this를 묶어준다. 만약, 생성자에 아무런 인자가 없자면 생략 가능하다.

기능을 상속받으려면 자식 생성자에 새로운 객체의 constructor를 변경해주어야한다.

자식객체만 가지는 요소도 추가할 수 있다. 물론 기능 변경 또한 가능하다.

 

// Object.create( ) 함수를 사용하여 부모의 protorype을 복제.

Student.prototype = Object.create(Human.prototype);

// Student가 생성하는 인스턴스의 생성자를 Student로 정의.

Student.prototype.constructor = Student;

// 자식 객체만 가지고있는 메소드 추가.

Student.prototype.study = function () {
  return '열공하자!';
};

// 물려받은 기능 변경

Student.prototype.sleep = function () {
  return '학생이 잠은 무슨!'
};

동작 확인.

const sleepingHuman = new Human();
sleepingHuman.sleep; // zzz

const sadStudent = new Student(17);
sadStudent.age; // 17

sadStudent.study(); // '열공하자!'

sadStudent.sleep(); // '학생이 잠은 무슨!'

 

ES6에 추가된 Class, extends, super로 상속

 

extends 키워드로 상속 조건을 만들어줄 수 있다. call 또는 apply로 부모의 요소를 묶어주는 것 대신, super 키워드를 사용하면 된다.

class Human {
  constructor(name) {
    this.name = '부모';
  }
  sleep() {
    return 'zzz';
  }
}
// 상속은 extends를 사용한다.

class Student extends Human {
  constructor(age) {
    super();
    this.name = '학생'
    this.age = age;
  }
// 기능 추가
study() {
  return '열공하자!'
}
// 기능 변경
sleep() {
// super로 기능 상속
  return super.sleep('학생이 잠은 무슨!')
  }
}

동작 확인. prototype와 동일하게 동작.

const sleepingHuman = new Human();
sleepingHuman.sleep; // zzz

const sadStudent = new Student(17);
sadStudent.age; // 17

sadStudent.study(); // '열공하자!'

sadStudent.sleep(); // '학생이 잠은 무슨!'

 

오늘 느낀점

 

그동안 mdn을 찾아보면서도 prototype이 무슨 말인지 몰랐는데, 상속되는 정보를 제공하는 객체라는 것을 알게되었다. 자바스크립트에대해 좀 더 알게되었다. 객체지향 언어라고 알고있었는데 조금 무슨 말인지 알게된 하루.

 

더 공부할 것

 

• Class
• super