Heim > Artikel > Web-Frontend > js-Prototypkette und Vererbungsanalyse (erste Erfahrung)_Javascript-Kenntnisse
Definieren Sie zunächst ein Objekt obj. Wir können die Methode getPrototypeOf in ES5 verwenden. Wir bestimmen, ob der Prototyp von obj gleich ist . Beweisen Sie, ob es einen Prototyp von obj gibt. Die Antwort gibt true zurück, also existiert er. Dann definieren wir eine Funktion foo(). Jede Funktion hat ihr Prototypobjekt, das heißt den Prototyp der Funktion. Wir können dem Prototyp der Funktion beliebige Attribute hinzufügen, und dann kann ein instanziiertes Objekt seine Attribute über new (unten) teilen ) Zwei Beispiele werden im Detail vorgestellt.
function foo(){} foo.prototype.z = 3; var obj = new foo(); obj.x=1; obj.y=2; obj.x //1 obj.y //2 obj.z //3 typeof obj.toString; //function obj.valueOf(); // foo {x: 1, y: 2, z: 3} obj.hasOwnProperty('z'); //false
Hier zeigt der Prototyp von obj (_proto_) auf das Prototypattribut der foo-Funktion, der Prototyp von foo.prototype zeigt auf Object.prototype und das Ende der Prototypkette ist null. Verwenden Sie hasOwnProperty Überprüfen Sie, ob sich das Z-Attribut auf obj befindet. Es wird „false“ angezeigt. Dann gibt es kein Z-Attribut auf obj. Durch Durchsuchen der Prototypenkette wird jedoch festgestellt, dass es sich auf foo.prototype befindet, also obj.z=3 und für Im ersten Beispiel sind obj.valueOf() und toString beide Object .prototype, sodass jedes Objekt diese beiden Attribute hat, da der Prototyp jedes Objekts natürlich Object.prototype ist, mit Ausnahme des folgenden Sonderfalls:
<span>var</span> obj2 = Object.create(<span>null</span><span>);obj2.valueOf(); </span><span>//</span><span>undefined</span>
Object.create() erstellt ein leeres Objekt und der Prototyp dieses Objekts zeigt auf den Parameter. Das folgende umfassende Beispiel zeigt Ihnen, wie Sie eine Klasse implementieren, um eine andere Klasse zu erben
//声明一个构造函数Person function Person(name,age){ this.name = name; this.age = age; } Person.prototype.hi = function (){ console.log('Hi,my name is ' + this.name +',my age is '+this.age); }; Person.prototype.LEGS_NUM=2; Person.prototype.ARMS_NUM=2; Person.prototype.walk = function (){ console.log(this.name+' is walking !'); }; function Student(name,age,classNum){ Person.call(this,name,age); this.classNum = classNum; } //创建一个空对象 Student.prototype = Object.create(Person.prototype); //constructor指定创建一个对象的函数。 Student.prototype.constructor = Student; Student.prototype.hi = function (){ console.log('Hi,my name is ' + this.name +',my age is '+this.age+' and my class is '+this.classNum); }; Student.prototype.learns = function (sub){ console.log(this.name+' is learning '+sub); }; //实例化一个对象Bosn var Bosn = new Student('bosn',27,'Class 3'); Bosn.hi(); //Hi,my name is bosn,my age is 27 and my class is Class 3 Bosn.LEGS_NUM; //2 Bosn.walk(); //bosn is walking ! Bosn.learns('Math'); //bosn is learning Math
Dies der Konstruktoren Person und Student zeigt auf das instanziierte Objekt (Bosn), und der Prototyp dieses Objekts zeigt auf den Prototyp des Konstruktors.
Wir verwenden die Methode Object.create(), um ein leeres Objekt zu erstellen. Der Prototyp dieses Objekts ist Person.prototype. Der Vorteil dieser Schreibweise besteht darin, dass wir Studnet selbst erstellen können, ohne den Person.prototype zu beeinflussen Eigenschaft. Jedes Attribut von .prototype und kann die ursprünglichen Attribute von Person.prototype erben, da die Unterklasse Student die Basisklasse Person erbt. Wenn Sie Person.prototype = Student.prototype direkt schreiben, verweisen beide auf dasselbe Objekt. Beim Hinzufügen von Attributen zu Student.prototype werden dieselben Attribute zur Prototypenkette von Person hinzugefügt.
Für die Aufrufmethode im Konstruktor Student zeigt dieses Innere auf das instanziierte Objekt des neu erstellten Studenten, und die Vererbung wird durch Aufruf implementiert.
Student.prototype.constructor = Student, die Bedeutung dieses Satzes besteht darin, Student als die Funktion anzugeben, die das Student.prototype-Objekt erstellt. Wenn dieser Satz nicht geschrieben wird, ist die Funktion des Objekts immer noch Person.
Für die Vererbung gibt es drei Möglichkeiten, sie umzusetzen:
function Person(name,age){ this.name = name; this.age = age; } function Student(){ } Student.prototype = Person.prototype; //1 Student.prototype = Object.create(Person.prototype); //2 Student.prototype = new Person(); //3
Die obige js-Prototypkette und Vererbungsanalyse (erste Erfahrung) ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.