What exactly is Prototype in Javascript_javascript tips

Javascript is also an object-oriented language, but it is a prototype-based language rather than a class-based language. In Javascript, there doesn't seem to be much difference between classes and objects.

What is prototype:

The object defined by function has a prototype attribute, and the prototype attribute points to a prototype object. Note that the prototype attribute and the prototype object are two different things, so pay attention to the difference. There is another constructor attribute in the prototype object. This constructor attribute also points to a constructor object, and this constructor object is exactly the function itself. Isn’t it very convoluted? Expressed in pseudo code as follows:

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

Don’t understand yet? Take a look at the picture:

The role of prototype:

What exactly does this prototype do? Look at the example below:

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

It’s strange, obviously the name attribute is not set for test, but why is there a value?

This is the contribution of prototype. The name object in the prototype attribute in uw3c is inherited into the attribute of the object test after uw3c is created by the new constructor. Read next:

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

Why is the value of alert not “js”? The process is roughly as follows:

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

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

The second step is to set the built-in prototype object of the object (test) to the prototype object referenced by the prototype attribute of the constructor (that is, uw3c).

The third step is to call the constructor (i.e. uw3c) using the object (test) as this parameter to complete initialization work such as member setting.

A new term appeared in the second step, which is the built-in prototype object. Note that this new term is not the same thing as the prototype object. To distinguish it, I call it inobj, and inobj points to the prototype object of the function uw3c. Any properties or functions that appear in the prototype object of uw3c can be used directly in the test object. This is prototype inheritance in JS.

Usually, create an object like this:

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

Above, use the new keyword to create an object instance through an object (functions are also special objects).

In class-based languages, attributes or fields are usually defined in advance in the class, 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.
For the fields added later, what if you want all instances of animal to have them?

--使用Prototype
function animal(){}
animal.prototype.color= "green";
var cat = new animal();
var dog = new animal();
console.log(cat.color);//green
console.log(dog.color);//green 

Not only fields can be added through Prototype, but also methods can be added.

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

It turns out that through the prototype attribute, you can also change the behavior of the object after creating it.
For example, you can add a method to a special object called an 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 properties or methods for objects through prototype, you can also define class properties or methods through the object's constructor.

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

The above approach can also allow all animal instances to share all fields and methods. And another advantage is that you can use local variables of the class 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 define the fields and behaviors of a class through the constructor combined with the 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 an object or class after creating the object, and these fields or methods added through the prototype attribute are shared by all object instances.