JavaScript 상속 연구 노트 [초보자를 위한 필독]_javascript 기술-JS 튜토리얼-php.cn

객체 지향 언어(JS는 객체 기반)이므로 상속을 구현하려면 JavaScript가 필수적입니다. 그러나 클래스라는 개념이 없기 때문에 실제 객체 지향 프로그래밍처럼 클래스를 통한 상속을 구현하지는 않습니다. 그러나 상속은 다른 방법으로도 이루어질 수 있습니다. 상속을 구현하는 방법에는 여러 가지가 있습니다. 다음은 그 중 몇 가지입니다.

1. 프로토타입 체인 상속

function Person() {  //被继承的函数叫做超类型（父类，基类）
      this.name='mumu';
      this.age='18';
    }
    
    Person.prototype.name='susu';//当属性名相同时需就近原则，先在实例里面查找，没找到再到原型里找
       
    function Worker(){ //继承的函数叫做子类型（子类，派生类）
      this.job='student';
    }

    Worker.prototype=new Person();//通过原型链继承，超类型实例化后的对象实例，赋值给子类的原型属性
    var p2=new Worker(); 

    console.log(p2.name);
    console.log(p2 instanceof Object);//ture 所有的构造函数都继承自Object

로그인 후 복사

위 상속 구현의 핵심은 다음과 같습니다. Worker.prototype=new Person(); Worker의 프로토타입을 Person의 인스턴스로 변환하고 프로토타입 체인을 통해 상속합니다.

참고: 프로토타입 체인을 사용하여 상속을 구현할 때 객체 리터럴을 사용하여 프로토타입 메서드를 생성할 수 없습니다. 이렇게 하면 관계가 끊어지고 프로토타입 체인이 다시 작성되기 때문입니다.

프로토타입 체인 상속 문제:

1. 참조 공유 문제가 있습니다. 여전히 동일한 공간을 공유하며 하위 클래스가 상위 클래스에 영향을 미칩니다.

function Person() {  
      this.bodys=['eye','foot'];
    }
    
    function Worker(){ 
    }

    Worker.prototype=new Person();
    var p1=new Worker();
    p1.bodys.push('hand');
    var p2=new Worker(); 
    console.log(p1.bodys);
    console.log(p2.bodys);

로그인 후 복사

2. 하위 유형의 인스턴스를 생성할 때 상위 유형의 생성자에 매개변수를 전달할 수 없습니다.

그렇다면 프로토타입 체인의 두 가지 문제를 어떻게 해결할 수 있을까요? 그럼 계속해서 아래의 상속방법을 살펴보세요~

2. 생성자 상속 차용(객체 가장, 가짜 객체 또는 클래식 상속이라고도 함)

function Person(name,age){
    this.name=name;
    this.age=age;
    this.bodys=['eye','foot'];
  }

  Person.prototype.showName=function(){
    console.log(this.name);
  }

  function Worker(name,age,job){
    Person.call(this,name,age);
    this.job=job;//子类添加属性
  }

  var p1=new Worker('mumu','18','学生'); 
  p1.bodys.push('hand') ;
  var p2=new Worker();

  console.log(p1.name);
  console.log(p2.bodys);
  console.log(p1.showName());

로그인 후 복사

위의 빌린 생성자 사용 원칙에 대한 간략한 분석: Person.call(this,name,age); 이 코드는 상위 생성자를 호출하고 상위 속성을 상속하며 호출 메서드를 사용하여 Person 생성자를 호출하여 변경합니다. 함수의 실행 시간입니다. 여기서는 새로운 생성자 변장 메소드의 Worker 객체입니다. Worker를 위의 Person에 전달합니다.

참조 유형이 생성자에 배치되면 공유되지 않으므로 p2는 영향을 받지 않습니다.

여기서는 프로토타입 체인이 매개변수를 전달할 수 없고 참조 유형이 공유되는 문제를 해결하기 위해 생성자 상속 방법을 사용합니다.

팁: call() 및 apply() 메서드는 함수 실행 범위를 변경할 수 있습니다. 즉, 함수에서 이 메서드가 가리키는 내용을 변경할 수 있습니다.

call()과 apply()는 모두 두 개의 매개변수를 허용합니다. 첫 번째는 함수가 실행되는 범위이고 다른 하나는 전달된 매개변수입니다.

호출과 적용의 차이는 매개변수의 차이입니다.
호출 중인 매개변수는 하나씩 열거해야 합니다.
적용의 매개변수는 배열 또는 인수 객체여야 합니다

그러면 질문은: p1.showName()의 결과가 왜 잘못되었나요? ----빌린 생성자 상속 방식은 생성자의 속성과 메서드만 상속할 수 있기 때문입니다. 생성자 차용과 관련된 문제도 여기에서 발견됩니다.

