Javascript 상속

이번에 클래스 형식과 function 생성자 형식 상속에 대해서 공부하겠습니다.

Class 방식이 훨씬 사용하기 쉬우니까 Class방식 쓰시길 바랍니다. ES6이상 형식이기도 하고요

 

class 방식

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

    sum(){
        return 'class'+(this.age+this.value);
    }
}
//기존 다른 언어의 상속처럼 extends 만 사용하면 됩니다.
class People extends Person{
    constructor(name,age,value,lang,money){
        //super 는 ()로 처리가능하지만 this는 각각 변수대입해줘야함.
        super(name,age,value,lang);
        this.money=money;
    }

//메소드 오버라이딩(상속관계의 Person sum메소드 대신 People가 갖는 sum메소드로 덮어쓰기)
    sum(){
        return 'extend'+(this.age+this.value);
    }
    avg(){
        return 'extend';
    }
}

let kim = new People("김씨",23,45,"eng",10000);

console.log(kim);
console.log(kim.sum());
console.log(kim.avg());

 

 

function 방식

function Person(name,age,value,lang){
    this.name= name;
    this.age=age;
    this.value=value;
    this.lang=lang;
}
Person.prototype.sum = function(){
    return 'class'+(this.age+this.value);
}

function People(name,age,value,lang,money){
    Person.call(this,name,age,value,lang);
    this.money=money;
    //새로운 변수저장은 super처럼 한번에 모아서 못함

}

//Person 프로토타입 메소드를 상속
// __proto__비표준
// People.prototype.__proto__=Person.prototype;
People.prototype=Object.create(Person.prototype);

//생성자도 프로토타입으로 재 상속시켜줘야함. 그렇지 않으면 42번줄의 생성자가 People이 아니고 Person으로 뜨게 됨.
People.prototype.constructor= People;

People.prototype.sum= function(){
    return 'extend'+(this.age+this.value);
}

// 상속이후에 타이핑해야 적용됨. constructor 상속전에 타이핑하면 적용안됨.(Object.create 방식)
People.prototype.avg= function(){
    return 'extend';
}

let kim = new People("김씨",23,45,"eng",10000);


console.log(kim);
console.log(kim.sum());
console.log(kim.avg());
console.log("kim.constructor",kim.constructor);

function을 통한 상속에서 People.call(this,name,age,value,lang); 부분에서 call 메서드에 대해서 궁금하실 텐데

직접 설명보다 더 잘 설명되어있는 곳이 있어서 남깁니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call

Function.prototype.call()

 

 

 

생활코딩 참고