2023 - 06 - 15 클래스 Class, 생성자 Constructor, this와 프로퍼티 (property), 인스턴스, 부모클래스 자식클래스 상속

오늘 할일

node 강의듣기

개인과제하기

 

오늘 배운것

클래스 Class, 생성자 Constructor, this와 프로퍼티 (property), 부모클래스 자식클래스 상속

  

 

class User {
  // class : 무언가를 생성하기 위한 틀
}

클래스(Class)는 현실과 비슷한 개념(객체)를 나타내기 위한 도구.

클래스를 미리 정의해놓으면 필요할때마다 해당 클래스로 동일한 틀을 가진 객체를 만들 수 있다.

여기서 동일한 클래스를 이용해 생성한 객체를 인스턴스(Instance)라고 한다.

예를들어. 아래 const user = new User();에서

왼쪽의 user는 User()를 통해 만든 변수이자 인스턴스이다.

const user = new User(); // 왼쪽의 user는 User()를 통해 만든 변수이자 인스턴스.
user.name = "이용우";     // User()는 클래스의 생성자를 통해 만듦.
user.age = 28;
user.tech = "Node.js";

console.log(user.name); // 이용우
console.log(user.age); // 28
console.log(user.tech); // Node.js

name, age, tech는 멤버변수이자 프로퍼티.

user.name = "이용우" : user라는 key에다 "이용우"라는 value값을 넣는다.
user.age = 28 : user라는 key에다 28이라는 value값을 넣는다.
user.tech = "Node.js" : user라는 key에다가 "Node.js"라는 value값을 넣는다.

생성자 (Constructor)
클래스 내부에서 constructor()로 정의한 매서드를 생성자라고 한다.
미리 정의한 클래스를 기반으로 인스턴스를 생성할 때 자바스크립트 내부에서 호출되는 매서드이다.

class User {
  constructor(name, age, tech) { // User 클래스의 생성자
    this.name = name;
    this.age = age;
    this.tech = tech;
  }
}
const user = new User("이용우", 28, "Node.js"); // user 인스턴스 생성

console.log(user.name); // 이용우
console.log(user.age); // 28
console.log(user.tech); // Node.js

constructor 생성자를 통해 name,age,tech 3개의 인자값을 입력받는 생성자를 확인할수있다.
각각의 인자들을 가져와서 this로 멤버변수 선언함. 

this.name = name; => 입력받은 this.name를 name이라는 멤버변수에 할당함
생성자에서 3가지 입력하고, 그 다음 const user 선언해서 하나하나씩 할당한다.

this와 프로퍼티 (property)

프로퍼티: key와 value로 한 쌍이 이루어진 데이터.
this는 전체를 바꾸는게 아니라 하나의 값만 바꿈.
constructor 생성자의 바디에서 this라는 키워드를 사용한다. 이 this는 클래스를 사용해 만들어 질 객체 자신을 의미하며,
this뒤에 붙는 name, age, tech는 클래스를 이용해서 만들어질 객체의 속성 (property)이다.



메서드 (Method)
자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값으로 사용할수 있는데,
프로퍼티의 값이 함수일 경우에는 일반 함수와 구분하기 위해 메서드라고 부른다.

즉 매서드는 객체(Object)에 묶여있는 함수를 의미한다. 클래스에서도 데이터를 나타내는 속성뿐 아니라, 함수와 같이
특정 코드를 실행할 수 있는 문법을 사용할 수 있는데, 여기서는 Class라는 객체(Object)에 묶여있는 함수를 메서드(Method)라고 부른다.

class User{
    constructor(name, age, tech){
        this.name = name;
        this.age = age;
        this.tech = tech;
    }

매서드 3개를 만들고 각각의 멤버 변수들을 리턴한다.
즉 클래스라는 함수 안에서 함수들은 결국엔 매서드다.


getName() {return this.name;} // getName 매서드
getAge() {return this.age;} // getAge 매서드
getTech() {return this.natechme;} // getTech 매서드

const user = new User("이용우", "28", "Node.js"); // user 인스턴스 생성
console.log(user.getName()); // 이용우
console.log(user.getName()); // 28
console.log(user.getName()); // Node.js
}

상속이란 ?

클래스의 인스턴스는 선언한 클래스의 기능을 모두 상속한다.
상속을 이용해 부모 클래스와 자식 클래스로 나뉠 수 있는데, 

부모 클래스의 경우에서도 내부 변수와 같은 정보를 자식 클래스에게 할당해줄 수 있다.
부모와 자식은 모두 class로 선언한다.

class User { // 부모 클래스 (User)
    constructor(name, age, tech) { // 부모 클래스 생성자 constructor
      this.name = name;
      this.age = age;
      this.tech = tech;
    }
    getTech(){return this.tech;} // 부모 클래스 getTech 메서드
  }
  
  class Employee extends User{ // 자식 클래스 (Employee)
    constructor(name, age, tech) { 
      super(name, age, tech);    
    }
  }
  
  // 자식 클래스 생성자 constructor. name, age, tech 세가지 인자값을 받는 것은 동일한데
  // super라는 방식으로 세가지 값을 넣어준다.
  
  const employee = new Employee("이용우", "28", "Node.js");
  console.log(employee.name); // 이용우
  console.log(employee.age); // 28
  console.log(employee.getTech()); // 부모 클래스의 getTech 메서드 호출: Node.js

순서
new Employee를 하게되면 자식 클래스 Employee의 생성자 안에 있는 인자값 (name, age, tech)들이 
new Employee의 각각에 있는 인자 ("이용우", "28", "Node.js")로 할당된다.
자식 클래스 Employee의 생성자 안에 있는 super를 통해서, 
부모 클래스의 생성자 constructor를 호출하게 된다.

즉 Employee클래스는 User클래스를 상속받은 자식클래스다. 
Employee클래스를 생성자를 통해 실행할 때는 생성자함수 내부의 super를 통해서 
부모 User클래스의 생성자를 호출하게 되는 것.

부모 클래스는 name, age, tech 세가지 값을 받아 각각의 멤버변수에 할당함.

console.log(employee.getTech()); // getTech()는 부모클래스 User class에 정의가 되어있다. 
=> getTech(){return this.tech;}

상속받은 자식클래스는 부모가 갖고있는 메서드, 부모가 갖고있는 멤버변수를 상속받는다.