Function: Prototype
Each constructor has a property called prototype (prototype, no longer translated below, use its original text). This property is very useful: declare common variables or functions for a specific class.
Definition of prototype
You don't need to explicitly declare a prototype property, because it exists in every constructor. You can take a look at the following example:
Example PT1
The code copy is as follows:
function Test()
{
}
alert(Test.prototype); // Output "Object"
Add properties to prototype
As you can see above, prototype is an object, so you can add properties to it. The attribute you add to the prototype will become a common attribute for the object created using this constructor.
For example, I have a data type Fish below, and I want all fish to have these properties: livesIn="water" and price=20; to achieve this, I can add those properties to the prototype of the constructor Fish.
Example PT2
The code copy is as follows:
function Fish(name, color)
{
this.name=name;
this.color=color;
}
Fish.prototype.livesIn="water";
Fish.prototype.price=20;
Next let's make a few fish:
The code copy is as follows:
var fish1=new Fish("mackarel", "gray");
var fish2=new Fish("goldfish", "orange");
var fish3=new Fish("salmon", "white");
Let’s take a look at what properties are fish:
The code copy is as follows:
for (int i=1; i<=3; i++)
{
var fish=eval_r("fish"+i); // I just get the pointer to this fish
alert(fish.name+","+fish.color+","+fish.livesIn+","+fish.price);
}
The output should be:
The code copy is as follows:
"mackarel, gray, water, 20"
"goldfish, orange, water, 20"
"salmon, white water, 20"
You see that all fish have attributes livesIn and price, and we don't even specifically declare these attributes for each different fish. At this time, when an object is created, the constructor will assign its attribute prototype to the internal attribute of the new object __proto__. This __proto__ is used by this object to find its properties.
You can also use prototype to add common functions to all objects. This has one advantage: you don't need to create and initialize this function every time you construct an object. To explain this, let's look at Example DT9 again and rewrite it using prototype:
Use prototype to add functions to objects
Example PT3
The code copy is as follows:
function Employee(name, salary)
{
this.name=name;
this.salary=salary;
}
Employee.prototype.getSalary=function getSalaryFunction()
{
return this.salary;
}
Employee.prototype.addSalary=function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}
We can create objects as we normally do:
The code copy is as follows:
var boss1=new Employee("Joan", 200000);
var boss2=new Employee("Kim", 100000);
var boss3=new Employee("Sam", 150000);
And verify it:
The code copy is as follows:
alert(boss1.getSalary()); // Output 200000
alert(boss2.getSalary()); // Output 100000
alert(boss3.getSalary()); // Output 150000
Here is a diagram to illustrate how prototype works. Each instance of this object (boss1, boss2, boss3) has an internal property called __proto__, which points to the property prototype of its constructor (Employee). When you execute getSalary or addSalary, this object will find and execute this code in its __proto__. Note this: there is no copy of the code here (compare it with the Example DT8 chart).