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?
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
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!