Prototype_javascript Skills of Learning summary of JavaScript

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

This article is based on the following several points of knowledge:

1 Prototype method design mode
You can use Clone () in. NET to implement the prototype method

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

The 2 JavaScript methods can be grouped into three categories:
a-> class method

B-> Object method

C-> Prototype method

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");

}

//prototyping 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
the meaning is to think of obj as Obj1, call the Func method, originally call the Obj1 func method, but, after passing in obj, changed the context object, it is through the Obj object to invoke the Ojb1 method.

OK, here's one problem to solve:

What is the meaning of prototype?

Each object in JavaScript has the prototype attribute, and the prototype attribute of the object in JavaScript is interpreted as returning 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 you can understand that a clones all the methods and attributes in B. 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 define the BaseClass class, and then we want to define the Extentclass, but we intend to use an instance of BaseClass as a prototype to clone the Extendclass also contains the ShowMsg object method.

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

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

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

The experiment proved that: the function will go to the function of the ontology first to find, if found then run, can not find the prototype to find the function. Or it can be understood that prototype does not clone a function of the same name.

And then there's a new problem:

What if I want to use an instance of Extendclass instance invoke the 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 "call instance as Baseinstance, invoke its object method ShowMsg"

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

This is the difference between the object method and the class method, and we want to call 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 ();//Show 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

The above is about JavaScript prototype in-depth study, and then related articles to update, I hope you continue to pay attention.