Java Script -4

프로토타입

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.showInfo = function () {
         console.log(this.name, this.age);       
    }
}

이런식으로 내부에 함수를 불필요하게 저장하는것은 효율적이지 않다.
(함수가 호출되어 this에 다른 객체가 들어갈때마다 showInfo함수가 매번 새로 만들어 지기때문)
그 대신,

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.showInfo = function () {
    console.log(this.name,this.age)
}

이런식으로 해당 함수의 프로토 타입에 메서드를 저장해 상속받는 모든 함수들이 공유할 수 있게끔하는것이 훨씬 더 효율적이다.

그렇기에 해당 함수를 상속받은 함수들은 내부의 변수가 다르더라도 같은 showInfo함수를 가지게된다.

const p2 = new Person("김이름", 30);

p1.showInfo() === p2.showInfo()

->true

생성자 함수 객체의 상속

위 과정을 간단히 단축하기 위해 생겨난것이 클래스이다. (타 언어 클래스와는 다름)

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    showInfo() {
        console.log(this.name, this.age);
    }
}

const p1 = new Person("이름",10)

위 과정을 하면 showInfo 메서드가 Person 함수의 프로토타입에 추가된다.

그러나 이렇게 생성된 p1은 생성자 함수로서 역할을 할 수가 없다.

const c1 = new p1("이름",10)

불가능

프로토 타입 체인만 가지고 있을뿐, 프로토타입을 가지고 있지않다.

static

프로토타입에 정보를 추가하는것이 아닌 static 키워드를 통해 Person메서드에 데이터를 추가하는것이 가능하다. (Person에서만 사용가능함)

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    static count = 10;
    static staticMethod() {
        console.log("정적 메서드")
    }
    
    showInfo() {
        console.log(this.name, this.age);
    }
}

클래스형태로 생성자 함수 생성

class Ellipse {
    constructor(a,b){
        this.a = a;
        this.b = b;
    }

    area() {
        console.log("면적 : ", this.a * this.b * Math.PI);
    }
}



class Circle extends Ellipse {
    constructor(r){
        super(r, r);   //Ellipse.call(this, r, r);
    }
}


const c1 = new Circle(5)

c1.area()
-> 정상작동

extends를 통해 생성할 수 있다.