JavaScript 상속에 대한 자세한 설명

JS 상속에 대해 정식으로 논의하기 전에 먼저 저의 업무 경험에 대해 말씀드리겠습니다. 백엔드와 달리 대부분의 상용 응용 프로그램 시나리오의 경우 프런트 엔드에 대한 요구 사항으로 인해 코드 추적이 어려운 경우가 많습니다(즉, 추상화가 어렵고 코드를 한 번 작성하기 어렵고 여러 응용 프로그램에 적용 가능함을 의미) 시나리오). 제가 잘 알고 있는 응용 시나리오에 대해 이야기해 보겠습니다. 예를 들어 신용 등급 모듈에서 한 페이지는 선 차트를 사용하여 사용자의 최근 소비 수준을 표시하고 다른 페이지는 선 차트를 사용하여 사용자의 신용 등급 수준을 표시합니다. 요구 사항이 매우 비슷한 것 같죠? Java로 얻으면 분명히 "꺾은선형 차트 인터페이스"를 추상화하겠지만, 이를 js로 통합하는 것은 어렵습니다. 우선 두 데이터 소스가 다르기 때문에 Ajax 요청 코드도 매우 다릅니다. 둘째, UI가 그림에 그림자, 그라데이션 등의 그래픽 효과를 무작위로 추가하면 두 그림의 구현이 완전히 달라집니다. 뿐만 아니라 디자인 수준을 보여주기 위해 서로 다른 두 가지 프런트 엔드 구현을 강제로 통합하면 일반 사람들이 직면하지 않는 유지 관리의 악몽에 직면하게 될 것입니다. 따라서 대부분의 프런트엔드 엔지니어는 JavaScript 상속을 이해할 필요가 없으며 이 언어의 이 기능은 매우 널리 사용되는 애플리케이션 시나리오가 없습니다. 물론 일부 기본 프레임워크를 작성하는 경우 이러한 내용을 확실히 알 수 있습니다. 기능이 아주 좋습니다. 다음 내용은 중상급 난이도입니다. "JavaScript를 사용한 고급 프로그래밍"에서 상속을 약간 다시 작성한 다음, 시간이 나면 상속 모델의 최적화된 버전을 추가하겠습니다. 관심없으시면 그냥 가셔도 됩니다~

（1）조합상속(조합 상속):

하위 클래스 생성자에서 Super.call(this)을 통해 상위 클래스의 속성을 추가하고 하위 클래스를 생성자의 프로토타입상속을 구현하기 위해 상위 클래스의 인스턴스가 됩니다. 단점은 중복된 부모 클래스 속성이 하위 클래스 생성자에 저장되고(부모 클래스의 인스턴스이고 하위 클래스 인스턴스가 동일한 속성을 덮어쓰기 때문) 부모 클래스 생성자가 두 번 호출된다는 것입니다. 또한 상속 체인에 하나 이상의 레이어가 추가됩니다.

(function combineInherit(){
   function SuperType(){
      this.super="super";
   }
   SuperType.prototype.saySuper=function(){

   }

   function SubType(){
      SuperType.call(this,arguments);
      this.sub="sub";
   }
   SubType.prototype=new SuperType();
   SubType.prototype.constructor=SubType;
   SubType.prototype.saySub=function(){

   }

   var sub1=new SubType();
   sub1.saySub();
})();

상속 체인:

(2) 기생 조합 상속 하위 클래스 생성자의 프로토타입은 상위 클래스의 인스턴스가 되지 않고

프로토타입

을 직접 참조합니다. 하위 클래스 생성자를 구성하는 prototype, 가장 간단한 방법은 다른 두 개가 직접 동등하다는 것입니다. 이는 상위 클래스의 호출을 줄일 뿐만 아니라 생성자이지만 하위 클래스 prototype<의 존재도 줄입니다. 🎜>의 중복 속성도 상속 체인의 한 계층을 줄입니다(이 경우 instanceof 사용). 여전히 동일한 하위 클래스와 상위 클래스에 속해 있는지 판단합니다.

(function parasiticCombineInherit(){
   function inheritPrototype(subType,superType){
      subType.prototype=superType.prototype;
      subType.prototype.constructor=subType;
   }

   function SuperType(){
      this.super="super";
   }
   SuperType.prototype.saySuper=function(){

   }

   function SubType(){
      SuperType.call(this,arguments);
      this.sub="sub";
   }
   inheritPrototype(SubType,SuperType);
   SubType.prototype.saySub=function(){

   }

   var sub=new SubType();
   console.log(sub instanceof SuperType);
})();

상속 체인:

(

3

)jQUery

클래식 상속

(function classicInherit(){
   var initializing=false,
      superPattern=/xyz/.test(function() {xyz;}) ? /\b_super\b/ : /.*/;
   Object.subClass=function(properties){
      var _super=this.prototype;
      initializing=true;
      var proto=new this();
      initializing=false;

      for(var name in properties){
         proto[name]=typeof properties[name]=="function"&&
                  typeof _super[name]=="function"&&
                  superPattern.test(properties[name])?
               (function(name,fn){
                  return function(){
                     var tmp=this._super;
                     this._super=_super[name];
                     var ret=fn.apply(this,arguments);
                     this._super=tmp;
                     return ret;
                  };
               })(name,properties[name]):properties[name];
      }

      function Class(){
         //init方法需要通过外部自定义传入
         if(!initializing&&this.init){
            this.init.apply(this,arguments);
         }
      }
      Class.prototype=proto;
      Class.constructor=Class;
      Class.subClass=arguments.callee;

      return Class;
   }
})();

위 내용은 JavaScript 상속에 대한 자세한 설명입니다. , PHP 중국어 웹사이트(www.php.cn)를 팔로우하세요!