JavaScript 상속 방법에 대한 자세한 설명

6가지 주요 상속 방법이 있습니다.

1. 프로토타입 체인 상속에는 객체 공유 문제가 있습니다.

2. 호출 적용 방법을 사용하여 생성자 상속이 실현됩니다. 함수 재사용성 문제 인스턴스화할 때마다 상위 클래스가 재실행되고 상위 클래스의 메소드가 반복적으로 정의됩니다

3. 조합 모드(프로토타입 체인 + 생성자) 생성자 상속 속성, 프로토타입 체인 상속 방법: 객체 공유 문제 해결 , 그러나 속성 상속이 두 번 나타납니다

4. 프로토타입 메소드는 공백 빈 함수를 사용합니다

5. 기생 메소드는 프로토타입 메소드에 추가 메소드를 추가합니다

6. 조합 방식 (속성 상속이 두 번 나타나는 문제 해결)

1. 프로토타입 체인 방식

하위 클래스가 상위 클래스를 상속할 때 하위 클래스의 프로토타입을 해당 클래스의 인스턴스 객체를 가리킵니다. 부모 수업. 하위 클래스가 인스턴스화되면 하위 클래스의 모든 인스턴스는 상위 클래스 인스턴스의 속성과 메서드를 공유합니다(p라고 가정). p에 참조 속성이 있으면 하위 클래스의 인스턴스가 참조를 수정할 수 있습니다. type.property로 인해 다른 인스턴스의 해당 속성도 수정됩니다.

//原型链方式
function A(){
    this.name = 'lc';
    this.stus = ['a','b','c'];
}
A.prototype.introduce = function (){
    alert(this.name);
}
 
function B(){}
B.prototype = new A();
 
var s1 = new B();
var s2 = new B();
console.log(s1.stus);  //['a','b','c']  
s1.stus.push('d');     //改变s1上的属性，会影响s2上的该属性
console.log(s2.stus);  // ['a','b','c','d']

다음과 같이 변경해도 영향을 받지 않습니다.

//原型链方式
function A(){
    this.name = 'lc';
    this.stus = ['a','b','c'];
}
A.prototype.introduce = function (){
    alert(this.name);
}
 
function B(){}
B.prototype = new A();
 
var s1 = new B();
var s2 = new B();
 
s1.stus = ['d'];   //在s1上增加了属性，  就近原则，不在查找原型链上的同名属性
console.log(s1.stus);  //['d']
console.log(s2.stus);  // ['a','b','c']

2. 생성자 모드에서의 상속

공유된 생성자와 메서드는 모두 내부적으로 정의되어 있으므로 응답 함수의 재사용성은 논의할 수 없습니다.

//构造函数方式继承
function A(name){
    this.name = name;
    this.type = 'parent';
    this.introduce = function (){ alert(this.name);}
}
A.prototype.sayhi = function (){
    alert(this.type);
}
function B(name,age){
    A.call(this,name);  //使用call方法 实现继承 但是父类中的方法重复定义 无复用性
    this.age = age;
    this.introduce = function (){ alert(this.name+this.age);}
}
 
var b = new B('lc',25);
b.introduce(); //lc25
b.sayhi();  //parent

3. 혼합 방법(프로토타입 방법 + 생성자 방법)

생성자를 사용하여 속성을 상속하고 프로토타입 체인 상속 방법

그러나 약간의 단점이 있습니다. 프로토타입 체인 상속을 사용하면 속성이 실제로 상속되고 반복됩니다.

function A(name){
    this.name = name;
    this.type = 'parent';
}
A.prototype.sayhi = function (){
    alert(this.type);
}
function B(name,age){
    A.call(this,name);
    this.age = age;
    this.introduce = function (){ alert(this.name+this.age);}
}
B.prototype = new A();

4. 프로토타입 상속

은 상속 후 객체를 반환하기 위해 중간 빈 함수를 사용합니다.

function extend(parent){
    function F(){}
    F.prototype = parent;
    return new F();
}

5. 기생 상속 프로토타입을 기반으로 객체에 속성 메서드를 추가합니다

function extend(parent){
    function F(){}
    F.prototype = parent;
    return new F();
}
 
function createObj(p){  
    var clone = extend(p);
    clone.name = 'hello';    
    clone.say = function (){}
    return clone;
}

6. 기생 결합 상속

상속 메서드에서 , 더 이상 상위 유형의 생성자를 인스턴스화하지 않고, InheritPrototype 메소드를 사용하십시오. 중간 빈 함수를 사용하고, 이 빈 함수가 상위 클래스 프로토타입을 상속하도록 한 다음, 이 빈 함수를 인스턴스화하십시오(상위 클래스 프로토타입 메소드의 모든 속성을 상속함). . 이 인스턴스화된 빈 객체를 서브클래스의 프로토타입으로 가리키기만 하면 됩니다.

부모 클래스의 생성자를 인스턴스화하지 마세요.

/* 寄生组合式继承 */
function inheritPrototype(subType, superType) {
  // var obj= extend(superType.prototype);
  function F(){}
  F.prototype = superType.prototype;
  var obj= new F();
 
  //obj.constructor = subType;
  subType.prototype = obj;    //不可将subType的prototype直接指向superType，否则的话，对子类prototype的修改会反应到父类上，  引用型变量
  subType.prototype.constructor = subType;
}

객체 가장: 생성자를 사용하여 클래스를 선언하고, 클래스 메서드가 다른 생성자를 가리키고(생성자 자체가 메서드 함수이기 때문에) 상속을 구현합니다.

function A(){
    this.name = {name1:'hello'};
    this.say = function (){ console.log(this.name);}
}
function B(){
    this.method = A;
    this.method();
    delete this.method;
}
 var bObj = new B();