Examples of prototype usage in JS, and prototype instance analysis

Examples of prototype usage in JS, and prototype instance analysis

This example describes how to use prototype in JS. Share it with you for your reference. The specific analysis is as follows:

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: showMsginstance. baseShowMsg (); // display baseClass: baseShowMsginstance. showMsg (); // display extendClass: showMsgbaseClass. showMsg. call (instance); // display baseClass: showMsg staticvar baseinstance = new baseClass (); baseinstance. showMsg. call (instance); // display baseClass: showMsg </script>

I hope this article will help you design javascript programs.