Prototype in javascript--(prototype)

JS in the prototype is a more difficult to understand the part of JS

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:

functionPeople (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" Span style= "color: #000000;" >);

P1. Introduce ();

People.run ();

P1. Introducechinese ();
/span>

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:

functionBaseClass ()
{
This. showmsg=function ()
  {
     alert ( "baseclass::showmsg"  }
}

 extendclass ()
{
}

Extendclass.prototype = new  BaseClass ();
var instance =  new extendclass ();
Instance.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:

functionBaseClass ()
{
This. showmsg=function()
{
Alert"Baseclass::showmsg");
}
}

functionExtendclass ()
{
This. showmsg=function  ()
    {
        alert ( "extendclass::showmsg ");
    }
}

Extendclass.prototype = < Span style= "color: #0000ff;" >new baseclass ();
var instance =  new extendclass ();

Instance.showmsg (); // show 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">

functionBaseClass ()
{
This. showmsg=function()
{
Alert"Baseclass::showmsg");
}

This. baseshowmsg=function()
{
Alert"Baseclass::baseshowmsg");
}
}
Baseclass.showmsg=function()
{
Alert"Baseclass::showmsg Static");
}

functionExtendclass ()
{
This. showmsg=function()
{
Alert"Extendclass::showmsg");
}
}
Extendclass.showmsg=function()
{
Alert"Extendclass::showmsg Static")
}

Extendclass.prototype=NewBaseClass ();
var instance=NewExtendclass ();

Instance.showmsg ();//Show Extendclass::showmsg
Instance.baseshowmsg ();//Show Baseclass::baseshowmsg
Instance.showmsg ();//

BaseClass.showMsg.call (instance);

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

</SCRIPT>

Xuan Chi Blade (yjf512)
Source: (http://www.cnblogs.com/yjf512/)
Copyright notice: The copyright of this article is owned by the author and the blog Park. Welcome reprint read, reprint must indicate the detailed link of this article.

Prototype in javascript--(prototype)