[javascript] function 상속

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

상속을 보기전에 프로토타입에 대해 이해해야함

▶ 프로토타입 먼저보기

---

classical 방식은 new 연산자를 통해 생성한 객체를 사용하여 코드를 재사용하는 방법 → java 방식

prototypal 방식은 리터럴 또는 Object.create()를 이용하여 객체를 생성하고 확장해 가는 방식 → js 선호

기본방법

function Person(name){
   this.name = name || "네이처리";
}

Person.prototype.getName = function(){
   return this.name;
}

function Korean(name){}
Korean.prototype = new Person();

let kor1 = new Korean();
console.log(kor1.getName());  // 네이처리

let kor2  = new Korean("박씨");
console.log(kor2.getName());  // 네이처리 (!)

let per1 = new Person("박씨");
console.log(per1.getName());  // 박씨

자식객체를 생성할 때는 인자를 넘겨도, 부모 객체를 생성할 때는 인자를 넘겨주지 못함

생성자 빌려쓰기

자식 함수에서 받은 인자를 부모로 전달하지 못했던 부분을 해결한다.

function Korean(name){
	  Person.apply(this, arguments);
}

let kor3 = new Korean("김씨");
console.log(kor3.name); // 김씨

▲ Person영역(부모객체)의 this를 Korean영역(자식객체)의 this로 바인딩

이 방법은 부모객체의 this로 된 멤버들만 물려받게 되는 단점이 있다.

그래서 부모 객체의 프로토타입 객체의 멤버들을 물려받지 못한다.

▶function.apply() 자세히보기

생성자 빌려쓰고 프로토타입 지정

function Korean(name){
    Person.apply(this, arguments); // this binding (person 호출1)
}
Korean.prototype = new Person(); // member binding (person 호출2)

let kor4 = new Korean("최씨");
console.log(kor4.getName()); // 최씨

▲this와 멤버 둘다 물려받게 된다.

Person 프로토타입 객체 (멤버) ← new Person (this.name=네이처리) ← kor1 객체 (this.name=최씨)

그런데 부모 객체를 두번 호출 하여, name에 대해서는 kor4객체와 부모함수를 생성한 객체에도 존재한다.

프로토타입 공유

부모생성자를 한번도 호출하지 않으면서, 프로토타입 객체를 공유하는 방법

function Korean(name){
    this.name = name;
}
Korean.prototype = Person.prototype;

let kor5 = new Korean("유씨");
console.log(kor5.getName()); // 유씨

Person 프로토타입 객체 (멤버) ← kor1 객체 (this.name=톰)
자식함수를 통해 생성된 객체는 부모함수를 통해 생성된 객체를 거치지않고, (이해하기어려움)
부모함수의 프로토타입 객체를 부모로 지정하여 객체를 생성한다!

prototypal 방식의 재사용

let person = {
    type: "이름",
    getType: function(){
        return this.type;
    },
    getName: function(){
        return this.name;
    }
}

let case = Object.create(person); // 객체생성 및 속성부여
case.name = "네이처리";

console.log(case.getType()); // 이름
console.log(case.getName()); // 네이처리

Object.create(객체[, 추가객체])는 지정된 프로토타입 객체 및 속성(property)을 갖는 새 객체를 만든다.
첫번째 매개변수는 부모객체로 사용할 객체, 두번째 매개변수는 반환되는 자식객체의 속성에 추가되는부분이다.

위의 코드들을 직접 작성해보고 상속 단계별 this와 member 콘솔로 확인해보시기를 추천합니다.

---