Une discussion approfondie sur les constructeurs JavaScript

Le contenu de cet article est une discussion approfondie sur le constructeur JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Nous avons rendez-vous aujourd'hui pour discuter du constructeur javascript aujourd'hui. Merci d'être venu comme prévu

Nous avons discuté de la fonction constructeur hier et sommes parvenus à une conclusion

constructor est un attribut sur l'objet prototype, qui pointe par défaut vers le constructeur de ce prototype

Cette conclusion semble être très utile dans notre quotidien Cela ne sert à rien, alors le constructeur ne sert-il vraiment à rien ?

Utiliser des constructeurs pour construire des objets réutilisables

Les fonctions dans JS peuvent être soit des constructeurs, soit appelées comme des fonctions ordinaires. Lors de l'utilisation de new pour créer un objet, la fonction correspondante est un constructeur, et lorsqu'elle est appelée. à travers un objet, c'est une fonction normale.

Dans notre travail quotidien, nous avons souvent besoin de créer un objet, et nous utilisons principalement des quantités directes d'objets pour créer directement. Par exemple, le code est le suivant

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

.

S'il ne s'agit que d'un seul objet, les propriétés et les méthodes de l'objet ne changeront fondamentalement pas. Cependant, si votre objet a de nombreuses instances, ou implique un héritage ou le passage de paramètres de constructeur, faites attention au code. commentaires.

//创建了一个构造函数
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

Patience et goûtez au code ci-dessus, l'évolutivité sera meilleure, vous pouvez créer N instances et réaliser la réutilisation du code

Cas classique

À propos du constructeur js. constructeur, il existe une démo très classique

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

Faites attention à cette ligne de code

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

Pourquoi faut-il la corriger ? Ce n'est pas que le constructeur soit un attribut sur l'objet prototype. Il pointe vers le constructeur de ce prototype par défaut ?
Commentons cette ligne de code

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

I' Je suis aussi intelligent que vous, je crois que vous avez posé le problème

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

À cette étape, le prototype pointe vers un nouvel objet, et le constructeur de ce nouvel objet pointe vers Person.

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

Nous avons dit plus tôt que le nouvel objet Person('Beijin') n'a pas de prototype, et que seules les fonctions ont des prototypes Father.prototype.constructor suivra le prototype de new Person('Beijin') ) La chaîne descend pour trouver le constructeur. Si new Person('Beijin') n'a pas de constructeur, elle ira à son __proto__ pour le trouver, car (new Person('Beijin'))._proto_ === Person.prototype Person.prototype.constructor == function Person(), donc Father.prototype.constructor == Person.prototype.constructor //function Person() quand on var one = new Father(25) , one.constructor = Father.prototype .constructor, donc one.constructor pointe vers la fonction Person(), il faut donc le corriger, sinon la chaîne de prototypes sera foirée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!