Heim > Web-Frontend > js-Tutorial > Einführung in die Analyse von js-Prototypobjekten und Prototypketten (mit Code)

Einführung in die Analyse von js-Prototypobjekten und Prototypketten (mit Code)

不言
Freigeben: 2018-08-15 15:51:52
Original
1536 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Einführung in das Wissen über js-Prototypen und Prototypenketten (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Deklarieren Sie zuerst einen Konstruktor

function People(name,age){
        this.name = name;
        this.age = age;
    }
Nach dem Login kopieren

Schreiben Sie die Klassenmethode in das Konstruktor-Prototypobjekt, und die Unterklasse kann die Methode nicht mehr erben, indem sie den Konstruktor der übergeordneten Klasse aufruft (Attribute können weiterhin vererbt werden)

// 给People的原型添加方法
People.prototype.speak = function(){
        console.log("我是"+this.name);
    }
// 创建子类继承People
function Man(name,age,huzi){
        People.call(this,name,age);
        this.huzi = huzi;
    }
Nach dem Login kopieren

(Die Eigenschaften und Methoden von People und Man können ausgegeben und aufgerufen werden, der Testcode wird nicht im Code angezeigt)

Wie lässt man Man zu diesem Zeitpunkt die Methoden von People erben?

Man.prototype = People.prototype;
    Man.prototype.smoke = function(){
        console.log("抽烟");
    }
Nach dem Login kopieren

Das ist jedoch nicht richtig! Sie können den Prototyp der Unterklasse nicht direkt auf den Prototyp der übergeordneten Klasse verweisen. Dies führt dazu, dass die beiden Konstruktoren einen Prototyp teilen und auf die darin enthaltenen Methoden zugegriffen werden kann durch Objekte der übergeordneten Klasse und der Unterklasse, und die richtige Situation sollte sein, dass die Unterklasse auf die Methoden der übergeordneten Klasse zugreifen kann, die übergeordnete Klasse jedoch nicht auf die Methoden der Unterklasse zugreifen kann

Der Prototyp von a Das js-Objekt ist auch ein Objekt, daher hat der js-Prototyp auch einen Prototyp.

Wenn Sie auf eine Objektmethode zugreifen, greifen Sie direkt darauf zu, wenn sie im Objekt vorhanden ist. Wenn sie nicht vorhanden ist, suchen Sie im Prototyp von Das Objekt. Wenn es nicht vorhanden ist, suchen Sie im Prototyp des Prototyps. Wenn es nicht vorhanden ist, suchen Sie weiter, bis Sie den Objektspeicherort

Objekt finden (Konstruktor), der Prototyp des Objekts dieser Klasse hat keinen Prototyp

Der Prototyp des js-Objekts und die aus dem Prototyp des js-Prototyps bestehende Kettenstruktur werden als js-Prototypkette bezeichnet

Wenn eine Unterklasse die Methoden der übergeordneten Klasse erben möchte, muss sie den Prototyp (__proto__) des Prototypobjekts des Konstruktors der Unterklasse auf den Prototyp des Konstruktors der übergeordneten Klasse setzen

so geschrieben:

Man.prototype.__proto__ = People.prototype;
Nach dem Login kopieren

Sie können es auf diese Weise schreiben, aber es gibt eine bessere Standardschreibweise, die vom Beamten vorgegeben wird (das ist nicht falsch)

// Object.create用于指定原型创建一个对象(空对象)
    Man.prototype = Object.create(People.prototype);
    Man.prototype.smoke = function(){
        console.log("抽烟");
    }
Nach dem Login kopieren

Wenn eine Unterklasse eine übergeordnete Klasse erbt Klasse kann nicht nur neue Methoden erweitern, sondern auch neu schreiben. Wenn die überschriebene Methode mithilfe des Unterklassenobjekts für die vorhandenen Methoden der übergeordneten Klasse aufgerufen wird, wird die eigene Methode der Unterklasse ausgeführt

Man.prototype.speak = function(){
        console.log("我是男性");
    }
Nach dem Login kopieren

Verwandte Empfehlungen:

JS Core Series: Light Apropos Prototypobjekte und Prototypketten

Scope-Kette und Prototypkette in js und Prototypenvererbung

js Detaillierte Erklärung des Prototyps und der Prototypenkette

Javascript objektorientiert lernen Javascript-Prototyp und Prototypenkette verstehen_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonEinführung in die Analyse von js-Prototypobjekten und Prototypketten (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
js
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage