Prototype attribute interpretation of JS and its common methods

Functions: Prototypes

Each constructor has a property called prototype (prototype). This property is useful: Declare a common variable or function for a particular class.

Definition of prototype

You do not need to explicitly declare a prototype property because it exists in every constructor. You can look at the following example:

Example PT1

CODE:
function Test ()
{
}
alert (Test.prototype); Output "Object"

Adding attributes to Prototype

As you can see above, prototype is an object, so you have the ability to add properties to it. The property you add to prototype will be the common property of the object created using this constructor.

For example, I have a data type below fish, and I want all the fish to have these properties: livesin= "Water" and price=20; To achieve this, I can add those attributes to the prototype of the constructor fish.

Example PT2

CODE:
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:

CODE:
var fish1=new Fish ("Mackarel", "Gray");
var fish2=new Fish ("Goldfish", "orange");
var fish3=new Fish ("Salmon", "white");

Let's look at the properties of the fish:

CODE:
for (int i=1; i<=3; i++)
{
var fish=eval_r ("Fish" +i); I'm just getting a pointer to this fish.
Alert (fish.name+ "," +fish.color+ "," +fish.livesin+ "," +fish.price ");
}

The output should be:

CODE:
"Mackarel, Gray, water, 20"
"Goldfish, orange, water, 20"
"Salmon, white water, 20"

You see all the fish have attributes livesin and price, we don't even specifically declare these attributes for each different fish. This is because when an object is created, the constructor assigns its property prototype to the internal property __proto__ of the new object. This __proto__ is used by this object to find its properties.

You can also add a common function to all objects by prototype. Here's a good thing: you don't need to create and initialize this function every time you construct an object. To explain this, let's take a look back at example DT9 and rewrite it with prototype:

Add a function to an object with prototype

Example PT3

CODE:

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 usual:

CODE:
var boss1=new Employee ("Joan", 200000);
var boss2=new Employee ("Kim", 100000);
var boss3=new Employee ("Sam", 150000);

and verify it:

CODE:
Alert (Boss1.getsalary ()); Output 200000
Alert (Boss2.getsalary ()); Output 100000
Alert (Boss3.getsalary ()); Output 150000

Here is a diagram illustrating how prototype works. Each instance of this object (Boss1, Boss2, BOSS3) has an intrinsic property called __proto__, which points to the property prototype of its constructor (Employee). When you execute getsalary or addsalary, the object will find and execute this code in its __proto__. Note this: There is no copy of the code (in contrast to the Example DT8 chart).

Prototype attribute interpretation of JS and its common methods