참고: 메서드는 생성자에 배치되므로 인스턴스화할 때마다 메모리 공간이 할당되어 리소스 낭비가 발생합니다. 따라서 일반적으로 메서드는 프로토타입에, 속성은 생성자에 넣습니다. .

생성자 상속 문제 차용:

빌린 생성자는 생성자에 있는 속성과 메서드만 상속할 수 있기 때문에 슈퍼 유형의 프로토타입에 정의된 메서드는 하위 클래스에 보이지 않으므로 프로토타입이 없는 것과 같습니다. 결과적으로 모든 메소드는 생성자에서만 정의할 수 있으므로 함수 재사용이 없습니다.

그렇다면 시공사 차용으로 인해 발생하는 문제를 어떻게 해결할 수 있을까요? 그러면 다음 상속 방식을 살펴보아야 합니다

3. 조합 상속(유사 고전 상속)

function Person(name,age){
    this.name=name;
    this.age=age;
  }

  Person.prototype.showName=function(){
    console.log(this.name);
  }

  function Worker(name,age,job){
    Person.call(this,name,age);//借用构造函数
    this.job=job;
  }
  
  Worker.prototype=new Person();//原型链继承
  var p1=new Worker('mumu','18','学生'); 

  console.log(p1.age);
  p1.showName();

로그인 후 복사

결합 상속: 프로토타입 체인을 빌린 생성자와 결합합니다.

아이디어: 프로토타입 체인을 사용하여 프로토타입의 속성 및 메서드 상속을 구현하고 생성자를 사용하여 인스턴스 속성 상속을 구현합니다

위의 예 Person.call(this,name,age)는 생성자를 빌려 속성을 상속합니다

Worker.prototype=new Person(); 프로토타입 체인은 메소드를 상속하여 두 가지의 단점을 피하고 장점을 통합하며 가장 일반적으로 사용되는 상속 패턴이 됩니다.

결합 상속 문제:

상위 유형 생성자는 하위 유형 프로토타입을 생성할 때 한 번, 하위 유형의 생성자 내부에서 한 번, 총 두 번 호출됩니다.

이 문제를 해결하려면 기생 결합 상속을 사용해야 합니다.

4. 프로토타입 상속

function object(proto) {
    function F() {}
    F.prototype = proto;
    return new F();
  }

  var person = {
    name: 'mumu',
    friends: ['xiaxia', 'susu']
  };

  var anotherPerson = object(person);
  anotherPerson.friends.push('wen');
  var yetAnotherPerson = object(person);
  anotherPerson.friends.push('tian');
  console.log(person.friends);//["xiaxia", "susu", "wen", "tian"]
console.log(anotherPerson.__proto__)//Object {name: "mumu", friends: Array[4]}

로그인 후 복사

간단한 분석: 함수 객체(proto)는 임시 전송 함수입니다. 내부 매개변수 proto는 전달될 객체를 나타냅니다. F() 생성자는 전달된 객체 F를 저장하는 데 사용되는 임시로 생성된 객체입니다. 프로토타입 = proto; F 생성자의 프로토타입 객체에 객체 인스턴스를 할당하고 마지막으로 전달된 객체의 객체 인스턴스를 반환합니다. 프로토타입 상속은 여전히 참조 유형의 속성을 공유합니다.

5. 기생 상속

//临时中转函数  
function object(proto) {
    function F() {}
    F.prototype = proto;
    return new F();
  }

  //寄生函数
  function create(proto){
    var f=object(proto);
    f.love=function(){
      return this.name;
    }
    return f;
  }

  var person = {
    name: 'mumu',
    friends: ['xiaxia', 'susu']
  };

  var anotherPerson = create(person);
  console.log(anotherPerson.love());寄生组合式继承

로그인 후 복사

6. 기생 결합 상속

function object(proto) {
    function F() {}
    F.prototype = proto;
    return new F();
  }

  //寄生函数
  function create(Person,Worker){
    var f=object(Person.prototype);//创建对象
    f.constructor=Worker;//调整原型构造指针，增强对象
    Worker.prototype=f;//指定对象
  }
  
  function Person(name,age){
    this.name=name;
    this.age=age;
  }
  Person.prototype.showName=function(){
    console.log(this.name);
  }
  function Worker(name,age,job){
    Person.call(this,name,age);
    this.job=job;
  }
  
  create(Person,Worker);//寄生组合式继承
  var p1=new Person('mumu','18','学生');
p1.showName();

로그인 후 복사

이 방법은 현재 상속 방법 중 가장 완벽하고 이상적이기도 합니다.

위 JavaScript 상속 학습 노트 [초보자가 꼭 읽어야 할 내용]은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home을 지원해 주시길 바랍니다.