Class -> 메서드 선언, 상속 메커니즘

// strict 모드에서 실행
class Member {
    // 클래스 인스턴스를 생서하고 생성한 인스턴스를 초기화하는 역할
    constructor(name) {
        this.name= name;
    }
    // prototype에 프로퍼티 연결
    setName(name){
        this.name = name;
    }
    getName(){
        return this.name;
    }
};

// 클래스 밖에서 Member 클래스에 메서드를 추가하는방법
Member.prototype.getTitle = function () {
};

console.log(typeof Member); // function

let memberObj =  new Member("과목");
console.log(memberObj.getName()); // 과목

// ---------------------
class Member2 {
    constructor() {
        return {name:"홍길동"};
    }
    getName(){
        return "이름";
    }
}

memberObj = new Member2();
console.log(memberObj.name); // 홍길동
console.log(memberObj.getName); // undefined
// 인스턴스를 반환하지 않고 {name:"홍길동"}을 반환하므로 memberObj에 getName이 존재하지 않아 undefined를 출력
// console.log(memberObj.getName()); // Uncaught TypeError: memberObj.getName is not a function

// ---------------------
// getter, setter
// 메서드이름앞에 get을 작성하면 getter되고 set을 작성하면 setter가 된다
class Member3{
    set setName(name){
        this.name = name;
    }
    get getName(){
        return this.name;
    }
}

memberObj = new Member3();
memberObj.setName = "수학";
console.log(memberObj.getName); // 수학

// ---------------------
// 상속
function Sports(member) {
    this.member = member;
};
Sports.prototype.setItem = function (item) {
    this.item = item;
}
function Soccer(member) {
    Sports.call(this, member);
};
Soccer.prototype = Object.create(Sports.prototype, {
    setGround:{
        value:function (ground) {
            this.ground = ground;
        }
    }
});
Soccer.prototype.constructor = Soccer;

var obj = new Soccer(11);
obj.setItem("축구");
obj.setGround("상암");

console.log(obj.member); // 11
console.log(obj.item); // 축구
console.log(obj.ground); // 상암

상속 설명)

Sports의 첫 문자를 대분자로 작성한 것은 new 연산자로 인스턴스를 생성하려는 의도

new Sports()를 실행하면 Sports()가 호출되고, 다시 디폴트 constructor를 호출한다.

그래서 Sports()를 생성자(constructor)함수라고 부른다.

this.member에서 this가 생성하는 인스턴스를 참조하므로 member는 인스턴스 프로퍼티가 된다. 생성자 함수에서 this.member = member 형태는 인스턴스에 초깃값을 설정

이렇게 설정된 값은 생성된 모든 인스턴스에서 공유하지 않고 인스턴스마다 값을 각각 유지한다.

이것이 인스턴스를 만드는 목적 중의 하나다.

생성자 함수가 있으면 Sports.prototype.setItem과 같이 prototype에 메서드를 연결한 코드가 작성되어 있다.

이를 작성하지 않으면 생성자 함수가 아닌 일반 함수이다.

function Soccer(member) {
    Sports.call(this, member);
};

new Sports()가 아닌 Sports.call() 형태로 함수를 호출한 것은, 바로 다음 코드에서 Sprototype을 사용하여 인스턴스를 생성하므로 인스턴스에 초깃값만 설정하면 되기 때문이다.

Soccer.prototype = Object.create(Sports.prototype, {
    setGround:{
        value:function (ground) {
            this.ground = ground;
        }
    }
});

Object.create의 두번째 파라미터의 setGround를 첫번째 파라미터인 Soccer.prototype에 첨부한다.

그리고 Sports.prototype에 연결된 메서드를 Soccer.prototype.__proto__에 첨부한다. 따라서 구조적이고 계층적인 모습이된다.

이렇게 연결한 후에 new Soccer()로 인스턴스를 생성하면 Soccer.prototype과 Sports.prototype에 연결된 메서드를 인스턴스 메서드로 호출할 수 있다.

ES5에서는 이와같은 방법으로 상속을 구현한다.

Soccer.prototype.constructor = Soccer;

Soccer.prototype에 constructor가 연결되어 있는데, 앞 코드에서 Soccer.prototype에 프로퍼티를 연결하므로 constructor가 지워진다.

Soccer를 설정하지 않아도 인스턴스가 생성되지만, constructor에서 Soccer 전체를 참조하는 것이 정상이다.

var obj = new Soccer(11);

new 연산자로 Soccer() 생성자 함수를 호출하여 인스턴스를 생성한다.

Sports.prototype에 연결된 메서드는 인스턴스에 포함되지만, Sports() 생성자 함수는 포함되지 않으며 Sports.call(this, member); 코드를 수행하여 인스턴스에 초긱밧을 설정한다.

호출된 Sports 생성자 함수에서 this는 생성한 인스턴스를 참조하게된다.