Understanding prototype in JS and JSprototype

Understanding prototype in JS and JSprototype

Phototype in JS is a more difficult part of JS.

 

This article is based on the following knowledge points:

 

1 original method design mode

In. Net, you can use clone () to implement the original method.

The main idea of the original method is that there is A Class A now. I want to create A Class B, which is based on class A and can be expanded. We call B A as A prototype.

 

2 javascript methods can be divided into three types:

Class a Method

Object B Method

C Prototype Method

Example:

Function People (name)
{
This. name = name;
// Object Method
This. Introduce = function (){
Alert ("My name is" + this. name );
}
}
// Class Method
People. Run = function (){
Alert ("I can run ");
}
// Prototype Method
People. prototype. IntroduceChinese = function (){
Alert ("My name is" + this. name );
}

 

// Test

Var p1 = new People ("Windking ");

P1.Introduce ();

People. Run ();

P1.IntroduceChinese ();

 

3 obj1.func. call (obj) Method

It means to regard obj as obj1 and call the func method.

 

 

Okay, here is a solution:

 

What does prototype mean?

 

Each object in javascript has the prototype attribute. The prototype attribute of the object in Javascript is interpreted as returning reference to the object type prototype.

A. prototype = new B ();

Understanding prototype should not confuse it with inheritance. Prototype of A is an instance of B. It can be understood that A clones all the methods and attributes of B. A can use the methods and attributes of B. Here we emphasize cloning rather than inheritance. This can happen: prototype of A is an instance of B, and prototype of B is also an instance of.

 

Let's take a look at an example of an experiment:

Function baseClass ()
{
This. showMsg = function ()
{
Alert ("baseClass: showMsg ");
}
}

Function extendClass ()
{
}

ExtendClass. prototype = new baseClass ();
Var instance = new extendClass ();
Instance. showMsg (); // display baseClass: showMsg

We first define the baseClass class, and then we want to define the extentClass. However, we intend to use an instance of baseClass as the prototype. The cloned extendClass also contains the showMsg object method.

ExtendClass. prototype = new baseClass () can be read as follows: extendClass is created by cloning an instance of baseClass as a prototype.

 

Then there will be a problem. What if extendClass itself contains a method with the same name as the baseClass method?

Below is extended Experiment 2:

Function baseClass ()
{
This. showMsg = function ()
{
Alert ("baseClass: showMsg ");
}
}

Function extendClass ()
{
This. showMsg = function ()
{
Alert ("extendClass: showMsg ");
}
}

ExtendClass. prototype = new baseClass ();
Var instance = new extendClass ();

Instance. showMsg (); // display extendClass: showMsg

 

Experiment shows that the function will be searched for in the function of the ontology when running. If it is found, it will run. If it cannot be found, it will find the function in prototype. Alternatively, prototype does not clone functions with the same name.

 

There will be another new problem:

What if I want to use an instance of extendClass to call the object method showMsg of baseClass?

 

The answer is that you can use call:

ExtendClass. prototype = new baseClass ();
Var instance = new extendClass ();


Var baseinstance = new baseClass ();
Baseinstance. showMsg. call (instance); // display baseClass: showMsg

 

Here baseinstance. showMsg. call (instance); read as "call an instance as a baseinstance and call its object method showMsg"

Well, someone may ask why baseClass. showMsg. call (instance) is not needed );

This is the difference between object methods and class methods. We want to call the object methods of baseClass.

 

Finally, if the following code is clearly understood, this article will already understand:

 

<Script type = "text/javascript">

Function baseClass ()
{
This. showMsg = function ()
{
Alert ("baseClass: showMsg ");
}

This. baseShowMsg = function ()
{
Alert ("baseClass: baseShowMsg ");
}
}
BaseClass. showMsg = function ()
{
Alert ("baseClass: showMsg static ");
}

Function extendClass ()
{
This. showMsg = function ()
{
Alert ("extendClass: showMsg ");
}
}
ExtendClass. showMsg = function ()
{
Alert ("extendClass: showMsg static ")
}

ExtendClass. prototype = new baseClass ();
Var instance = new extendClass ();

Instance. showMsg (); // display extendClass: showMsg
Instance. baseShowMsg (); // display baseClass: baseShowMsg
Instance. showMsg (); // display extendClass: showMsg

BaseClass. showMsg. call (instance); // display baseClass: showMsg static

Var baseinstance = new baseClass ();
Baseinstance. showMsg. call (instance); // display baseClass: showMsg

</Script>

Why are the methods declared by prototype in js a common method?

Prototype of "object" in js can be understood as "class"
Any modifications made to prototype, any declared method, applies to every object.
Can we regard the declared method as "class method "?
The so-called "class method" is the common method of each object.
For example:
// Define two string objects
Var str1 = new String ("abc ");
Var str2 = new String ("abd ");
// Overwrite the Method
String. prototype. toString = function (){
Alert ("Overwrite ");
}
Str1.toString ();
Str2.toString ();
// Overwrite again
String. prototype. toString = function (){
Alert ("second overwrite ");
}
Str1.toString ();
Str2.toString ();
Conclusion: we can see that modifications to the prototype method affect every object. It can be said that each object has a common

What are prototype and prototypejs in js?

Prototype indicates the prototype. All js objects have this attribute. Therefore, prototype indicates the prototype of the function and a set of class members. You can use prototype to implement object-oriented functions.
For more information, see.