The prototype in JS

JS in the Phototype is a more difficult to understand the part of JS (transferred from the Source: (http://www.cnblogs.com/yjf512/))

This article is based on several knowledge points:

1 prototype design pattern

Clone () can be used in. NET to implement the prototype method

The main idea of the prototype method is that there are now 1 class A, and I want to create a class B, which is a prototype and can be extended. We call the prototype of B A.

The 2 JavaScript methods can be divided into three categories:

Class A methods

B Object method

C Prototyping Method

Example:

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");
}
Prototyping methods
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 treat obj as Obj1, calling the Func method

OK, here's one problem to solve:

What does prototype mean?

Each object in JavaScript has the prototype property, and the prototype property of the object in JavaScript is interpreted as a reference to the object type prototype.

A.prototype = new B ();

Understanding prototype should not confuse it with inheritance. A's prototype is an example of B, and it's understandable that a will clone the methods and properties in B all over again. A can use the methods and properties of B. The emphasis here is on cloning, not inheritance. This can happen: the prototype of A is an instance of B, and the 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 (); Show Baseclass::showmsg

We first defined the BaseClass class, and then we want to define extentclass, but we are going to use an instance of BaseClass as a prototype, to clone the Extendclass also contains showmsg this object method.

Extendclass.prototype = new BaseClass () can be read as: Extendclass was created as an instance of BaseClass as a prototype clone.

Then there is a question, what if the Extendclass itself contains a method with the same name as the BaseClass method?

Here is the 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

Experimental results show that the function will go to the function of the main body to find, if found to run, can not find the prototype to find the function. Or it can be understood that prototype does not clone a function with the same name.

Then there will be a new problem:

What if I want to use an instance of Extendclass instance call BaseClass object method ShowMsg?

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's Baseinstance.showMsg.call (instance); read as "invoke instance as Baseinstance, invoke its object method ShowMsg"

Well, someone here might ask, why not BaseClass.showMsg.call (instance);

This is the difference between the object method and the class method, and we want to invoke the BaseClass object method.

Finally, the following code, if understood clearly, is understood in this article:

<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 (); Show Extendclass::showmsg
Instance.baseshowmsg (); Show Baseclass::baseshowmsg
Instance.showmsg (); Show Extendclass::showmsg

BaseClass.showMsg.call (instance);//Display baseclass::showmsg static

var baseinstance = new BaseClass ();
Baseinstance.showMsg.call (instance);//Display baseclass::showmsg

</script>