Mi Lugarcito

JavaScript - Class VS object 객체지향 언어 클래스 정리 본문

JavaScript

JavaScript - Class VS object 객체지향 언어 클래스 정리

selene park 2021. 3. 28. 00:58

class : template/ declare once/ no data in 

object : (함수도 object 이다) class를 이용해서 새로운 인스턴스를 생성하면 object가 된다. 

 - instance of a class

 - created many times

 - data in 

 

class : 커피 자판기

number of cafe : 커피 개수 =  integer 

커피머신으로 뭘 하지 (property) ? 커피 개수 & 동전넣고, 커피만들고..

number of cafe  =  integer : 설정을 -1으로 하면 안된다(0부터 시작하니까) --> 그래서 getter and setter 사용한다 (사용자가 -1이라고 설정하면 안되니까)

사용자가 -1이라고 설정해도 setter에서 0으로 만들어주는것 

다른사람이 number of cafe 설정 및 수정하는것은 안좋으니 그래서, number of cafe라는 property를 private 로 만드는것이다. = 캡슐화

 

getter & setter 안에서 쓰는 변수 이름을 다르게 설정해야함

get : 값을 return 하고

set : 값을 설정하기(value를 꼭 받아와야한다, 설정하는 거라서!)

 

 

static

:  클래스 안에 있는 필드와 메소드 들은 새로운 오브젝트를 만들때마다 그대로 복제되어 값만 우리가 지정된 값으로  변경되어 만들어진다.

간혹 이런 오브젝트 = 데이터와 상관없이 클래스가 가지고 있는 고유한 값과 동일하게 반복적으로 사용이 되어지는 메서드가 있을 수 있다. 

static 이용시 오브젝트와 상관없이 클래스자체에 연결되어 사용가능

 

instance of

: 오브젝트는 클래스를 이용해서 만들어진 새로운 instance인데, 오브젝트가 해당 클래스로 만들어진것 인지 아닌지를 판단하는것(t/f 반환)

 

'use strict';

// Object-oriendted programming
// class : template
// object : instance of a class
// JavaScript classed
// - introduced in ES6
// - syntactical sugar over prototype-based inheritance

// 1. Classs declarations
class Person{
    //constructor
    constructor(name, age){
        //fields(name, age)에 전달된 데이터를 바로 할당해주는 것 
        this.name=name;
        this.age=age;
    }
    //methods
    speak(){
        console.log(`${this.name}:hello!`);
    }
}

//새로운 object 만들기
const selene = new Person('selene', 20);
console.log(selene.age);
console.log(selene.name);
selene.speak();


//2. Getter and Setters
//User라는 class에는 firstName, lastName, _age라는 필드가 3개 존재한다
class User{
    constructor(firstName, lastName, age){
        this.firstName=firstName;
        this.lastName=lastName;
        this.age=age;
    }

    //age가 아니라 getter & setter 안에서 쓰는 변수 이름을 다르게 설정해야함
    get age(){
        return this._age;
    }
    set age(value){
        // if(value<0){
        //     throw Error('age can not be negative');
        // }
        this._age=value < 0 ? 0 : value;
    }



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



//3. Fields (public, private)
// too soon! (사용하려면 babel 이용해야한다네..?)
class Experiment {
    publicField=2;
    #privateField = 0;
}
const experiment = new Experiment();
console.log(experiment.publicField);
console.log(experiment.privateField);

//4. Static properties and methods
//too soon
class Article{
    static publisher = 'Dream Coding';
    constructor(articleNumber){
        this.articleNumber = articleNumber;
    }

    static printPublisher(){
        console.log(Article.publisher);
    }
}

const article1 = new Article(1);
const article2 = new Article(2);
console.log(Article.publisher);//Dream Coding 출력됨 
Article.printPublisher();//Dream Coding 출력됨 

//상속 & 다양성(재사용 -> 유지보수 용이)
//5. Inheritance
// a way for one class to extend another 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 this.width * this.height;
    }
}

class Rectangle extends Shape{}
class Triangle extends Shape{
    //상속하기
    draw(){
        super.draw(); // 부모 호출 (상속)
        console.log('🥰');
    }


    //다양성
    //필요한 함수만 재 정의해서 사용가능(overriding)
    getArea(){
        return (this.width * this.height)/2;
    }

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

const rectangle = new Rectangle(20,20,'blue');
rectangle.draw();
console.log(rectangle.getArea());

const triangle = new Triangle(20,20,'red');
triangle.draw();
console.log(triangle.getArea());


//6. Class checking: instanceOf
console.log(rectangle instanceof Rectangle);
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Object);//true
console.log(triangle.toString());



'JavaScript' 카테고리의 다른 글

JavaScript - Array 기초  (0) 2021.03.28
JavaScript - object  (0) 2021.03.28
JavaScript - Arrow Function  (0) 2021.03.27
JavaScript - 연산 & 반복문 & 비교연산 (==/===)  (0) 2021.03.27
JavaScript - DataType (let & var, hoisting)  (0) 2021.03.27