2022.09.05 JavaScript : Class와 Object의 차이, 상속과 다향성 , instanceOf

Class

• 객체가 모여있는 컨테이너
•  

class a {  //객체가 모여있는 컨테이너
 name; 
 age;  //Field : 데이터

Speak(); // Method : 메소드(행동)
}
//데이터만 들어있는 Class는 데이터 Class라고 함.

 

class				object
-template				-instance of a class
-declare once				-created many times
-no data in				-data in
제조법				제조법으로 제조된 물건

 

 

Class선언

class person {
constructor(name, age){
this.name = name;
this.age = age; //field
}
speak(){
console.log(`${this.name}:hello!!`);
//여기서 name는 생성된 object이다. 
}


//object
const 길동 = new person('길동', 20);
console.log(길동.name); //=>출력물 : 길동
console.log(길동.age); //=> 출력물 : 20
길동.speak() //=>  출력물 : 길동:hollo!!

 

Class선언2

 

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; 
     // 두 age의 이름이 같으면 fields -> setage -> value -> setgae의 무한 반복 그래서 아래처럼 _를  넣어줌
     // getter도 마찬기로
     //java에서는 메소드 자체가 set, get가 붙기 때문에 괜찮음. 
     
        if(value < 0){
        throw Error("나이는 0 미만이 될 수 없습니다");
        }
        this_age=values; 
        //또는
        this._age = values < 0 ? 0:value;
        }
        }
}

 

 

상속과 다향성

 

//사각형, 세모, 동그라미가 있다고 할 때. 이를 표현해주기 위해서 
//shape(도형)이라는 클래스를 선언한다. 

Class Shape {
constructor(width, height, color){
this.width = width;
this.height = height;
this.color = color;

droaw(){
console.log(`drawing ${this.color} color of`);
}

getArea(){
return this.width * this.height;
}
}


//extends : 연장 Shape를 상속받음.
class Rectangle extends Shape{}
class Triangle extends Shape{
draw(){
console.log("삼각형");
//이렇게 하면 drawing red color of가 출력되지 않는다 때문에 super를 사용
super.draw();
}
getArea(){
return (this.width * this.height;) / 2;
//overrding(오버라이딩 : 부모의 메소드를 필요한 것만 재정의 하여 사용할 수 있다)
}}

const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw();  //출력물 => drawing blue color of\
console.log(rectangle.getArea()); //출력물 => 400

const triangle = new Triangle(20, 20, 'red');
triangle,draw(); // 출력물 => drawing red color of
// console.log(triangle.getArea()); 
// 출력물 => 400 삼각형은 2를 나눠야 함으로 다향성을 이용한다. super.draw(); 이다
//그럼 최종 출력물은 '삼각형'과 (super을 아래에 선언했기 때문에) 200이 된다.

 

 

instanceOf

• Class를 이용해서 만들어진 인스턴스인 아닌지를 판별

console.log(rectangle instanceOf Rectangle); -true  rectangle =new Rectangle 
console.log(triangle instanceOf Rectangle); -fales triangle은 Rectangle을 이용하여 만들어지지 않음
console.log(triangle instanceOf Triangle); -true  triangle = new Triangle
console.log(triangle instanceOf Shape); -true triangle = new Triangle 이고 Triangle extends Sgape
console.log(triangle instanceOf Object); -true javaScript에서 만든 모든 Object는 모두 Object를 상속 받은 것.