[JavaScript] Class 와 상속

📌 class

관련 있는 함수와 변수를 묶어놓은 것 

상속과 다양성일어날 수 있음 

 

 - fields

 - methods

 

* data class

  : methods가  없는 fields( data)만 있는 class

 

 

class	object
- template 템플릿  - declare once - no data in (데이터는 없고 만들 수 있는 틀)	class 를 이용해서 만든 것 = 객체

 

 

javascript 의 class

javascript 는 객체 지향언어

object가 상호작용하며 돌아가는 application

 

- ECMA Script 6버전에서 추가된 기능 

- ES6 에서 생김

- class가 있기 전에는  constructor function을 이용해 template을 만들고 정의하여 사용했었다.

- 기존에 존재하던 prototype-based 를 기반으로 문법만 class가 추가

 

 

 

---

📌 Constructor function  (생성자 함수) 사용하여 객체 생성

 - 객체 생성

 - 객체의 초기 상태 세팅 

 

 

function Person(name, first, second, third) {
    this.name= name;
    this.first = first
    this.second = second;
}


var kim = new Person('kim',10,20);

기존의 javascript 는 생성자함수(Person)을 new로 만들어 객체를 생성했다.

 -> Person이라는 함수는 생성자가 됨

 

 

 

 

📌 Class 사용하여 객체 생성

constructor()

객체 생성 될 때 객체의 초기상태를 지정

객체가 만들어지기 직전에 실행될 함수 

class Person {
    constructor(name,first,second){

        this.name= name;
        this.first = first;
        this.second = second;
    }
 }
 
 var kim = new Person('kim',10,20);

 

 

 

 

메서드 생성

1) 내부에 생성

class Person {
    constructor(name,first,second){

        this.name= name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first + this.second
    }
}

var kim = new Person('kim',10,20);

2) 외부에 생성 

class Person {
    constructor(name,first,second){

        this.name= name;
        this.first = first;
        this.second = second;
    }
}

//Person이라는 생성자 함수의 모든 객체에서 사용할 메서드 생성
Person.prototype.sum = function(){
    return 'prototype' + (this.first + this.second);
}

var kim = new Person('kim',10,20);

 

 

 

 

만약 kim의 객체가  다른 객체들과 다른 메서드 sum 을 가지고 싶다면 ,

kim.sum = function(){
    return 'this'+(this.first + this.second);
}

이 code를 추가하기 

 

자바스크립트는 항상 실행 시  다음의 우선순위로 실행함

1) 객체 본인이 가지고 있는 메서드 

  : kim.sum 확인

2) 객체의 생성자의 Prototype의 메서드 

  : Person.prototype

 

 

 

---

📌 상속

상속은 부모 code 의 기능을 이어받아 공유하고 사용하는 것 

계속 반복되어지는 것을 1번만 정의하여 상속시켜  재사용함 

 

 

필요한 경우

 - 타인이 만든 라이브러리, code를 사용하는경우

 - 해당 class를 수정할 수 없는 경우 ( 수정 시 업데이트 불가 등의 이유로)

 - 모든 곳에서 사용하기에 사용횟수가 적은 메서드 추가가 필요한 경우 

 

장점

중복되는 code 제거 

동시 다발적인 변경 가능해 유지보수의 편의성 도모

 

 

► Class 에서의 상속 

class Shape { 
    constructor(width, height, color) {
        this.width = width;
        this.height =height;
        this.color = color;
    }
    
    draw () {
        console.log(`drawing ${this.color} color of`);
    }

    getArea() {
        return width * this.height;
    }
}



class Rectangle extends Shape{ }

class Triangle extends Shape{
    draw(){
        console.log('▲')
    }
    //overriding
    getArea(){
        return (this.width * this.height)/2;
    }
}

const rectangle = new Rectangle(20,20,'blue');
rectangle.draw();
const triangle = new Triangle(20,20,'red');
triangle.draw();

Shape : 모양을 만드는 class

Triangle는 Shape을 상속받음으로써 draw, getArea() 변수와 메서드를  재정의할 필요 없이 사용할 수 있고 ,

draw() overriding 을 통해 draw() 메서드 재정의 

 

 

 

❖ instanceof 

object 가 class의 instance인지 아닌지 확인 

console.log(rectangle instanceof Rectangle); // True
console.log(triangle instanceof Rectangle); // False
console.log(triangle instanceof Triangle); // True
console.log(triangle instanceof Shape); // True
console.log(triangle instanceof Object); // True

 

 

 

 

super

부모 class를 불러서 일을 시키고, 부모가 하지 못하는 일을 나만 하도록 하는 것 

