자바스크립트 6. 클래스와 오브젝트의 차이점(class vs object), 객체지향 언어 클래스 정리

    728x90
    반응형
    class
    {
    	속성 (fields);
    	행동 (methods);
    }
    - 청사진
    - template
    - delcare once
    - no data in (메모리안에 안들어간다)
    
    class를 이용해서 실제 데이터를 넣어서 새로운 인스턴스를 생성하면
    object가 된다.
    object
    - instance of a class
    - created many times
    - data in (메모리안에 들어간다)
    
    'use strict'
    js파일 제일 위에 써서 모던하게 사용하자. 
    
    // class: template
    // object: instance of a class
    
    1. Class declarations
    class Person {
    	// constructor
    	constructor(name, age) {
    		// fileds
    		this.name = name;
    		this.age = age;
    	}
    
    	// methods
    	speak() {
    		console.log(`${this.name}: hello!`);
    	}
    }
    
    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 = lastName;
    		this.age = age;
    		// age라는 getter를 정의하는 순간 this.age는 메모리에 올라가있는 데이터를 읽어오는것이 아니라 get age를 호출 한다.
     
    		// setter를 정의하는 순간. age는 setter를 호출하게 된다. 
    		// 전달된 value를 this.age에 할당할때 메모리레 값을 업데이트하는것이 아니라 setter를 다시 호출 -> 무한정 반복되서 콜스택이 닫힐 수 있다.
    		// 이를 방지하기 위해서 getter, setter에서 사용하는 변수의 명을 변경해줘야한다. 
    		// 이렇게 되면 User라는 class안에는 firstName, lastName, _age 총 세개의 field가 있게 된다.
    	}
    
    	get age() { // 값을 리턴
    		return this._age;
    	}
    
    	set age(value) { // 값을 설정
    		this._age = value < 0 ? 0 : value;		
    	}
    }
    
    const user1 = new User('Steve', 'job', -1);
    console.log(user1);
    
    3. Fields (public, private)
    // Too soon!
    class Experiment {
    	publicField = 2;
    	#privateField = 0;
    }
    const experiment = enw 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 Artice(2);
    console.log(article1.publisher);
    console.log(Article.publisher);
    Article.printPublisher();
    // object에 상관업이 들어오는 데이터에 상관없이 공통적으로 class에서 쓸수있는거라면 static을 사용하는것이 메모리 사용을 줄일 수 있다.
    
    
    5. 상속과 다양성
    // 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(`draw ${this.color} color of`);
    	}
    
    	getArea() {
    		return this.width * this.height:
    	}
    }
    
    class Rectangle extneds Shape{}
    class Triangle extneds Shape{
    	// 필요한 함수만 재 정의 가능 - 오버라이딩
    
    	draw() {
    		super.draw();
    		console.log('111');	
    	}	
    
    	getArea() {
    		return (this.width * this.height) / 2;
    	}
    }
    
    const rectangle = new Rectangle(20, 20, 'blue');
    rectangle.draw();
    const triangle = new Rectangle(20, 20, 'blue');
    triangle.draw();
    
    6. Class checking: instanceOf
    console.log(rectangle instanceof Rectangle)
    
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

    https://www.youtube.com/watch?v=_DLhUBWsRtw&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=6

     

    728x90
    반응형

    댓글