js 계승의 6가지 방식

1. 원형 계승

    function Father() {
        this.names = ['tom', 'kevin'];
    }
    Father.prototype.getName = function () {
        console.log(this.names);
    }

    function Child() {
        
    }
    Child.prototype = new Father();
    
    var child1 = new Child();
    child1.names.push('boaz');  // ['tom', 'kevin'，'boaz']
    child1.getName();
    
    var child2 = new Child();
    child2.getName(); // ['tom', 'kevin'，'boaz']

원형 계승의 단점:

부류의 인용 유형 속성은 모든 부류 실례에 의해 공유되고 어떤 부류 실례가 부류의 인용 유형 속성을 수정하면 다른 부류 실례는 영향을 받는다

하위 클래스 실례를 만들 때 상위 클래스에 전참할 수 없습니다

2. 차용 구조 함수 계승

function Father(name) {
        this.name = name;
        this.say = function () {
            console.log('hello');
        }
    }

    function Child(name) {
        this.name = name;
        Father.call(this,name);
    }

    var p1 = new Child('Tom');
    console.log('p1', p1);
    p1.say();
    var p2 = new Child('Kevin');
    console.log('p2', p2);
    p2.say();

장점:

인용 유형 속성이 모든 실례에 공유되는 것을 피했다

부류에게 전삼할 수 있다

단점:

방법은 반드시 구조 함수에 정의되어야 한다

하나의 실례를 만들 때마다 방법을 한 번 만듭니다

3. 조합 계승 (원형 계승과 차용 구조 함수 계승의 조합)

function Father(name, age) {
    this.name = name;
    this.age = age;
    console.log(this);
}
Father.prototype.say = function() {
    console.log('hello');
}

function Child(name,age) {
    Father.call(this,name,age);
}
Child.prototype = new Father();

var child = new Child('Tom', 22);
console.log(child);  

상용 상속 방식의 유일한 단점은 부류의 구조 함수가 두 번 호출된다는 것이다

4. 기생식 계승

function createObj(o) {
    var clone = object.create(o);
    clone.sayName = function () {
        console.log('hello');
    }
    return clone;
}

기존 대상의 속성을 강화하기 위해 봉인된 함수를 만드는 것입니다. 구조 함수를 빌려 쓰는 것과 마찬가지로 모든 실례가 한 번 만드는 방법입니다.

5. 기생 조합식 계승

//  
function object(o) {
    var F = function() {};
    F.prototype = o;
    return new F();
}
function inhert(subType,superType) {
    var prototype = object(superType.prototype);
//  ， ， 。 
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function Super(name) {
    this.name = name;
}
Super.prototype.sayName = function() {
    console.log(this.name);
}

function Sub(name, age) {
    Super.call(this, name);
    this.age = age;
}

inhert(Sub, Super);

var sub = new Sub('Tom', 22);
sub.sayName();

또 다른 이해하기 쉬운 방식

//  + + 
function Person() {
    console.log(22);
    this.class = ' ';
}

//  
Person.prototype.say = function() {
    console.log(this.name);
}

/**
 *   Man.prototype.__proto__ === Person.prototype;
 * Man  === Person 
 */
 Man.prototype = Object.create(Person.prototype);
 Man.prototype.constructor = Man;


function Man(name, age) {
    this.name = name;
    this.age = age;
    //  
    Person.call(this);
}

var man = new Man(' ', 100);
console.log(man);

이것은 es5의 가장 좋은 계승 방식으로 모든 계승 방식의 장점을 한데 모았다.

6. es6의 계승 방식

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

class Child extends Father{
    constructor(name, age) {
        super(name);
        this.age = age;
    }
}

var child = new Child('Tom',22);
child.sayName();

요약: 세 가지 간단한 계승 방식

원형식 계승

구조 함수를 빌려 계승한다

기생식 계승

두 가지 복잡한 계승 방식

조합식 계승: 1+2의 조합

기생 조합식 계승: 1+2+3의 조합