The prototype in JavaScript

About prototype:

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.

Now that there is a class A, I want to create a class B, and I want this class B to inherit the methods and properties of Class A, and be able to expand (that is, add extra methods and properties). So we're saying that the prototype of B is a. That is: B.prototype = A

The JavaScript approach can be divided into three categories:

1. Class methods

Function object (name)
{
THIS.name = "Object category";
Object methods: An object has a introduce method
This. Introduce=function () {
Alert ("My name is" +this.name);
}
}

2. Object methods
Class method: The People class has a run method
Object. Run=function () {
Alert ("I can Run");
}

3. Prototyping methods
The prototype method people prototype (prototype) has a Introducechinese method
Object.prototype.introducechinese=function () {
Alert ("My name is" +this.name);
}

Test

Var p1=new object ("windking");
P1.               Introduce (); P1 object methods, which can be called by each object
Object.                  Run (); class method for Object
P1.     Introducechinese (); In the P1 prototype (parent function), there is this method

About call () and APPL ():

Obj1.func.call (obj) is equivalent to: means to treat obj as Obj1, calling the Func method

var func = new function () {
Console.log ("func function called")
THIS.A = "Func"; Each func function has an attribute a, which equals the Func
}

var myfunc=function (x) {
var a= "MyFunc";
alert (THIS.A);
alert (x);

}

The object Func calls the MyFunc method and passes in the parameters ["xxx", "yyy", "zzz", "www"]
The arguments in apply are actually placed in an array

Myfunc.call (func,["xxx", "yyy", "zzz", "www"]);
Xxx,yyy,zzz,www call only passes a parameter, does not hit the array symbol, the result is xxx
Myfunc.apply (func,["xxx", "yyy", "zzz", "www"]);
XXX Apply must follow the array,

A chestnut:

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?

A second chestnut:

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.

What if I want to use an instance of Extendclass instance call BaseClass object method ShowMsg? The answer is that you can use the call

A third chestnut:

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

The last chestnuts:

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

The prototype in JavaScript