JavaScript (class, extends, wrapper)

✔ Class

✔ 객체를 만드는 켐플릿
 1. 생성자 함수
 2. 클래스
    static : 정적 프로퍼티 및 메서드

 

 

class Fruit {
    // eng = 'noname';
    static count_fruits = 0;
    constructor(name, emoji){
        this.name = name;
        this.emoji = emoji;
    }
    display = () => {
        console.log(`${this.name} : ${this.emoji}`);
    };

    static makeBanana() {
        // return 'banana';// class이름으로 바로 접근가능
        return new Fruit('banana', '🍌');
        // 클래스 레벨 메서드에서는 this를 참조할 수 없음
    }

}
// apple은 Fruit 클래스의 인스턴스
const apple = new Fruit('apple','🍎');
// orange는 Fruit 클래스의 인스턴스
        const orange = new Fruit('orange','🍊');

        console.log(apple);
        console.log(orange);
        console.log(apple.name);
        console.log(orange.emoji);
        apple.display();

        const banana = Fruit.makeBanana();
        console.log(banana);
        console.log(Fruit.count_fruits);

 

class Dog{
    #name; //외부에서 내 내용을 변경불가능하게 # = private
    #color;
    constructor(name, color){
        this.#name = name;
        this.#color = color;
    }
    get info(){
        return `이름 :${this.#name}, 색상 : ${this.#color}`;
    }
    set info(value){// 가격을 받아 처리
        console.log(`set`,value);
        this.#name = value;
    }
    run = () => {
        console.log(`${this.#color} 색상의 상아지 ${this.#name}는 달립니다.`)
    }
    #eat = () =>{
        console.log(` ${this.#name}는 먹습니다.`)
    }
}
const Rucy = new Dog('루시', 'white');
        console.log(Rucy);
        Rucy.name = '개똥이'; //public으로 새롭게 만들어짐
// Rucy.#name = 'asd'// private은 밖에서 사용 불가능하다
//#field는 외부에서 접근이 불가능하다.
        console.log(Rucy);
        Rucy.run();
// Rucy.eat();
        console.log(Rucy.name);
// console.log(Rucy.info());
        console.log(Rucy.info); //get사용시, 출력만하면 get
        Rucy.info = '뽀미'; //set을 부름, 입력하면 set
        console.log(Rucy.info); //get

✔ Extends

class Employee{
    constructor(name, emp, time, pay){
        this.name = name;
        this.emp = emp;
        this.time = time;
        this.pay = pay;
    }
    calculatePay(){
        return this.time *this.pay;
    }

}

class FullTimeEmployee extends Employee{
    static PAY_RATE = 20000;
    constructor(name, emp, time){
        super(name, emp, time, FullTimeEmployee.PAY_RATE);
    }
}

class PartTimeEmployee extends Employee{
    static PAY_RATE = 10000;
    constructor(name, emp, time){
        super(name, emp, time, PartTimeEmployee.PAY_RATE);
    }
}


const Kim = new FullTimeEmployee('김사과', '개발자', 160);
        const Ban = new PartTimeEmployee('반하나', '디자이너', 100);


        console.log(Kim.calculatePay());
        console.log(Ban.calculatePay());

✔ Wrapper

const num = 10; // number 원시 타입
        console.log(typeof(num));
        console.log(num);//num뒤에 .을 찍는 순간 이는 객체가 되면서 메소드를 사용한다.
// 객체가 아닌데 왜 메소드를 호출 할 수 있지?
        console.log(num.toString()); // num object -> 기능 사용 .을 사용한 순간만
        console.log(num); // number 원시 타입


// 지수 표기법
        const num2 = 102;
        console.log(num2.toExponential());

// 반올림하여 문자열로 변환
        const num3 = 1234.12;
        console.log(num3.toFixed());

// 로컬형식(각 나라)의 문자형으로 변환
        console.log(num3.toLocaleString('ar-EG'));

        const num4 = 0.1 + 0.2 - 0.2;
        console.log(num4);

// 브라우저 밖(node.js) 
        console.log(globalThis); // 기본 속성으로 무엇을 사용할 수 있는지
// 브라우저 안(browser) 



        const URL = 'https://코리아아이티아카데미.com';
        const encoded = encodeURI(URL);
        console.log(encoded);

        const decoded = decodeURI(encoded);
        console.log(decoded);

        const part = '코리아아이티아카데미.com';
        console.log(encodeURIComponent(part));