What is Prototype in Javascript? _ javascript tips-js tutorial

Javascript is also an object-oriented language, but it is a Prototype-based language, rather than a class-based language. Next, I will introduce you to the knowledge about Prototype in Javascript. If you are interested, refer to Javascript as an object-oriented language, but it is a Prototype-based language, instead of class-based languages. In Javascript, classes and objects do not look much different.

What is prototype:

The function-defined object has a prototype attribute, which points to another prototype object. Note that the prototype attribute is different from the prototype object. Another constructor attribute exists in the prototype object. This constructor attribute also points to a constructor object, and this constructor object is exactly the function itself. Is it difficult? The pseudocode is as follows:

var function{prototype:prototype{constructor:constructor == function}}

Still not clear? See the figure below:

Role of prototype:

What is the role of this prototype? See the following example:

function jb51(){}jb51.prototype.name = "a";var test = new jb51();alert(test.name)//"a";

The name attribute is not set for test, but why is there a value?

This is prototype's credit. The name object in the prototype attribute in uw3c is inherited to the property of the test object after uw3c is constructed by the new constructor. Next, let's see:

var name = "js";function jb51(name){alert(this.name);//"css"}jb51.prototype.name = "css";var test = new jb51();test()

Why is the alert value not "js "? This process is roughly as follows:

var test={};uw3c.call(test);

The first step is to create a new object (test ).

Step 2: Set the prototype object built into this object (test) to the prototype object referenced by the construcloudcli (uw3c) prototype attribute.

The third step is to use this object (test) as the this parameter to call the constructor (uw3c) and complete initialization such as member settings.

In the second step, a new term is a built-in prototype object. Note that this new term is not the same as the prototype object. to distinguish it from inobj, inobj points to the prototype object of the uw3c function. Any attribute or function that appears in the prototype object of uw3c can be directly used in the test object, which is inherited by the prototype in JS.

Generally, an object is created as follows:

function person(name){this.sayHi = function(){alert('hi ' + this.name);}this.name = name;}var p = new person("dan");p.sayHi(); 

The new keyword is used to create an object instance through an object (the function is also a special object.

In a class-based language, attributes or fields are usually defined in the class in advance, but in Javascript, fields can be added to the class after the object is created.

function animal(){}var cat = new animal();cat.color = "green"; 

Above, the color field only belongs to the current cat instance.
What if I want all the animal instances to own the field that is appended?

-- Use Prototypefunction animal () {} animal. prototype. color = "green"; var cat = new animal (); var dog = new animal (); console. log (cat. color); // greenconsole. log (dog. color); // green

You can use Prototype to add fields and methods.

function animal(){}animal.prototype.color= "green";var cat = new animal();var dog = new animal();console.log(cat.color);//greenconsole.log(dog.color);//greenanimal.prototype.run = funciton(){console.log("run");}dog.run(); 

The original prototype attribute allows you to change the behavior of an object after the object is created.
For example, you can add a method for the special object of the array.

Array.prototype.remove = function(elem){var index = this.indexof(elem);if(index >= 0){this.splice(index, 1);}}var arr = [1, 2, 3] ;arr.remove(2); 

In addition to defining attributes or methods for objects through prototype, you can also define attributes or methods of classes through object constructors.

function animal(){this.color = "green";this.run = function(){console.log("run");}}var mouse = new animal();mouse.run(); 

The above practice also allows all animal instances to share all fields and methods. Another advantage is that local variables of the class can be used in the constructor.

function animal(){var runAlready = false;this.color = "green";this.run = funciton(){if(!runAlreadh){console.log("start running");} else {console.log("already running")}}} 

In fact, a more practical approach is to use constructor to define fields and behaviors of a class through prototype.

function animal(){var runAlready = false;this.run = function(){if(!runAlready){console.log('i am running');} else {console.log("i am already running");}}}animal.prototype.color = '';animal.prototype.hide = funciton(){console.log("");}var horse = new animal();horse.run();horse.hide(); 

Prototype allows us to change the behavior of objects or classes after the object is created, and all the object instances added through the prototype attribute are shared.