[JS] 자 바스 크 립 트 의 여섯 가지 계승 방식 요약

머리말
JS 의 상속 에 대해 서 는 전혀 이해 하지 못 했 습 니 다. 최근 에 인턴 을 구 했 는데 면접 에서 JS 의 상속 을 꼭 물 어 봐 야 하기 때문에 오늘 은 JS 의 몇 가지 상속 방식 을 정리 해 보 겠 습 니 다.
JS 상속 실현 6 가지 방식
계승 방식 을 말 하기 전에 우 리 는 먼저 아버지 류 의 코드 와 약속 한 표현 을 정의 합 니 다.

//        ，    
function Animal (name) {
    //    ,   ，       
    //var name = 'Animal';//      
    //var arr = [1];      //      
    //function sleep(){}  //    （    ）

  //     
  this.name = name || 'Animal';//      
  this.arr = [1];              //      
  this.sleep = function(){     //    （    ）
    console.log(this.name + '    ！');
  }
}
//     
Animal.prototype.eat = function(food) {
  console.log(this.name + '   ：' + food);
};

1. 원형 체인 계승
핵심: 부모 클래스 의 인 스 턴 스 충전 하위 클래스 의 원형 예: 관련 설명 은 코드 에서 주석 으로 설명 합 니 다.

function Cat(){}    //    
Cat.prototype = new Animal();//  ,Cat.prototype={name:'Animal',arr:[1],sleep: f()}
Cat.prototype.name = 'cat';//   Cat    name   

var cat = new Cat();  //new     cat，    （  ）  ，      
console.log(cat.name);  //cat
console.log(cat.eat('fish')); //cat   fish
console.log(cat.sleep());  //cat    
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

//    
var cat2 = new Cat();// new   Cat   
cat.arr.push(2);
console.log(cat.arr);//[1,2]
console.log(cat2.arr);//[1,2]

장점: 1. 매우 순수한 계승 관계 입 니 다. 인 스 턴 스 는 하위 클래스 의 인 스 턴 스 이자 부모 클래스 의 인 스 턴 스 입 니 다. 2. 부모 클래스 가 원형 방법 / 원형 속성 을 추가 하면 하위 클래스 가 3. 간단 하고 단점 을 실현 하기 쉽 습 니 다. 1. cat. arr 를 수정 하고 cat2. arr 도 바 뀌 었 습 니 다. 원형 대상 에서 온 인용 속성 은 모든 인 스 턴 스 가 공유 하기 때 문 입 니 다.이렇게 이해 할 수 있 습 니 다: cat. arr. push (2) 를 실행 합 니 다.먼저 cat 에 대해 속성 을 찾 고 인 스 턴 스 속성 (이 예 에서 인 스 턴 스 속성 이 없 음) 을 찾 았 습 니 다. 찾 지 못 하고 원형 체인 을 따라 위로 찾 았 습 니 다. cat 의 원형 대상 을 찾 았 는데 arr 속성 이 있 음 을 발 견 했 습 니 다.그래서 arr 말미 에 2 를 삽입 해서 cat2. arr 도 변 했다.2. 하위 클래스 인 스 턴 스 를 만 들 때 부모 클래스 구조 함수 에 인삼 을 전달 할 수 없습니다.
2. 구조 함수 방식 을 차용 한다.
핵심: 부모 클래스 의 구조 함 수 를 사용 하여 하위 클래스 인 스 턴 스 를 강화 하 는 것 은 부모 클래스 의 인 스 턴 스 속성 을 하위 클래스 (원형 과 아무런 관계 가 없 음) 에 복사 하 는 것 과 같 습 니 다. 예 를 들 어:

function Cat(name){
  Animal.call(this,name);  //  
}

var cat = new Cat('Tom');//new    cat，cat={name:'Tom',arr:[1],function sleep: f()}
console.log(cat.name);//Tom
console.log(cat.sleep());//Tom    
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

//    
var cat2 = new Cat('Ford');
console.log(cat.sleep === cat2.sleep);//false

장점: 1. 첫 번 째 방법의 하위 클래스 인 스 턴 스 가 부모 클래스 참조 속성 을 공유 하 는 문 제 를 해결 했다. 2. 하위 클래스 인 스 턴 스 를 만 들 때 부모 클래스 구조 함수 에 단점 을 전달 할 수 있다. 1. 인 스 턴 스 는 부모 클래스 의 인 스 턴 스 가 아니 라 하위 클래스 의 인 스 턴 스 속성 과 방법 만 계승 할 수 있 고 부모 클래스 의 원형 속성 과 방법 을 계승 할 수 없다. 3. 함수 재 활용 을 실현 할 수 없다.모든 하위 클래스 인 스 턴 스 는 부모 클래스 의 인 스 턴 스 함수 의 사본 이 있어 성능 에 영향 을 줍 니 다.
3. 그룹 상속 (가장 많이 사용)
핵심: 부모 클래스 구 조 를 호출 하여 부모 클래스 의 속성 을 계승 하고 전 삼 의 장점 을 보류 한 다음 에 부모 클래스 인 스 턴 스 를 하위 클래스 원형 으로 하여 함수 재 활용 예 를 실현 합 니 다.

function Cat(name){
  Animal.call(this,name);//  
}
Cat.prototype = new Animal();//  
Cat.prototype.constructor = Cat;//           

// Test Code
var cat = new Cat('Tom');
console.log(cat.name);//Tom
console.log(cat.sleep());//Tom    
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

장점: 1. 두 번 째 방법의 결함 을 보완 하고 인 스 턴 스 속성 / 방법 을 계승 할 수 있 으 며 원형 속성 / 방법 2. 하위 클래스 의 인 스 턴 스 이자 부모 클래스 의 인 스 턴 스 3. 인용 속성 공유 문제 가 존재 하지 않 습 니 다. 4. 하위 클래스 인 스 턴 스 를 만 들 때 부모 클래스 구조 함수 에 인삼 5 를 전달 할 수 있 습 니 다. 함수 재 활용 단점: 두 번 의 부모 클래스 구조 함 수 를 호출 했 습 니 다.두 개의 인 스 턴 스 를 만 들 었 습 니 다.
4. 원형 식 계승
핵심: 함 수 를 패키지 합 니 다. 이 함 수 는 인 스 턴 스 속성 이 없 는 대상 을 되 돌려 주 고 이 대상 을 점차적으로 강화 합 니 다 (인 스 턴 스 속성 을 점차 추가 합 니 다)
P. S. ES5 의 Object. create () 함 수 는 내부 가 원형 계승 이 고 IE9 + 지원 입 니 다.
예:

function object(o){  //  
//             ，                   ，               。     ，                   。
    function F(){}
    F.prototype = o;
    return new F();
}

var Animal = {
    name: 'Tom',
    food: ['meat']
};

var cat = object(Animal);//     cat  ，      ，    Animal
cat.name = 'Bob';
cat.food.push("fish");

var dog = object(Animal);//     cat  ，      ，    Animal
dog.name = 'Alice';
dog.food.push("beef");

console.log(Animal.food); //"meat","fish","beef"

장점: 1. 기 존 대상 에서 새로운 대상 을 파생 시 키 고 사용자 정의 형식 을 만 들 필요 가 없습니다. (이 예 에서 Animal 에서 cat 와 dog 두 대상 을 파생 시 키 고 본질 적 으로 대상 의 복사 입 니 다) 단점: 1. 부모 류 의 인용 속성 은 모든 인 스 턴 스 에 의 해 공 유 됩 니 다. 2. 코드 재 활용 이 불가능 합 니 다.(대상 은 현재 생 성 되 었 습 니 다. 속성 은 현재 추 가 된 것 입 니 다. 함수 패 키 징 을 하지 않 았 습 니 다. 어떻게 재 활용 합 니까?)
5. 기생 식 계승
핵심: 기생 식 계승 과 원형 식 계승 은 밀접 한 관 계 를 가 진 사고 입 니 다. 기생 식 계승 은 원형 식 계승 에 조끼 를 입 힌 것 일 뿐 계승 과정 을 봉인 하 는 함수 만 만 들 었 습 니 다. 이 함 수 는 내부 에서 어떤 방식 으로 대상 을 강화 하고 마지막 으로 모든 일 을 한 것 처럼 대상 으로 돌아 갑 니 다.
예:

