Simple Inheritance with JavaScript - Lee-hyuna/33-js-concepts-kr GitHub Wiki

원문 출처: https://www.sitepoint.com/simple-inheritance-javascript/

상속 구현

JavaScript를 사용하여 이 계층으로 만들려는 항목을 시각화해보자.

우선, ClassA를 만든다. 명시적인 클래스가 없기 때문에, 아래와 같은 함수를 만들어냄으로써 정의할 수 있다.

var ClassA = function() {
  this.name = "class A";
}

"class"에 new Keyword로 인스턴스를 생성했다.

var a = new ClassA();
ClassA.prototype.print = function() {
    console.log(this.name);
}

그리고 a에 연결된 object를 이용한다.

a.print();

꽤 쉽죠?
이번엔 아주 짧은 코드를 소개한다.

var ClassA = function() {
    this.name = "class A";
}

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a.print();

이제 클래스 사이에 "상속성"을 만드는 도구를 추가해보자. 이 툴은 한 가지 일만 하면 된다.
프로토타입 복제:

var inheritsFrom = function (child, parent) {
    child.prototype = Object.create(parent.prototype);
};

마법이 일어나는 곳이 바로 이 곳이야!
프로토타입을 복제함으로써 function을 새로운 클래스로 이전한다.

그래서 첫 번째 클래스가 될 두 번째 클래스를 추가하고 싶다면 이 코드를 사용해야만 한다.

var ClassB = function() {
    this.name = "class B";
    this.surname = "I'm the child";
}

inheritsFrom(ClassB, ClassA);

ClassB가 ClassA의 print기능 상속받았다.

var b = new ClassB();
b.print();

결과,

class B

ClassB의 인쇄 기능도 무시할 수 있다.

ClassB.prototype.print = function() {
    ClassA.prototype.print.call(this);
    console.log(this.surname);
}

결과는 다음과 같을 것이다

class B 
I’m the child

여기서 print function을 얻기 위해 ClassA.prototype으로 call하는 것이다.
그런 다음 call function 덕분에 현재 Object의 기본 함수를 호출할 수 있습니다(this).

ClassC를 만드는게 명확해졌다.

var ClassC = function () {
    this.name = "class C";
    this.surname = "I'm the grandchild";
}

inheritsFrom(ClassC, ClassB);

ClassC.prototype.foo = function() {
    // Do some funky stuff here...
}

ClassC.prototype.print = function () {
    ClassB.prototype.print.call(this);
    console.log("Sounds like this is working!");
}

var c = new ClassC();
c.print();

결과

class C 
I’m the grandchild 
Sounds like this is working!