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.