JavaScript의 ES5 상속 상세 정보

ES6의 계승이 있은 후에 ES5의 계승도 무대에서 물러났고 실제 개발에서도 쓸모가 없지만 면접에서 쓸모가 있다.
일단 ES6의 계승을 보겠습니다.

class Father{

      constructor(a){
        console.log(a);
      }
      play(){
        console.log("aaa");
      }
      static run(){
        console.log("static");
      }
    }
    class Son extends Father{
      constructor(){
        super();
      }
    }
    var s=new Son();
    s.play();
    Father.run()
    Son.run();

ES6에서 extends와 슈퍼 키워드만 사용하면 부류의 방법과 속성을 계승할 수 있습니다(정적 포함)
ES5에는 이런 키워드가 없어요.
ES5의 상속
ES5의 5가지 상속 방식:

대상 사칭 상속

원형 체인 계승

조합 계승

원형식 계승

기생식 계승(중요)

대상 사칭 상속

function Father(_r){
      this.r=_r;
      console.log("aa");
      console.log(this.r);
    }
    Father.a=3;
    Father.run=function(){
      console.log(Box.a);
    }
function Son(){
      Father.call(this,3)；// this ， 
    }
    var b=new Son();//"aa",3
    b.run();//TypeError

call이나 apply를 통해this의 방향을 바꾸고 부류의 구조 함수를 실행합니다
단점: 초류의 구조 함수만 계승할 수 있고 원형 체인의 방법을 계승할 수 없다
원형 체인 계승

function Father(){
  console.log("aa");
    }
Father.prototype.b=10;
    Father.prototype.play=function(){
      console.log(this.b);
    }
    Son.prototype=new Father();
    function Son(){
    }
    var b=new Son();
    b.play();//10

부류의 실례화 대상을 부류의 원형에 부여한 계승
단점: 하위 클래스의 기존 속성과 방법을 덮어쓰고 상위 클래스의 속성과 방법만 실행할 수 있으며 상위 클래스의 구조 함수는 실행할 수 없습니다
조합 상속
앞의 두 가지 계승(사칭, 원형 체인)은 각각 특징이 있는데 이 두 가지 계승을 조합하여 조합 계승이라고 부른다

function Father(_r){
      this.r=_r;
      console.log("aa");
    }
function Son(_r){
      Father.call(this,_r);// ， this 
    }
Son.prototype=new Father(3);// 
 var c=new Son(10);

원형 체인을 사용하여 부류의 속성과 방법을 계승하고, 대상을 사용하여 부류의 구조 함수를 계승했다고 사칭한다
보기에는 괜찮은 것 같지만 완벽한 계승 방식은 아니다.
단점: 하위 클래스의 기존 속성과 방법을 덮어씁니다. 원형 체인 계승은 상위 클래스를 실례화하기 때문에 상위 구조 함수를 한 번 앞당겨 실행했습니다.하위 클래스의 실례화 대상이 된 후에 실제로는 두 차례의 상위 클래스의 구조 함수를 실행했다.
사용 장면: 하위 클래스는 원래 속성과 방법이 없고 상위 구조 함수는 내용이 없습니다.
원형식 계승
두 차례의 부류 구조 함수를 실행하기 위해 중개를 사용했는데, 계승할 때 부류의 구조 함수를 실행하지 않는다

function Father(_a){
      this.a=_a
    }
    Father.prototype.play=function(){
      console.log("aaa");
    }
      function Agent(){

      }
      Agent.prototype=Father.prototype;
      function Son(){

      }
      Son.prototype=new Agent();
      var o=new Son();
      o.play();//aaa

Agent의 클래스를 중개로 사용하여 부류의 원형을 복제한 후 실례화 계승을 하면 부류의 구조 함수를 실행하지 않습니다.
단점: 구조 함수 집행 문제를 두 번 해결했지만 이 방법으로 계승한 후 구조 함수는 한 번도 집행하지 않는다.
기생식 상속(완벽한 상속)
extend 방법을 봉인했는데, 이 방법은 두 개의 매개 변수를 전송하는데, 각각 부류와 자류이다

function extend(subClass, supClass) {
     function Agent() {}
     Agent.prototype = supClass.prototype;
     var o = subClass.prototype;
     subClass.prototype = new Agent();
     if (Object.assign) {
      Object.assign(subClass.prototype, o);
     } else {
      if (Object.getOwnPropertyNames) {
       var names = Object.getOwnPropertyNames(o);
       for (var i = 0; i < names.length; i++) {
        var desc = Object.getOwnPropertyDescriptor(names[i]);
        Object.defineProperty(subClass.prototype, names[i], desc);
       }
      } else {
       for (var prop in o) {
        subClass.prototype[prop] = o[prop];
       }
      }
     }
     subClass.prototype.constructor = subClass; // 
     if (supClass.prototype.constructor === Object) {
      supClass.prototype.constructor = supClass; // 
     }
     //  ， 
     subClass.prototype.superClass = supClass;
    }
 // 
    function Father(_r) {
     this.r = _r;
     console.log("Father");
    }
    Father.prototype.play = function () {
     console.log("play game");
    };
    function Ball(_r) {
     this.superClass.call(this, _r);
    }
    var s = new Son(10);//Father
    s.play();//play game

extend 메서드, Object 사용.assgin、Object.getOwnPropertyNames、Object.getOwnPropertyDescriptor、Object.defineProperty 호환 문제가 있어 판단했습니다.
이 방법은 앞의 네 가지 장점을 모아 ES5의 완벽한 계승을 실현했다.
맺음말:
ES5는 ES6의 계승에 비해 번거로움이 너무 많고 앞으로의 실제 업무도 사용하지 않을 것이다.
하지만 면접을 볼 때 면접관이 물어볼 수도 있다. 많이 배우는 것이 틀림없다.
다음은 JavaScript의 ES5 상속에 대한 상세한 내용입니다. JavaScript ES5의 상속에 대한 더 많은 자료는 저희 다른 관련 글을 참고하세요!