Detailed explanation of how JavaScript uses the prototype pattern to create object instances

Prototype pattern

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
 alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true

In the example, you need to type Person.prototype every time you add an attribute and method. In order to reduce unnecessary typing and to better visually encapsulate the functionality of the prototype, it is more common to override the entire prototype object with an object literal that contains all properties and methods, as shown in the following example.

function Person(){
}
Person.prototype = {
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};

In the above code, we set Person.prototype equal to a new object created as an object literal. The end result is the same, with one exception: the constructor property no longer points to a Person. As introduced before, every time a function is created, its prototype object will be created at the same time, and this object will also automatically obtain the constructor attribute. The syntax we use here essentially completely rewrites the default prototype object, so the constructor property becomes the constructor property of the new object (pointing to the Object constructor) and no longer points to the Person function. At this time, although the instanceof operator can still return the correct result, the type of the object cannot be determined through the constructor, as shown below.

var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true

Here, using the instanceof operator to test Object and Person still returns true, but the constructor property is equal to Object and not equal to Person. If the value of the constructor is really important, you can intentionally set it back to the appropriate value as shown below.

function Person(){
}
 Person.prototype = {
 constructor : Person,
 name : "Nicholas",
 age : 29,
 job: "Software Engineer",
 sayName : function () {
 alert(this.name);
 }
};

One thing to note is that the pointer in the instance only points to the prototype, not the constructor.

Problems with prototype objects: The prototype pattern is not without its shortcomings. First, it omits the need to pass initialization parameters to the constructor, so that all instances will get the same property values ​​by default. Although this will cause some inconvenience to some extent, it is not the biggest problem of the prototype. The biggest problem with the prototype pattern is caused by its shared nature.

function Person(){
}
Person.prototype = {
 constructor: Person,
 name : "Nicholas",
 age : 29,
 job : "Software Engineer",
 friends : ["Shelby", "Court"],
 sayName : function () {
 alert(this.name);
 }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true

The above is the detailed content of Detailed explanation of how JavaScript uses the prototype pattern to create object instances. For more information, please follow other related articles on the PHP Chinese website!