부모가 가진 기능을 실행 + 자식에서만 구현할 기능과 엮어서 사용가능 

 

 

 

❖ 자식 class (PersonPlus) 에 인자를 더해주고 싶은 경우

PersonPlus 에  constructor 을 전부 다시 쓰는건 비효율 

 

<부모>

class Person {
    constructor(name,first,second){

        this.name= name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first + this.second;
    }
}

 

 

<자식>

class PersonPlus extends Person{

    average(){
        return (this.first+this.second)/2;
    }
}

↓

class PersonPlus extends Person{

    constructor(name,first,second,third){
        super(name,first,second,third)
        this.third = third;
    }
    
    sum(){
        return super.sum()+this.third;
    }
    
    
    average(){
        return (this.first+this.second+this.third)/2;
    }
}



var kim = new PersonPlus('kim',10,20,30);
console.log('kim',kim.average());

자식 class(PersonPlus)에서 부모 class(Person) 의 name,first,second 을 return 받아 사용 가능 

 

 

 

 

 

 

 

 

 

🧐 생각해볼 것 

 

상속은 무엇인가?

상속은 부모 code 의 기능을 이어받아 공유하고 사용하는 것 

 

상속이 없으면 무엇이 불편한지?

상속이 없으면 필요한 메서드들을 중복으로  구현해 길이가 길어진다.

상속이 없으면 일부분 기능 변경 시에도 클래스 내 코드를 변경해  후에 오류가 날 수도 있고,

혹은 (기능이 들어간 )클래스들 전부를 변경해야 해 유지보수에 좋지 않다.

 

---

 

<예시로 공부하기  > 

 

class 자판기 {

  int  numberOfCoffee;

  puTcoins(){}

  makeCofffe(){}
  
}

❖ getter , setter 를 사용하는 이유 

numberOfCoffee<0이 될 수 없음 

사용자가 -1같은걸로 지정하면 setter 로 0으로 만들어주 주는 것

 

❖ private 쓰는 이유 

사용자가 마음대로 설정하면 안되니 private numberOfCoffee로 지정 => encapsulate

 

 

 

getter & setter

class User {
    constructor(firstName, lastName,age) {
        this.firstName = firstName;
        this.lastName= lastName;
        this.age = age;
    }
    //getter
    get age() {
        return this._age;
    }
    //setter
    set age(value) {
        // if(value<0){
        //     throw Error ('age can not be negetive');
        // }
        this._age = value<0? 0:value;
    }

}

const user1 = new User('Steve','Job',-1);
console.log(user1.age);

getter setter  : _ 변수 (언더바) 

호출 시에는 .변수 로 호출 가능 

 

getter 정의 순간 ( get age() ) 

this.age = age

this.age

  => 메모리에 올라온  age 가져오기 X

  => get age() getter 호출 O

 

setter 정의 순간 

this.age = age

 => 메모리의 값 할당 X

 => setter 호출 

 

 

 

 

Field ( public, private) (아직 최신 업데이트 안됨)

생성사를 쓰지 않고 field 정의 가능 

class Temp {

	publicField = 2;
    #privateField = 0;
}

const temp = new Temp();
console.log(Temp.publicField); //2
console.log(Temp.privateField); //undefined

 

 

static

object 와 관계없이 class 자체에 연결 

들어오는 data 에 상관없이 공통적으로 class에서 사용하는 것에서 메모리의 사용을 줄일 수 있음

class Article {
    static publisher = 'Tami world';
    constructor (num){
        this.num= num;
    }
    static printPublicher() {
        console.log(Article.publisher);
    }
}

const article1 = new Article(1);
console.log(article1.publisher); //undefined
console.log(Article.publisher); // Tami world

Article.publisher 처럼 

class  자체로 불러줘야 함

 

 

 

---

 

toString() ? 

object class 들은 javascript 의 object를 상속한 것 

constructor, toString()....

어떤 object등 공통 메서드들을 사용할 수 있음 

console.log(triangle.toString()); // [Object, Object] 

class Triangle extends Shape{

    toString() {
        return `Triangle color : ${this.color}`;
    }
}

console.log(triangle.toString()); // Triangle color : red

 

 

 

 

 

 

 

유용한 사이트 

 

BABEL

현재 짠 code를 예전 버전의 javascript 로  변환해주는 컴파일러&트랜스파일러

작성한 code를 과거의 code로 converting  => 실제 웹브라우저에서 자바스크립트가 작동하도록

 

babeljs.io/

Babel · The compiler for next generation JavaScript

 

 

 

참고영상

www.youtube.com/watch?v=_DLhUBWsRtw