The understanding of prototype in JS

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:

A-class method

B-Object method

Prototyping Method C

Example:

function people (name) {      //object property    this.name=name;     Object method This     . Introduce=function() {          alert ("My name is" +this. Name);}     }   

?//Class static 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 ();//Call object method

People.run ();//Call static method

P1. Introducechinese (); Invoking the prototype method

3. Obj1.func.call (obj) method

This means that obj is treated as obj1, calling the Func method, which would have called the Func method of Obj1, but, after passing in obj, changed the context object to invoke the Ojb1 method through the Obj object.

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:

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 Staticvar baseinstance = new  baseclass (); Baseinstance.showMsg.call (instance) ;//Display baseclass::showmsg             

The understanding of prototype in JS