function createAnother(o){
    var clone = object(o);//             ,                   （ Object.create()   ）
    clone.sayHi = function(){
        console.log("hi");
    };
    return clone;
}

var Animal = {
    name: 'Tom',
    food: ['meat']
};

var cat = createAnother(Animal);;
cat.sayHi();  //"hi"

장점: 1. 사용자 정의 유형 과 구조 함수 가 아 닌 대상 을 고려 하 는 경우 기생 식 계승 은 유용 한 모델 이다.
단점: 1. 기생 식 계승 을 대상 으로 함 수 를 추가 하여 함수 재 활용 을 실현 하지 못 해 효율 을 떨 어 뜨 린 다.
6. 기생 조합 계승 (가장 이상 적 인)
핵심: 기생 방식 을 통 해 하위 클래스 원형 대상 에 남아 있 는 부모 클래스 인 스 턴 스 속성 을 잘 랐 습 니 다. 그러면 두 번 의 부모 클래스 의 구조 함 수 를 호출 할 때 두 번 의 인 스 턴 스 방법 / 속성 을 초기 화하 지 않 고 조합 계승 의 단점 을 피 할 수 있 습 니 다.
예:

function Cat(name){
        Animal.call(this,name); //  
    }
    (function(){   //  
        //             
        var Super = function(){};
        Super.prototype = Animal.prototype;
        //          
        Cat.prototype = new Super();
        Cat.prototype.constructor = Cat;//           
    })();

    var cat = new Cat('Tom');
    console.log(cat.name); //Tom
    console.log(cat.sleep()); //Tom    
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); //true

장점: 1. 부모 클래스 구조 함수 만 호출 하여 하위 클래스 원형 대상 에 불필요 하고 불필요 한 속성 을 만 들 지 않도록 합 니 다.
문제.
기생 조합 계승 에서 즉시 실행 함수 부분 을 다음 과 같은 방식 으로 바 꾸 면 결 과 는 기생 조합 이 계승 한 결과 와 같다.

function Cat(name){
        Animal.call(this,name); //  
    }
    Cat.prototype = Animal.prototype;
    Cat.prototype.constructor = Cat;

    var cat = new Cat('Tom');
    console.log(cat.name); //Tom
    console.log(cat.sleep()); //Tom    
    console.log(cat instanceof Animal); // true
    console.log(cat instanceof Cat); //true

이때 하위 클래스 인 스 턴 스 는 부모 클래스 구조 함수 의 인 스 턴 스 속성 / 방법 이 있 습 니 다. 하위 클래스 원형 대상 은 부모 클래스 구조 함수 의 인 스 턴 스 속성 / 방법 이 없 지만 부모 클래스 원형 대상 의 속성 / 방법 이 있 습 니 다. 왜 이런 방식 을 사용 하지 않 습 니까? 여기 서 답 을 아 는 사람 이 있 으 면 대답 할 수 있 기 를 바 랍 니 다. 먼저 감사합니다. (^ ^)
참조 링크

http://www.cnblogs.com/humin/p/4556820.html

http://www.ayqy.net/blog/%E9%87%8D%E6%96%B0%E7%90%86%E8%A7%A3js%E7%9A%846%E7%A7%8D%E7%BB%A7%E6%89%BF%E6%96%B9%E5%BC%8F/