2020-09-24 (js의 계승 방식)

전언

이틀 동안 안 썼는데, 그래, 왜 이렇게 게으르니, 쓸데없는 말 하지 말고 왔어, 왔어.

물려받다

하위 클래스는 부모 클래스가 가지고 있는 속성과 방법을 누릴 수 있어 유사한 실례를 만들 때 매우 유용하다.

원형 체인 상속

구조 함수, 실례 대상, 원형 대상 간의 관계를 잘 알고 계신지 모르겠지만 사실 구조 함수도 하나의 대상이고 js는 모든 것이 대상이잖아요. function도 new Function()를 통해 만들어졌고Function.prototype.__proto__ === Object.prototype.내가 말하고 싶은 것은 모든 실례 대상은 __proto__ 지침을 통해 구조 함수의 원형 대상과 연결되고 속성을 방문할 때 이 원형 체인에 따른다는 것이다.
첫 번째 계승: 부류에 대한 속성과 방법을 간단하게 얻기

function Parent(name) {
    this.name = name || 'parentName';
}
Parent.prototype.sayName = function () {
    console.log(this.name);
}

function Son(age) {
    this.age = age;
}
Son.prototype = new Parent();
const son1 = new Son(18);

원리: instance.__proto__ == constructor.prototype;에서 말한 관계체인

단점:

모든 실례가 부류의 속성과 방법을 공유하고 부류가 자신의prototype 속성을 수정하면 다른 부류도 영향을 받는다

부류 하나만 계승

하위 클래스는 실례를 만들 때 상위 클래스에 전참할 수 없음

하위 클래스가 자신의 원형 방법과 속성을 추가하려면 계승하기 전에 조작해야 한다

차용 구조 함수 계승

하위 클래스는 실례를 만들 때 부모 클래스에 파라미터를 전달할 수 있습니다

function Parent(name) {
    this.name = name || 'parentName';
}
Parent.prototype.sayName = function () {
    console.log(this.name);
}

function Son(name, age) {
    Parent.call(this, name);
    this.age = age;
}
son1 = new Son("carter", 18);

원리:call방법으로 부류를 집행하는 방법, 부류 자체의 속성을 부류에 첨가

단점:

모든 하위 클래스의 실례는 상위 클래스 구조 함수를 호출해야 한다

부류의 원형의 속성과 방법을 계승할 수 없음

부류에 속하지 않는 실례로 부류에만 속한다

원형 가차용 구조 함수 계승

앞의 두 가지 방법의 종합은 원형 체인을 빌려 부류의 원형 속성과 방법을 계승하고 구조 함수(전참 가능)를 빌려 부류의 속성과 방법을 계승하여 공유 속성의 문제가 존재하지 않는다.

function Parent(name) {
    this.name = name || 'parentName';
}
Parent.prototype.sayName = function () {
    console.log(this.name);
}

function Son(name, age) {
    Parent.call(this, name);
    this.age = age;
}
Son.prototype = new Parent();
son1 = new Son("carter", 18);

단점:

구조 함수를 두 번 호출해야 한다

하위 클래스의 원형을 다시 쓰는 constructor 속성

조합식 계승

상술한 방법과 달리 원형 속성을 계승할 때 자류의 원형 대상을 부류의 원형 대상으로 직접 가리키면 두 번의 구조 함수를 호출할 필요가 없다.

function Parent(name) {
    this.name = name || 'parentName';
}
Parent.prototype.sayName = function () {
    console.log(this.name);
}

function Son(name, age) {
    Parent.call(this, name);
    this.age = age;
}
Son.prototype = Parent.prototype;
son1 = new Son("carter", 18);

단점:

하위 클래스의 실례적인 constructor 속성 지향이 맞지 않음

기생식 조합 계승

조합식 계승과 달리 원형 속성을 계승할 때 하나의 부류의 원형 대상을 완전히 복제하여 자류의 원형을 가리킨다.constructor를 다시 씁니다.

function Parent(name) {
    this.name = name || 'parentName';
}
Parent.prototype.sayName = function () {
    console.log(this.name);
}

function Son(name, age) {
    Parent.call(this, name);
    this.age = age;
}
Son.prototype = Object.create(Parent.prototype);
Son.prototype.constructor = Son;
// Object.create ：
// Object.create = function (protoObj) {
//  function F() {};
//  F.prototype = protoObj;
//  return new F();
// }
son1 = new Son("carter", 18);

ES6의 class 상속

class Parent {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
}

class Son extends Parent {
    constructor(name, age) {
        super(name);
        this.age = age;
    }
}
son1 = new Son("carter", 18);

총결산

ES5의 계승은 실질적으로 하위 클래스의 실례 대상인this를 먼저 창조한 다음에 부모 클래스의 방법을this에 추가하는 것이다(Parent.apply(this).ES6의 계승 메커니즘은 완전히 다르다. 실질은 먼저 부류 실례 대상의 속성과 방법을this에 추가한 다음에 (따라서 슈퍼 방법을 먼저 호출해야 한다) 하위류의 구조 함수로this를 수정하는 것이다.