Example analysis of the usage of prototype in JS

  • 2020-05-17 04:46:07
  • OfStack

This article illustrates the use of prototype in JS as an example. Share with you for your reference. The specific analysis is as follows:

phototype in JS is one of the more difficult parts of JS

This article is based on the following knowledge points:

1. Prototype design mode

You can use clone() in.Net to implement prototyping
The main idea of prototyping is, now that I have a class A, I want to create a class B, which is modeled on A and can be extended. We call the prototype of B A.

2. The methods of javascript can be divided into three categories:

a class method
b object method
c prototyping method

Examples are as follows:


function People(name)
{
 this.name=name;
 // Object methods 
 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

This means treat obj as obj1 and call the func method

Well, here are the questions:

What does prototype mean?

Each object in javascript has an prototype attribute, and the prototype attribute in Javascript is interpreted as: returning a reference to an object type stereotype.


A.prototype = new B();

Understanding prototype should not confuse it with inheritance. prototype of A is an instance of B. It is understandable that A cloned all the methods and properties in B once. A can use the methods and properties of B. The emphasis here is on cloning, not inheritance. This can happen: prototype of A is an instance of B, and prototype of B is also an instance of A.

Let's 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(); //  According to baseClass::showMsg

We first defined the baseClass class, and then we're going to define extentClass, but we're going to prototype one instance of baseClass to clone extendClass that also contains the showMsg object method.

extendClass. prototype = new baseClass() extendClass was created as a clone of an instance of baseClass.

So there's a question, what if extendClass itself contains a method with the same name as baseClass's method?

Here 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();// According to extendClass::showMsg

The experiment proves that: when a function is running, it will first look for it in the function of the ontology; if it is found, it will run; if it is not, it will look for it in prototype. Or you could say that prototype doesn't clone functions with the same name.

So there's a new question:

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

The answer is you can use call:


extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);// According to baseClass::showMsg

Here the baseinstance. showMsg. call (instance); Read "call instance as baseinstance, calling its object method showMsg"
Well, one might ask here, why not use baseClass.showMsg.call (instance);
This is the difference between object methods and class methods. We want to call baseClass's object methods

Finally, if this code is clear, then this article should be clear:


<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(); // According to extendClass::showMsg
instance.baseShowMsg(); // According to baseClass::baseShowMsg
instance.showMsg(); // According to extendClass::showMsg
baseClass.showMsg.call(instance);// According to baseClass::showMsg static
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);// According to baseClass::showMsg
</script>

I hope this article has been helpful to your javascript programming.


Related articles: