Detailed Explanation of phototype in JS

1 prototype design pattern

You can use clone () to implement prototyping in. Net

The main idea of prototyping is that there is now a class A, and I want to create a class B, which is prototyped from 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 prototype method

Examples:

functionPeople(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=newPeople("Windking"); 
p1.Introduce(); 
People.Run();
p1.IntroduceChinese();

3 obj1.func. call (obj) method

It means that obj is regarded as obj1 and the func method is called

Ok, solve the following problems 1 by 1:

What does prototype mean?

Each object in javascript has an prototype attribute, and the prototype attribute of an object in Javascript is interpreted to return a reference to the prototype of the object type.

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 cloned all the methods and attributes in B once. A can use the methods and properties of B. The emphasis here is on cloning rather than inheritance. It can happen that 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();//  Display baseClass::showMsg

We define the baseClass class first, and then we define extentClass, but we intend to clone extendClass using an instance of baseClass as a prototype, and also include showMsg as an object method.

extendClass. prototype = new baseClass () can be read as: extendClass was created from an instance of baseClass as a prototype clone.

Then there is a question. What if extendClass itself contains a method with the same name as baseClass's method?

Here's Extended Lab 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

Experiments show that: When the function runs, it will go to the ontology function first. If it is found, it will run. If it cannot be found, it will go to prototype to find the function. Or it can be understood that prototype does not clone functions with the same name.

Then there will be a new problem:

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

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

baseinstance. showMsg. call (instance) here; Read as "Call instance as baseinstance, call its object method showMsg"

Well, some people here may ask why not use baseClass. showMsg. call (instance);

This is the difference between object methods and class methods. What we want to call is the object method of baseClass

Finally, if the following code is clearly understood, then what this article says has already been understood:

<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>