Js Prototype property explanation and common methods

  • 2020-03-30 02:52:43
  • OfStack

Function: prototype

Each constructor has a property called a prototype. This property is very useful: declare generic variables or functions for a particular class.

The definition of the prototype

You don't need to explicitly declare a prototype property because it exists in every constructor. Here's an example:

Example PT1


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 properties you add to prototype will become the general properties of the objects you create using this constructor.

For example, I have a data type below Fish, and I want all Fish to have these properties: livesIn="water" and price=20; To implement this, I can add those properties to the constructor Fish's prototype.

Example PT2


function Fish(name, color)
{
this.name=name;
this.color=color;
}
Fish.prototype.livesIn="water";
Fish.prototype.price=20;

Now let's make some fish:


var fish1=new Fish("mackarel", "gray");
var fish2=new Fish("goldfish", "orange");
var fish3=new Fish("salmon", "white");

Let's look at some of the properties of fish:


for (int i=1; i<=3; i++)
{
var fish=eval_r("fish"+i);   //I just get the pointer to the fish
alert(fish.name+","+fish.color+","+fish.livesIn+","+fish.price);
}

The output should be:


"mackarel, gray, water, 20"
"goldfish, orange, water, 20"
"salmon, white water, 20"

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

You can also use prototype to add common functions to all objects. This has the advantage that you don't need to create and initialize the function every time you construct an object. To explain this, let's revisit Example DT9 and rewrite it using prototype:

Use prototype to add functions to an object

Example the PT3


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:


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

And verify it:


alert(boss1.getSalary());   //The output of 200000
alert(boss2.getSalary());   //The output of 100000
alert(boss3.getSalary());   //The output of 150000

Here's a diagram of how prototype works. Each instance of this object (boss1, boss2, boss3) has an internal property called dependproto__ that points to the prototype property of its constructor (Employee). When you execute getSalary or addSalary, the object will find and execute the code in its s/s s. Note this: there is no replication of the code (compare this to the diagram for Example DT8).

< img border = 0 style = "TEXT - ALIGN: center; MARGIN: 0 px auto; DISPLAY: block "SRC =" / / files.jb51.net/file_images/article/201405/201458175613698.gif ">


Related articles: