An in-depth discussion of JavaScript constructors

This article brings you an in-depth discussion of the JavaScript constructor. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

We have an appointment today to discuss the javascript constructor today. Thank you for coming as scheduled

We discussed the constructor function constructor yesterday and came to a conclusion

constructor is a property on the prototype object, which points to the constructor of this prototype by default

This conclusion seems to be very useful in our daily work. It is of no use, so is the constructor really of no use?

Use constructors to construct reusable objects

Functions in JS can be either constructors or called as ordinary functions. When using new to create an object, the corresponding function It is a constructor, and when called through an object, it is a normal function.

In our daily work, we often need to create an object, and we mostly use object direct quantities to create directly. For example, the code is as follows

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

If it is just a single object, the properties and methods of the object will basically not change. This is completely fine. However, if your object has many instances, or involves inheritance or constructor parameter passing, pay attention to the code comments

//创建了一个构造函数
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 and taste the above code, this way the scalability will be better, you can create N instances and realize code reuse

Classic case

About the constructor structure of js Function, there is a very classic 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

Pay attention to this line of code

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

Why should it be corrected? It’s not that constructor is a property on the prototype object. It points to the constructor of this prototype by default ?
Let’s comment out this line of 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’m as smart as you, I believe you have already When the problem is

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

, the prototype points to a new object, and the constructor of this new object points to Person.

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

We said earlier that the new Person('Beijin') object does not have a prototype, and only functions have prototypes; Father.prototype.constructor will follow the prototype chain of new Person('Beijin') Search for the constructor below. If new Person('Beijin') does not have a constructor, go to its __proto__ to find it, because (new Person('Beijin'))._proto_ === Person.prototype and Person. prototype.constructor == function Person(), so Father.prototype.constructor == Person.prototype.constructor //function Person() when we var one = new Father(25), one.constructor = Father.prototype.constructor , so one.constructor points to function Person(), so it must be corrected, otherwise the prototype chain will be messed up

The above is the detailed content of An in-depth discussion of JavaScript constructors. For more information, please follow other related articles on the PHP Chinese website!