Prototype and prototype in JavaScript

Prototype and prototype in JavaScript

• 
  

1. prototype

There is no class concept in JavaScript, but JavaScript can indeed implement overload, polymorphism, and inheritance. In fact, these methods can be explained by reference in JavaScript and prototype in combination with the variable scope.

2. Simple Example

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 ('rainman ', 'HTTP: // rainman.cnblogs.com'); var test = new Blog ('test', 'HTTP: // test.cnblogs.com ');

This is a very simple example, but it can be a good explanation of something inherent in prototype. first look at the memory allocation:

You can see the following content:

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

 

3. Extension 1: 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('rainman', 'http://rainman.cnblogs.com');var test = new Blog('test', 'http://test.cnblogs.com');var Website = function(){};Website.prototype = Blog.prototype;var mysite = new Website();

You can see the following content:

• "Website. prototype = Blog. prototype;": the prototype of the Website does not allocate memory, but references the prototype attribute of the Blog.
• No memory is allocated for the two attributes of mysite, and only Blog. prototype. jumpurl and Blog. prototype. jump are referenced respectively.

 

4. Extension 2: 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:

• The prototype attribute of Website is only an instance of the Blog (same as rainman = new Blog ();). Therefore, the prototype attribute of Website has the jumpurl variable and jump method.
• Mysite is an instance of Website. Its jumpurl and jump Methods inherit from the prototype of Website, while Web. prototype inherits from Blog. prototype (it is referenced instead of inheritance)
• During the entire program running, only one jumpurl variable and one jump method are allocated to the memory.

5. new operator

In JavaScript, the new operator creates a new object. Usage:

New constructor [(arguments)]

Constructor is required. Object constructor. If the constructor has no parameters, parentheses can be omitted.
Arguments is optional. Any parameter passed to the new object constructor.

Description of the new operator in JavaScript
The new operator executes the following tasks:
Create an object without members.
Call the constructor for that object and pass a pointer to the newly created object as the this pointer.
Then, the constructor initializes the object based on the parameters passed to it.
Example
The following are examples of valid new operators.

My_object = new Object;
My_array = new Array ();
My_date = new Date ("Jan 5 1996 ");

6. Others

• In most JavaScript versions, the JS engine gives each function an empty prototype object, that is, the prototype attribute.

For prototype problems in javascript

About prototype in javascript
Nction B (){}
B. prototype = new ();
The specific content of Class B is not defined in your code. (We usually name it in upper case as a class. Call a method starting with lowercase letters)
B is inherited from an instance of A, so all attributes and methods of A are inherited by B.
Below is a small example: if you do not know how to continue Baidu, you can learn a lot.

Function ClassA (){
// This. a = "";
ClassA. prototype. a = "";
}
Function ClassB (){
This. B = "B ";
}
ClassB. prototype = new ClassA ();

Var objB = new ClassB ();
For (var p in objB)
Document. write (p "");

// Alert (objB. );
// ClassB. prototype. a = "changed !! ";
// Alert (objB. );

Var objB1 = new ClassB ();
Var objB2 = new ClassB ();
ObjB1.a = "!!! ";
Alert (objB1.a );//"!!! "
Alert (objB2.a); // ""

// Each subclass object only references the same prototype.
// The prototype member in the subclass object is actually the same
Function (){
This. a = function () {alert ();};
}
Function B (){
This. B = function () {alert ();};
This. c = "1 ";
}
B. prototype = new ();
Var b1 = new B ();
Var b2 = new B ();
Alert (b1.a = b2.a); // ture
Alert (b1. B = b2. B); // false
Alert (b1.c === b2.c); // ture

// When constructing a subclass, the prototype constructor will not be executed;
Function C (){
Alert ("");
This. a = function () {alert ();};
}
Function D (){
Alert ("B ");
This. B = function () {alert ();};
}
D. prototype = new C (); // ""
Var d1 = new D (); // "B"
Var d2 = new D (); // "B"

// Access the prototype member object in the subclass object
Function E (){
// This. a = [];
E. prototype. a = [];
}
Function F (){
... The remaining full text>

How do you use prototype in JavaScript?

Definition and usage

The prototype attribute enables you to add attributes and methods to an object.
In this example, we will show how to use the prototype attribute to add attributes to an object:
<Script type = "text/javascript"> function employee (name, job, born) {this. name = name; this. job = job; this. born = born;} var bill = new employee ("Bill Gates", "Engineer", 1985); employee. prototype. salary = null; bill. salary = 20000; document. write (bill. salary); </script> output: 20000 from: www.w3school.com.cn/js/jsref_prototype_array.asp