Mehrere Details zur Vererbung der js-Prototypkette

1. So implementieren Sie nur den erbenden Prototyp

Schauen Sie sich zunächst den folgenden Code an:

function A(){
 this.name="李可可";
 this.age=21;
}
A.prototype.eat=function(){ console.log("I can eat") }
function B(){}
B.prototype=new A;//B继承了A
var cc=new B;
cc.eat();//I can eat
cc.name;//"李可可"

Was wir sehen können, ist, dass A alle Attribute von B erbt, wenn wir nur Was soll ich tun, wenn ich möchte, dass B das A.prototype-Attribut erbt und nicht den Namen und das Alter auf A und viele nutzlose Dinge haben möchte?

Einige Leute haben vielleicht gesagt, würde es nicht reichen, einfach so:

B.prototype=A.prototype;
var cc=new B;
cc.eat();//I can eat
cc.name;//undefined

Hey, es scheint perfekt zu sein? Fahren wir fort mit

B.prototype.fuck=function(){console.log("I fuck you!")}
var cc=new B,dd=new A;
cc.fuck();//I fuck you!
dd.fuck();//I fuck you!
//哦买噶的，怎么两个人都学会骂人了
//当子类B的prototype发生变化时也会影响到A的prototype(当然反过来也是)，原因也很简单，因为我们让A.prototype指向了B的prototype

Lösung:

Erstellen Sie eine Funktion, erstellen Sie darin ein leeres Objekt und lassen Sie den Prototyp des leeren Objekts auf das zu vererbende übergeordnete Objekt zeigen, und schließlich Geben Sie das Objekt zurück. Ein Beispiel für Um dieses Problem zu lösen, können wir direkt eine statische Methode create() verwenden, die mit Object geliefert wird:

Object.createPro=function(pro){
  function F(){}
  F.prototype=pro;
  return new F;
}

Während der Vererbung können wir B auch einige eindeutige Attribute wie folgt hinzufügen:

Js-Code

function A(){  
 this.name="李可可";  
 this.age=21;  
}  
A.prototype.eat=function(){ console.log("I can eat") }  
function B(){}  
B.prototype=Object.createPro(A.prototype);//B只继承了A的prototype属性  
  
var cc=new B;  
cc.eat();//I can eat  
cc.name;//  
B.prototype.fuck=function(){console.log("I fuck you!")}//我们现在改变B的prototype  
var dd=new A;  
dd.fuck();//报错TypeError  
//说明B.prototype的改变并没有影响到A的任何属性

Der zweite Parameter ist Object.defineproperties() sehr ähnlich, wo Sie mehrere Eigenschaften konfigurieren und einige spezielle Berechtigungs-Tags vergeben können

function A(){
 this.name="李可可";
 this.age=21;
}
A.prototype.eat=function(){ console.log("I can eat") }
function B(){}
B.prototype=Object.create(A.prototype);//只会继承A的prototype

Natürlich Sie möchten A über diese Methode erben. Alle Attribute sind ebenfalls verfügbar, wie die folgenden:

Es ist zu beachten, dass die Kompatibilität der Object.create-Methode nur in Browsern verfügbar ist, die mit ES5 kompatibel sind , oder wir können eine selbst simulieren, genau wie oben die Object.createPro-Methode

function A(){  
 this.name="李可可";  
 this.age=21;  
}  
A.prototype.eat=function(){ console.log("I can eat") }  
function B(){}  
B.prototype=Object.create(A.prototype,{   
 p: { value: 42, writable: false, enumerable: true }//添加一个属性p,并且是不可写的，但可枚举  
});  
var pp=new B;  
pp.p;//42  
pp.name;//undefined  
pp.eat();//I can eat  
pp.p=666;  
pp.p;//42 (不可写)

2. Bezüglich des Problems des Konstruktorzeigens und der Aufzählbarkeit des Konstruktors

In der ersten Frage haben wir das Objekt verwendet. Erstellen Sie eine Methode, um die Verbindung zwischen verschiedenen Klassen zu implementieren Vererbung, dabei gibt es jedoch ein Problem wie folgt:

B.prototype=Object.create(new A);

Wie kann das obige Problem gelöst werden?

Js-Code

Natürlich wollen wir nicht, dass das der Fall ist, also was sollen wir tun?

function A(){
 this.name="李可可";
 this.age=21;
}
A.prototype.eat=function(){ console.log("I can eat") }
function B(){}
B.prototype=Object.create(A.prototype);
var cc=new B;
cc.constructor;//A　　（这里我们期望的值是B,而实际上变成了A）

Js-Code

Ähnliche Probleme treten auf, wenn Objektliterale zum Umschreiben des Prototyps einer Klasse verwendet werden, wie der folgende

//我们最容易想到的是手动设置constructor属性，像下面这样  
B.prototype.constructor=B;

Js-Code

Natürlich gibt es noch eine andere Möglichkeit, es nicht neu zu schreiben, sondern einfach Attribute hinzuzufügen, wie folgt:

//使用Object.defineProperty或Object.defineProperties方法设置constructor的enumerable为false  
Object.defineProperty(B.prototype,"constructor",{  
 value:B,  
 enumerable:false//不可枚举  
});  
cc.constructor;//B  
B.prototype.propertyIsEnumerable("constructor");//false

Js-Code

function C(){}  
C.prototype={}  
var pp=new C;  
pp.constructor;//Object  (我们期望的是C)  
C.prototype.constructor=C;  
C.prototype.propertyIsEnumerable("constructor");//true　（同样是可枚举的）  
//这里也可以使用上面的方法解决