자바스크립트의 객체란 무엇인가 ? (2)

객체라는 것을 설명하기에는 포스팅 몇개로 끝나지는 않을 것 같기에 객체에 대한 기본적인 것만 초반에 작성하고 추후에 점차 양을 늘릴생각이다. (혹시라도 객체지향프로그래밍이 궁금하다면 꼭 보길 바란다. ) 

상속 

혹시 페가수스라는 생물을 아는가 ? 페가수스는 말의 모습을 하고 있지만 날개가 달린 환상의 동물이다. 이 페가수스는 부모인 말과 조류에게서 말의 형태를 물려 받았고 조류로 부터 멋진 날개와 비행실력을 가지고 있다. 이처럼 부모의 프로퍼티나 메서드를 쓸 수 있게 물려받는 것을 상속이라고 한다. 

 

class 포유류{
    constructor(){
        this.leftleg = "왼쪽다리";
        this.rightleg = "오른쪽다리";
    }
    hasBaby(){
        console.log("새끼를 밴다.")
    }
}

class Cat extends 포유류{
    meow(){
        console.log("야옹")
    }
}

const nyaong = new Cat();

nyaong.hasBaby();
nyaong.meow();

 

Cat 클래스의 경우 hasBaby를 클래스 내부에서 작성하지 않았음에도 extends 키워드를 통해 상속을 받았기 때문에 hasBaby()를 사용할 수 있게 된 것이다. 

 

정적메서드 

현재까지의 메서드들은 인스턴스 없이 사용이 불가능하다. 그러나 이 정적 메서드를 사용하면 생성자로 인스턴스를 만들지 않고도 사용이 가능하며 모두는 이 정적 메서드를 공유하고 있어서 정적메서드를 통해 값이 변경되면 다른 인스턴스에서도 영향을 받는다. 

 

예를 들면 tv를 새로 생성할때마다 공장은 각 tv마다 1씩 증가된 번호를 기입하고 싶어하고 또한 관리자는 이렇게 생성된 tv의 총 생산 대수를 알고 싶다면 다음과 같이 작성 하면 된다. 

 

class tv{
    static nextNumber(){
        return tv.no++
    }
    static getNumber(){
        return tv.no;
    }

    getThisNumber(){
        return this.number;
    }
    constructor(){
        this.number = tv.nextNumber();
    }
}
tv.no = 0;

const samsungTv = new tv();
const samsungTv1= new tv();
const samsungTv2 = new tv();
const samsungTv3 = new tv();
const samsungTv4 = new tv();
const samsungTv5 = new tv();


console.log(tv.getNumber()); //결과는 6;
console.log(samsungTv4.number); // 결과는 4;

 

함수로 객체만들기

class 문법은 es6 2015년도에 들어온 최신 문법이다. 그래서 es5까지 지원하는 브라우저를 상대할 때는 올드한 방법으로 함수를 통해서 인스턴스를 만들어야 한다. 

 

function Dog(name){
    this.name = name;
    this.age = 0;
    this.state = "baby";
    this.bark = ()=>{
        console.log("왈왈")
    }
}

const huge = new Dog("huge");

console.log(huge.name);

huge.bark();