Eine ausführliche Diskussion über JavaScript-Konstruktoren

Der Inhalt dieses Artikels ist eine ausführliche Diskussion über den JavaScript-Konstruktor. Ich hoffe, dass er für Freunde hilfreich ist.

Wir haben heute einen Termin, um den Javascript-Konstruktor zu besprechen. Vielen Dank, dass Sie wie geplant gekommen sind.

Wir haben gestern die Konstruktorfunktion besprochen und sind zu einem Ergebnis gekommen

Konstruktor ist ein Attribut für das Prototypobjekt, das standardmäßig auf den Konstruktor dieses Prototyps verweist

Diese Schlussfolgerung scheint in unserer täglichen Arbeit nützlich zu sein Es nützt nichts. Ist der Konstruktor also wirklich nutzlos?

Verwenden Sie Konstruktoren, um wiederverwendbare Objekte zu erstellen

Funktionen in JS können entweder Konstruktoren sein oder als normale Funktionen aufgerufen werden. Wenn Sie new zum Erstellen eines Objekts verwenden, ist die entsprechende Funktion ein Konstruktor und wenn sie aufgerufen wird Durch ein Objekt ist es eine normale Funktion.

In unserer täglichen Arbeit müssen wir oft ein Objekt erstellen, und wir verwenden zum direkten Erstellen meist Objekt-Direktmengen. Der Code lautet beispielsweise wie folgt

var person = {
    name:'postbird',
    address:'earth',
    sayHello:function(){console.log('Hello,I am ' + this.name);}
};

Wenn es sich nur um ein einzelnes Objekt handelt, ändern sich die Eigenschaften und Methoden des Objekts grundsätzlich nicht. Wenn Ihr Objekt jedoch viele Instanzen hat oder Vererbungs- oder Konstruktorparameter beinhaltet, achten Sie auf die Codekommentare

//创建了一个构造函数
function Person(name,address){
    this.name = name;
    this.address = address;
}
//为构造函数的原型对象添加一个方法sayHello
Person.prototype.sayHello = function(){
    console.log('Hi I am ' + this.name);
}
//通过构造函数Person实例化一个p1，并传参
var p1 = new Person('postbird','earth');
//通过构造函数Person实例化一个p2，并传参
var p2 = new Person('ptbird','month');
console.log(p1);//{name: "postbird", address: "earth"}
console.log(p2);//{name: "ptbird", address: "month"}
// p1和p2 继承了Person的sayHello方法
p1.sayHello()//Hi I am ptbird
p2.sayHello()//Hi I am postbird

Geduld und Geschmack des obigen Codes, auf diese Weise wird die Skalierbarkeit besser, Sie können N Instanzen erstellen und die Wiederverwendung von Code realisieren

Klassischer Fall

Über die Konstruktorstruktur der js-Funktion , es gibt eine sehr klassische Demo

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //true
var one = new father(25);
console.log(one.constructor===Father) // true

Achten Sie auf diese Codezeile

Father.prototype.constructor = Father;//修正

Warum sollte sie korrigiert werden? Bedeutet das nicht, dass constructor ein Attribut für das Prototypobjekt ist und standardmäßig auf den Konstruktor dieses Prototyps verweist ?
Lassen Sie uns diese Codezeile auskommentieren

function Person(area){
  this.type = 'person';
  this.area = area;
}
Person.prototype.sayArea = function(){
  console.log(this.area);
}
var Father = function(age){
  this.age = age;
} 
Father.prototype = new Person('Beijin');
console.log(Person.prototype.constructor===Person) //true
console.log(Father.prototype.constructor===Person); //true
//Father.prototype.constructor = Father;//修正
console.log(Father.prototype.constructor===Father); //false
var one = new Father(25);
console.log(one.constructor===Person) // true

So klug Sie auch sind, ich glaube, Sie haben es bereits getan. Wenn das Problem gelöst wird

Father.prototype = new Person('Beijin');

, zeigt der Prototyp auf ein neues Objekt und der Konstruktor dieses neuen Objekts zeigt auf Person.

console.log((new Person('Beijin')).__proto__ === Person.prototype) //true

Wir haben zuvor gesagt, dass das neue Person('Beijin')-Objekt keinen Prototyp hat und nur Funktionen über Prototypen verfügen. Father.prototype.constructor wird der Prototypenkette von new Person('Beijin') folgen. Suchen Sie unten nach dem Konstruktor. Wenn new Person('Beijin') keinen Konstruktor hat, gehen Sie zu seinem __proto__, um ihn zu finden, denn (new Person('Beijin'))._proto_ === Person.prototype und Person.prototype.constructor == function Person(), also Father.prototype.constructor == Person.prototype.constructor //function Person() wenn wir var one = new Father(25), one.constructor = Father.prototype.constructor, also one.constructor zeigt auf die Funktion Person(), also muss es korrigiert werden, sonst wird die Prototypenkette chaotisch

Das obige ist der detaillierte Inhalt vonEine ausführliche Diskussion über JavaScript-Konstruktoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!