Instructions for using prototype in JavaScript_javascript skills

1. prototype
There is no concept of class in JavaScript, but overloading, polymorphism, and inheritance can indeed be implemented in JavaScript. In fact, these implementation methods can be explained by using references and variable scopes in JavaScript combined with prototype.

2. Simple example

Copy the code The code is as follows:

var Blog = function( name, url ){
this.name = name;
this.url = url;
};
Blog.prototype.jumpurl = '';
Blog.prototype.jump = function(){
window.location = this.jumpurl;
};
/*
* is equivalent to
Blog.prototype = {
jumpurl : '',
jump : function(){
window.location = this.jumpurl;
}
};
*/
var rainman = new Blog(' jb51', 'http://www.jb51.net');
var test = new Blog('server', 'http://s.jb51.net');

This is a very simple example, but it can explain some of the internal things of the prototype very well. First look at the memory allocation in the picture below:

You can see the following through the picture above. Content:

prototype is just an attribute of the function, and the type of the attribute is an object.
Memory allocation status:
Function Blog has a prototype attribute, and the prototype attribute has a variable and a function;
The two variables test and rainman have two variables: name and url respectively;
test Both variables and rainman have a jumpUrl variable and a jump function, but no memory is allocated. They are references to Blog.protype

3. Extension 1:

Copy code The code is as follows:

Website.prototype = Blog.prototype
var Blog = function( name, url ){
this.name = name;
this.url = blogurl;
};
Blog.prototype.jumpurl = '';
Blog.prototype.jump = function (){
window.location = this.jumpurl;
};
var rainman = new Blog('jb51', 'http://www.jb51.net');
var test = new Blog('server', 'http://s.jb51.net');

var Website = function(){};
Website.prototype = Blog.prototype;
var mysite = new Website();

You can see the following content through the above picture:

"Website.prototype = Blog.prototype;": Website's prototype does not allocate memory, but only references Blog's prototype attribute.
The two properties of mysite do not allocate memory, and only reference Blog.prototype.jumpurl and Blog.prototype.jump respectively


4. Extension 2:

Copy code The code is as follows:

Website.prototype = new Blog()
var Blog = function(){};
Blog.prototype.jumpurl = '';
Blog.prototype.jump = function(){
window.location = this.jumpurl;
};

var Website = function(){};
Website.prototype = new Blog();
var mysite = new Website();

You can see the following content through the above picture:

The prototype attribute of Website is just an instance of Blog (same as rainman=new Blog(); ); therefore, the prototype attribute of Website is Now has jumpurl variable and jump method.
Mysite is an instance of Website. Its jumpurl and jump methods are inherited from Website's prototype, and Web.prototype is inherited from Blog.prototype (it is not so much inheritance as reference here)
The entire program During the running process, only one jumpurl variable and one jump method are allocated in the memory
5. new operator
new operator in JavaScript.
The new operator in JavaScript creates a new object. Usage:
new constructor[(arguments)]
where constructor is a required option. The object's constructor. If the constructor has no parameters, the parentheses can be omitted.
arguments are optional. Any parameters passed to the new object's constructor.

Explanation of new operator in JavaScript
The new operator performs the following tasks:
Creates an object without members.
Call the constructor for that object, passing a pointer to the newly created object as the this pointer.
The constructor then initializes the object based on the parameters passed to it.
Examples
The following are examples of valid new operator usage.
my_object = new Object;
my_array = new Array();
my_date = new Date("Jan 5 1996");

6. Others
In most JavaScript versions, the JS engine will give each function an empty prototype object, that is, the prototype attribute.