javascript_기본 지식의 여러 상속 방법 소개

1. 프로토타입 체인 상속: 생성자, 프로토타입 및 인스턴스 간의 관계: 각 생성자는 프로토타입 객체를 가지며 프로토타입 객체에는 생성자에 대한 포인터와 인스턴스가 포함됩니다. 프로토타입 객체에 대한 내부 포인터를 포함합니다. 프로토타입과 인스턴스 간의 관계를 확인하려면 instanceof를 사용하세요.

프로토타입 체인 상속의 단점: 프로토타입을 문자 그대로 재정의하면 관계가 끊어지고 참조 유형의 프로토타입을 사용하며 하위 유형이 상위 유형에 매개변수를 전달할 수 없습니다.

function Parent(){
    this.name='mike';
  }
  function Child(){
    this.age=12;
  }
  //儿子继承父亲（原型链）
  Child.prototype=new Parent();//Child继承Parent，通过原型形成链条
  var test=new Child();
  console.log(test.age);
  console.log(test.name);//得到被继承的属性
  //孙子继续原型链继承儿子
  function Brother(){
    this.weight=60;
  }
  Brother.prototype=new Child();//继承原型链继承
  var brother=new Brother();
  console.log(brother.name);//继承了Parent和Child，弹出mike
  console.log(brother.age);//12

  console.log(brother instanceof Child);//ture
  console.log(brother instanceof Parent);//ture
  console.log(brother instanceof Object);//ture

2. 생성자가 상속을 구현합니다. 가짜 객체 또는 클래식 상속이라고도 합니다.
생성자 구현 상속의 단점: 차용 생성자는 프로토타입 체인 상속의 두 가지 문제를 해결하지만 프로토타입이 없으면 재사용이 불가능하므로 프로토타입 체인 + 차용 생성자 패턴이 필요합니다.

function Parent(age){
    this.name=['mike','jack','smith'];
    this.age=age;
  }
  function Child(age){
    Parent.call(this,age);//把this指向Parent,同时还可以传递参数
  }
  var test=new Child(21);
  console.log(test.age);//21
  console.log(test.name);

  test.name.push('bill');
  console.log(test.name);//mike,jack,smith,bill

3. 조합 상속: 프로토타입 체인을 사용하여 프로토타입 속성과 메서드를 상속하고 생성자를 빌려 인스턴스 속성을 상속합니다. 이러한 방식으로 함수 재사용은 프로토타입에 메서드를 정의하여 달성되며 각 구현에는 고유한 속성이 보장됩니다.

단점: 어떤 경우든 상위 유형 생성자는 하위 유형 프로토타입을 생성할 때 한 번, 하위 유형 프로토타입을 생성할 때 한 번, 하위 유형 생성자 내부에서 한 번, 총 두 번 호출됩니다.

function Parent(age){
    this.name=['mike','jack','smith'];
    this.age=age;
  }
  Parent.prototype.run=function(){
    return this.name+' are both '+this.age;
  }
  function Child(age){
    Parent.call(this,age);//给超类型传参，第二次调用
  }
  Child.prototype=new Parent();//原型链继承，第一次调用
  var test1=new Child(21);//写new Parent(21)也行
  console.log(test1.run());//mike,jack,smith are both 21

  var test2=new Child(22);
  console.log(test2.age);
  console.log(test1.age);
  console.log(test2.run());
  //这样可以使test1和test2分别拥有自己的属性age同时又可以有run方法

4. 프로토타입 상속: 프로토타입을 사용하면 사용자 정의 유형을 만들지 않고도 기존 개체를 기반으로 새 개체를 만들 수 있습니다. 이를 위해서는 다른 객체의 기반이 될 수 있는 객체가 있어야 합니다.

function object(o){
    function F(){};
    F.prototype=o;
    return new F();
  }
  var person={
    name:'nicho',
    friends:['shell','jim','lucy']
  }
  var anotherPerson = object(person);
  anotherPerson.name = 'Greg';
  anotherPerson.friends.push('Rob');
  console.log(anotherPerson.friends);//["shell", "jim", "lucy", "Rob"]

  var yetAnotherPerson = object(person);
  yetAnotherPerson.name = 'Linda';
  yetAnotherPerson.friends.push('Barbie');
  console.log(yetAnotherPerson.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]

  console.log(person.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]

ECMAScript5는 새 객체의 프로토타입으로 사용되는 객체와 (선택 사항) 새 객체의 속성을 정의하는 객체라는 두 가지 매개변수를 허용하는 새로운 Object.create() 메서드를 통해 프로토타입 상속을 표준화합니다.

