rhanziy

javascript. class 본문

Html_css_js

javascript. class

rhanziy 2022. 1. 19. 00:49
'use strict';

// object-oriented programming
// class: template
// object: instance of a class

// 1.Class declations

class person {
    // Constructor
    constructor(name, age){
        // field
        this.name = name;
        this.age = age;
    }

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

const rhanyi = new person('rhanyi', 29);
console.log(rhanyi.name);
console.log(rhanyi.age);
rhanyi.speak( );

// 2. Getter and Setters
class User {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    get age( ) {
        return this._age;
    }
    set age(value){
        this._age = value < 0 ? 0 : value; 
    }
    // getter와 setter를 정의하면 생성자에서
    // 값을 할당하거나 불러오는게아니라 바로 getter나 setter를 호출해버린다.
    // so, getter와 setter안에서 쓰여지는 변수명을 다르게 해줘야함!
}
const user1 = new User('Steve', 'Job', -1);
console.log(user1.age);


// 3. Fields (public, private) 최근에 추가됨
class Experiment {
    publicField = 2;
    #privateField = 0; // 클래스외부에서는 접근이 불가능하다.
}
const experiment = new Experiment( );
console.log(experiment.publicField); 
console.log(experiment.privateField); // undefined

// 4. Static properties and methods
class Article {
    static publisher = 'Dream Coding'; 
    // 오브젝트마다 할당되어지는게 아니라 class 자체에 할당되어있다.
    // 변하지않는 상수 -> 공용으로 메모리 사용
        constructor(articleNumber){
        this.articleNumber = articleNumber;
    }

    static printPublisher( ){
        console.log(Article.publisher);
    }
}
const article1 = new Article(1);
const article2 = new Article(2);
console.log(article1.publisher); // undefined
console.log(Article.publisher);
Article.printPublisher( );

// 5. Inheritance

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('★');
    }
    getArea( ){
        return (this.width * this.height) / 2 ;
    }
}

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); 
// rectangle은 Rectangle의 인스턴스인가!?  -> boolean형
console.log(triangle instanceof Rectangle);
console.log(triangle instanceof Triangle);
console.log(triangle instanceof Shape);
console.log(triangle instanceof Object); 
// 자바스크립트의 객체이다 true!

 

Comments