Home Web Front-end JS Tutorial What exactly is Prototype in Javascript_javascript tips

What exactly is Prototype in Javascript_javascript tips

May 16, 2016 pm 03:15 PM

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
}
}
Copy after login

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";
Copy after login

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()
Copy after login

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

var test={};
uw3c.call(test);
Copy after login

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(); 
Copy after login

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"; 
Copy after login

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 
Copy after login

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(); 
Copy after login

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); 
Copy after login

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(); 
Copy after login

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")
}
}
} 
Copy after login

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(); 
Copy after login

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.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Replace String Characters in JavaScript Replace String Characters in JavaScript Mar 11, 2025 am 12:07 AM

Replace String Characters in JavaScript

Custom Google Search API Setup Tutorial Custom Google Search API Setup Tutorial Mar 04, 2025 am 01:06 AM

Custom Google Search API Setup Tutorial

Example Colors JSON File Example Colors JSON File Mar 03, 2025 am 12:35 AM

Example Colors JSON File

8 Stunning jQuery Page Layout Plugins 8 Stunning jQuery Page Layout Plugins Mar 06, 2025 am 12:48 AM

8 Stunning jQuery Page Layout Plugins

10 jQuery Syntax Highlighters 10 jQuery Syntax Highlighters Mar 02, 2025 am 12:32 AM

10 jQuery Syntax Highlighters

Build Your Own AJAX Web Applications Build Your Own AJAX Web Applications Mar 09, 2025 am 12:11 AM

Build Your Own AJAX Web Applications

What is 'this' in JavaScript? What is 'this' in JavaScript? Mar 04, 2025 am 01:15 AM

What is 'this' in JavaScript?

10  JavaScript & jQuery MVC Tutorials 10 JavaScript & jQuery MVC Tutorials Mar 02, 2025 am 01:16 AM

10 JavaScript & jQuery MVC Tutorials

See all articles