JavaScript의 Subclassing, Prototype

1. Subclassing

1. prototype: 모델의 청사진을 만들 떄 쓰는 original form
2. constructor: 인스턴스가 초기화될 때 실행하는 생성자 함수
3. this:
   • 함수가 실행될 때, scope마다 생성되는 고유한 실행 컨텍스트
   • new 키워드로 인스턴스를 생성하면 해당 인스턴스가 this의 값이 됨

1.1. 클래스와 인스턴스의 관계

• proto는 모든 객체에 포함되어 있기 때문에 상위의 프로토타입 체인을 확인함 (가장 최상위는 Object.prototype)

function Human(name) {
    this.name = name;
}

let steve = new Human('steve');

steve.__proto__ === Human.prototype     // true
steve.__proto__.__proto__ === Object.prototype    // true

• 대표적으로 HTMLElement를 보면 HTMLElement => Element => Node => EventTarget => Object 순으로 프로토타입 체인이 연결되어 있음
• 프로토타입 체인을 통해 각각의 상위 프로토타입 체인에 정의되어 있는 기능을 상속받아 활용가능

let li = document.createElement('li');

li.__proto__ === HTMLLIElement.prototype    // true
li.appendChild === Node.prototype.appendChile   // true

1.2. proto, constructor, prototype의 관계와 Object.create()

• Object.create()는 첫 번째 인자를 바탕으로 새로운 프로토타입 객체를 생성함
• 아래 코드를 보면서 이해하기

function Human(name) {
    this.name = name;
};

Human.prototype.sleep = function() {
    console.log(this.name + ' is sleeping...');
};

var steve = new Human('steve');


function Student(name) {};

Student.prototype.learn = function() {};

var john = new Student('john');

john.learn();   // work
john.sleep();   // work?? 작동하게 할려면 어떻게..?

• john.sleep()이 작동하기 위해서는 다음과 같이 해야함

function Human(name) {
    this.name = name;
};

Human.prototype.sleep = function() {
    console.log(this.name + ' is sleeping...');
};

var steve = new Human('steve');

function Student(name) {
    human.call(this, name);
};

Student.prototype = Object.create(Human.prototype);     // __prototype__
Student.prototype.constructor = Student;    // constructor
Student.prototype.learn = function() {};

var john = new Student('john');
john.learn();
john.sleep();       // john is sleeping...

1.3. Using class keyword

• 위의 과정을 간단히 class 키워드를 이용하여 구현할 수 있음 (class 키워드를 이해하기 위해 위의 과정에 대한 이해가 필요)
• 위의 과정을 class 키워드를 사용하면 아래와 같이 간단히 구현가능 함

class Human {
    constructor(name) {
        this.name = name;
    }
    sleep() {
        console.log(this.name + ' is sleeping...');
    }
}

var steve = new Human('steve');

class Student extends Human {
    constructor(name) {
        super(name);
    }
    learn() {
    }
}

var john = new Student('john');
john.learn();
john.sleep();       // john is sleeping...

1.4. 메서드 공유하는 방법

1. pseudoclassical 방법

function Human(name) {
    this.name = name;
};

Human.prototype.sleep = function() {
    console.log('zzz');
};

function Student(name) {
    Human.apply(this, arguments);
};

Student.prototype.sleep = function() {
    Human.prototype.sleep.apply(this);
    console.log('자면 안돼!');
};

2. class 키워드 방법

class Human {
    constructor(name) {
        this.name = name;
    }
    sleep() {
        console.log('zzz');
    }
}

class Student extends Human {
    sleep() {
        super.sleep
    }
}