06강. class vs object, 객체지향 언어 클래스 정리

'use strict'

class person{
	name;
	age;		//속성(field)
	speak();	//행동(method)
}

class = fields + methods

 

class: template / declare once / no data in   ex) 붕어빵틀

object: instance of a class / created many times / data in  ex) 팥붕어빵, 슈크림붕어빵

 

object-oriented programming

class: template

object: instance of a class

javascript classes

- introduced in ES6

- syntactical sugar over prototype-based inheritance

 

1. Class declarations

class Person{
    //constructor
    constructor(name, age){
        //fields
        this.name = name;
        this.age = age;
	}

	//methods
    speak(){
        console.log(`${this.name}:hello!`);
    }
}


//example

const ellie = new Person('ellie',20);

console.log(ellie.name);
console.log(ellie.age);

ellie.speak();

   

2. Getter and setters

class User{
    constructor(firstName, lastName, age){
        this.firstName = firstName;
        this.lastName = lsatName;
        this.age = age;
    }

    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(publick, private)

Too soon!

https://developer.mozilla.org/en-US/docs/Web/Javascript/Reference

class Experiment{
    publickField =2;
    #privateField =0; //class 내부에서만 값이 보여지고 접근, 변경 가능/ 외부에서는 불가능
}
const experiment = new Experiment();
console.log(experiment.publicField);	//2
console.log(experiment.privateField);	//undefined

 

4. Static properties and methods_공통 class에서 사용가능할 경우 쓰기좋음

Too soon!

class Article{
    static publisher = 'Dream Coding';
    constructor(articleNumber){
        this.articleNumber = articleNumber;
    }
    static printPublisher(){
        console.log(Article.publisher);
    }
}
const article1 = new Article(1);	//undefined
const article2 = new Article(2);	//undefined
console.log(Article.publisher);
Article.printPublisher();

 

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`);	//drawing blue color!
    }
    getArea(){
        return width * this.height;
    }
}

//위에서 정의한 width, height가 자동저장되어 도형형성
class Rectangle extends Shape{} 

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


class Triangle extends Shape{
	//필요한 함수만 재정의해서 사용_overwriting
    draw(){
        super.draw();		//drwing red color!_부모의 method도 출력
        console.log('△');	//△
    }
    getArea(){
        return (this.width * this.height)/2;
    }
    toString(){
        return `Triangle: color: ${this.color}`;
    }
}

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

 

6. Class checking: instanceOf

//left obj가 right class로 만들어진 것인지 확인
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;
console.log(triangle. toString());		//true;

 

추천사이트
JS MDN