var person2={
    name:'nicho',
    friends:['shell','jim','lucy']
  };
  var anoP2=Object.create(person2);
  anoP2.name="Greg";
  anoP2.friends.push('Rob');
  console.log(anoP2.friends);//["shell", "jim", "lucy", "Rob"]

  var yetP2=Object.create(person2);
  yetP2.name="Linda";
  yetP2.friends.push('Barbie');
  console.log(yetP2.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]

  console.log(person2.friends);//["shell", "jim", "lucy", "Rob", "Barbie"]
  /*以这种方式指定的任何属性都会覆盖原型对象上的同名属性。*/
  var threeP=Object.create(person,{
    name:{value:'red'}
  });
  console.log(threeP.name);//red,如果threeP中无name则输出person2里的name值nicho

5. 기생 상속: 아이디어는 기생 생성자 및 팩토리 패턴과 유사합니다. 즉, 상속 프로세스를 캡슐화하는 데만 사용되는 함수를 생성하고, 함수는 어떤 방식으로든 내부적으로 사용되어 객체를 향상시키고 마침내 모든 작업을 수행한 것처럼 객체를 반환합니다.

function object(o){
    function F(){};
    F.prototype=o;
    return new F();
  };
  function createAnother(o){
    var cl=object(o);
    cl.sayHi=function(){
      console.log('hi');
    }
    return cl;
  };
  var person={
    name:'nick',
    friends:['shelby','court','van']
  }
  var anotherPerson=createAnother(person);
  anotherPerson.sayHi();//hi
  console.log(anotherPerson.name);//nick
  console.log(anotherPerson.friends);//["shelby", "court", "van"]

  /*这个例子中的代码基于 person 返回了一个新对象—— anotherPerson 。 新对象不仅具有 person
   的所有属性和方法，而且还有自己的 sayHi() 方法*/

기생 결합 상속: 상황에 관계없이 상위 유형 생성자는 하위 유형 프로토타입을 생성할 때 한 번, 하위 유형 프로토타입을 생성할 때 한 번, 하위 유형 함수를 생성할 때 한 번 호출되어 하위 유형이 종료됩니다. 하위 유형 생성자를 호출할 때 재정의해야 하는 상위 유형 객체의 모든 인스턴스 속성을 포함합니다. 따라서 기생 조합 상속의 출현.

6. 기생 결합 상속: 생성자를 빌려 속성을 상속하고, 프로토타입 체인의 혼합 형식을 통해 메서드를 상속합니다. 기본 개념: 하위 유형의 프로토타입을 지정하기 위해 상위 유형의 생성자를 호출할 필요가 없습니다. 기본적으로 기생 상속은 상위 유형의 프로토타입을 상속한 다음 그 결과를 하위 유형의 프로토타입에 할당하는 데 사용됩니다.

function SuperType(name){
    this.name=name;
    this.colors=['red','blue','green'];
  }
  SuperType.prototype.sayName=function(){
    console.log(this.name);
  }
  function SubType(name,age){
    SuperType.call(this,name);
    this.age=age;
  }
  function object(o){
    function F(){};
    F.prototype=o;
    return new F();
  };
  /*inheritPrototype此函数第一步是创建超类型原型的一个副本。第二步是为创建的副本添加constructor属性，
  * 从而弥补因重写原型而失去的默认的constructor属性，第三步将新创建的对象（副本）赋值给子类型的原型*/
  function inheritPrototype(subType,superType){
    var prototype=object(superType.prototype);//创建对象
    prototype.constructor=subType;//增强对象
    subType.prototype=prototype;//指定对象
  }
  inheritPrototype(SubType,SuperType);
  SubType.prototype.sayAge=function(){
    console.log(this.age);
  }

  var p=new SubType('xiaoli',24);
  console.log(p.sayName());
  console.log(p.sayAge());
  console.log(p.colors)

이 방법의 장점: 상위 클래스 SuperType 생성자는 한 번만 호출되므로 SubType.prototype에 불필요한 중복 속성이 생성되는 것을 방지합니다. 동시에 프로토타입 체인은 변경되지 않고 그대로 유지될 수 있으며, instanceof 및 isPrototypeOf()는 정상적으로 사용될 수 있습니다.

위의 여러 JavaScript 상속 방법에 대한 소개는 모두 편집자가 공유한 내용이므로 참고가 되기를 바라며, Script Home을 지원해 주시길 바랍니다.