jQuery를 사용하여 다중 상속을 구현하는 방법

Question

더글러스 크록 포드 (Douglas Crockford)에 따르면 http://javascript.crockford.com/prototypal.html과 같은 것을 사용할 수 있습니다. (조금 조정할 수 있습니다.)하지만 jQuery 방식에 관심이 있습니다. $ .extend를 사용하는 것이 좋은 연습일까요? , 내가 모든 메소드를 호출 할 수 있습니다, 속성을 그래서

  var A = function(){ } 
      A.prototype = { 
       name : "A", 
       cl : function(){ 
        alert(this.name); 
       } 
      } 
      var D = function(){} 
      D.prototype = { 
       say : function(){ 
        alert("D"); 
       } 
      } 

      var B = function(){} //inherits from A 
      B.prototype = $.extend(new A(), { 
       name : "B" 
      }); 

      var C = function(){} //inherits from B and D 
      C.prototype = $.extend(new B(), new D(), { 
       name : "C" 
      }); 


      var o = new C(); 

      alert((o instanceof B) && (o instanceof A) && (o instanceof C)); //is instance of A, B and C 
      alert(o instanceof D); //but is not instance of D 

... I는 O의 인스턴스의 경우는 테스트 할 때 A가, B, C 및 D 문제가 온다에서 :

나는 4 개 수업을 디? 이 문제를 어떻게 극복 할 수 있습니까?

Answer 1

그것을 $ .extend

$.extend이 싱글에 유용 사용하여 좋은 연습을하지만 프로토 타입을 위해 적합하지 않습니다.

Object.create (또는 Crockford의 polyfill)을 사용하면 이와 같은 클래스를 쉽게 만들 수 있습니다. 나는 단순히 속성을 처리하기 위해 $.extend을 사용하고있다. 그리고 그것들을 기본 값과 모듈 패턴으로 제공하여 잘 관리한다.

// Helper that makes inheritance work using 'Object.create' 
Function.prototype.inherits = function(parent) { 
    this.prototype = Object.create(parent.prototype); 
}; 

var Person = (function PersonClass() { 

    var _defaults = { 
    name: 'unnamed', 
    age: 0 
    }; 

    function Person(props) { 
    $.extend(this, props, _defaults); 
    } 

    Person.prototype = { 
    say: function() { 
     return 'My name is '+ this.name; 
    } 
    }; 

    return Person; 

}()); 

var Student = (function StudentClass(_super) { 

    Student.inherits(_super); // inherit prototype 

    var _defaults = { 
    grade: 'untested' 
    }; 

    function Student(props) { 
    _super.apply(this, arguments); // call parent class 
    $.extend(this, props, _defaults); 
    } 

    Student.prototype.say = function() { 
    return 'My grade is '+ this.grade; 
    }; 

    return Student; 

}(Person)); 

var james = new Student({ name: 'James', grade: 5 }); 

console.log(james instanceof Student); // true 
console.log(james instanceof Person); // true 

Answer 2

객체가 하나의 프로토 타입이있다, 그래서 당신은 하나의 호출로 두 다른 유형의 인스턴스를 만들 수 없습니다 : 희망이 도움이됩니다.

$.extend(new B(), new D(), ...은 B의 인스턴스 인 개체를 만듭니다. 그런 다음 D의 모든 속성이 새로 만든 개체에 복사됩니다. 그러나 객체는 여전히 B의 인스턴스가됩니다.

사용 $.extend은 그다지 좋지도 좋지도 않습니다. 하지만 jQuery에 바인딩되어 있으므로 코드 재사용 성이 떨어집니다. 그리고 $.extend이 같은 이름으로 속성을 덮어 쓰는 사실을 알고 있어야합니다.이 이름은 원하는 것일 수도 있고 아닐 수도 있습니다.