JavaScript의 다양한 상속 조합 소개(코드 예제)

이 기사의 내용은 JavaScript의 다양한 조합 상속에 대한 소개입니다(코드 예제). 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 조합 상속: 유사 고전적 상속이라고도 하며, 프로토타입 체인과 차용된 생성자 기술을 결합한 상속 방법을 말합니다.

예를 살펴보겠습니다.

function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    alert(this.name);
  }
  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }
 
  //继承方法
  SubType.prototype = new SuperType();
  SubType.prototype.sayAge = function() {
    alert(this.age);
  }
 
  var instance1 = new SubType("Nicholas", 29);
  instance1.colors.push("black");
  alert(instance1.colors); //red,blue,green,black
  instance1.sayName(); //Nicholas
  instance1.sayAge(); //29
 
  var instance2 = new SubType("Greg", 27);
  alert(instance2.colors); //red,blue,green
  instance2.sayName(); //Greg
  instance2.sayAge(); //27

결합 상속은 프로토타입 체인과 빌린 생성자의 단점을 피하고 장점을 결합합니다.

2. 프로토타입 상속

생성자를 미리 정의하지 않고도 상속을 구현할 수 있습니다. 그 본질은 주어진 객체의 얕은 복사본을 수행하는 것입니다. 복사된 사본은 추가로 변형될 수도 있습니다.

function object(o) {
    function F(){};
    F.prototype = o;
    return new F;
  }
 
  var person = {
   name: "Nicholas",
   friends: ["Shelby", "Court", "Van"]
  };
 
  var antherPerson = object(person);
  antherPerson.name = "Greg";
  antherPerson.friends.push("Rob");
 
  var antherPerson = object(person);
  antherPerson.name = "Linda";
  antherPerson.friends.push("Barbie");
 
  alert(person.friends); //Shelby,Court,Van,Rob,Barbie

3. 기생 상속

은 또한 객체나 일부 정보를 기반으로 객체를 생성한 다음 객체를 강화하고 최종적으로 객체를 반환합니다. 상위 유형 생성자에 대한 다중 호출로 인해 결합 상속 패턴으로 인해 발생하는 비효율성 문제를 해결하려면 이 패턴을 결합 상속과 함께 사용할 수 있습니다.

function object(o) {
    function F(){};
    F.prototype = o;
    return new F;
  }
  function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function() {
      alert("Hi");
    };
    return clone;
  }
 
  var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
  };
 
  var anotherPerson = createAnother(person);
  anotherPerson.sayHi();

4. 기생 결합 상속

은 기생 상속과 결합 상속의 장점을 결합하며 기본 유형 상속을 구현하는 가장 효과적인 방법입니다.

//继承原型
  function extend(subType, superType) {
    function F(){};
    F.prototype = superType.prototype;
 
    var prototype = new F;
    prototype.constructor = subType;
    subType.prototype = prototype;
  }
 
  //超类方法
  function SuperType(name) {
    this.name = name;
    this.colors = ["red", "blue", "green"];
  }
  SuperType.prototype.sayName = function() {
    return this.name;
  }
 
  //子类方法
  function SubType(name, age) {
    SuperType.call(this, name);
    this.age = age;
  }
 
  //继承超类的原型
  extend(SubType, SuperType);
 
  //子类方法
  SubType.prototype.sayAge = function() {
    return this.age;
  }
 
  var instance1 = new SubType("Shelby");
  var instance2 = new SubType("Court", 28);
 
  instance1.colors.push('black');
 
  alert(instance1.colors); //red,blue,green,black
  alert(instance2.colors); //red,blue,green
 
  alert(instance1 instanceof SubType); //true
  alert(instance1 instanceof SuperType); //true

이 예제의 높은 효율성은 SuperType 생성자를 한 번만 호출하므로 SubType.prototype에 불필요한 중복 속성이 생성되지 않는다는 것입니다. 동시에 프로토타입 체인은 변경되지 않은 상태로 유지될 수 있습니다. 따라서,instanceof와 isPrototypeOf()는 여전히 정상적으로 사용될 수 있습니다. 개발자는 일반적으로 기생 구성 상속이 참조 유형에 대한 가장 이상적인 상속 패러다임이라고 믿습니다.

위 내용은 JavaScript의 다양한 상속 조합 소개(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!