About prototype and prototype attributes and common methods in js, jsprototype

About prototype and prototype attributes and common methods in js, jsprototype

Prototype is a hard part of javascript notes. The following describes prototype in javascript through several key knowledge points. For details, see the following.

1 original method design mode

In. Net, you can use clone () to implement the original method.

The main idea of the original method is that there is A Class A now. I want to create A Class B, which is based on class A and can be expanded. We call B A as A prototype.

2 javascript methods can be divided into three types:

Class a Method
Object B Method
C Prototype Method

Example:

Function People (name) {this. name = name; // object method this. introduce = function () {alert ("My name is" + this. name) ;}} // class 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 (); People. run (); p1.IntroduceChinese ();

3 obj1.func. call (obj) Method

It means to regard obj as obj1 and call the func method.

Okay, here is a solution:

What does prototype mean?

Each object in javascript has the prototype attribute. The prototype attribute of the object in Javascript is interpreted as returning reference to the object type prototype.

A.prototype = new B();

Understanding prototype should not confuse it with inheritance. Prototype of A is an instance of B. It can be understood that A clones all the methods and attributes of B. A can use the methods and attributes of B. Here we emphasize cloning rather than inheritance. This can happen: prototype of A is an instance of B, and prototype of B is also an instance of.

Let's take a 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 (); // display baseClass: showMsg

We first define the baseClass class, and then we want to define the extentClass. However, we intend to use an instance of baseClass as the prototype. The cloned extendClass also contains the showMsg object method.

ExtendClass. prototype = new baseClass () can be read as follows: extendClass is created by cloning an instance of baseClass as a prototype.

Then there will be a problem. What if extendClass itself contains a method with the same name as the baseClass method?

Below is 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

Experiment shows that the function will be searched for in the function of the ontology when running. If it is found, it will run. If it cannot be found, it will find the function in prototype. Alternatively, prototype does not clone functions with the same name.

There will be another new problem:

What if I want to use an instance of extendClass to call the object method showMsg of baseClass?

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 baseinstance. showMsg. call (instance); read as "call an instance as a baseinstance and call its object method showMsg"

Well, someone may ask why baseClass. showMsg. call (instance) is not needed );

This is the difference between object methods and class methods. We want to call the object methods of baseClass.

Finally, if the following code is clearly understood, this article will already understand:

<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 (); // display extendClass: showMsginstance. baseShowMsg (); // display baseClass: baseShowMsginstance. showMsg (); // display extendClass: showMsgbaseClass. showMsg. call (instance); // display baseClass: showMsg staticvar baseinstance = new baseClass (); baseinstance. showMsg. call (instance); // display baseClass: showMsg </script>

Ps: Interpretation of Prototype attributes of js and common methods

Function: Prototype

Each constructor has a prototype attribute (prototype, which is not translated in the following example and is used in the original document ). This attribute is very useful: declare a common variable or function for a specific class.

Prototype Definition

You do not need to explicitly declare a prototype attribute because it exists in every constructor. You can look at the following example:

Example PT1
CODE:

Function Test () {} alert (Test. prototype); // output "Object"

Add properties to prototype

As you can see above, prototype is an object, so you can add attributes to it. The property you add to prototype will become a common property of the object created using this constructor.
For example, I have a data type Fish below, and I want all Fish to have these attributes: livesIn = "water" and price = 20; to achieve this, I can add those attributes to the prototype of the constructor Fish.

Example PT2

CODE:

function Fish(name, color){this.name=name;this.color=color;}Fish.prototype.livesIn="water";Fish.prototype.price=20;

Next let's make a few fish:

CODE:

var fish1=new Fish("mackarel", "gray");var fish2=new Fish("goldfish", "orange");var fish3=new Fish("salmon", "white");

Let's take a look at the attributes of fish:

CODE:

For (int I = 1; I <= 3; I ++) {var fish = eval_r ("fish" + I ); // I just get the pointer alert (fish. name + "," + fish. color + "," + fish. livesIn + "," + fish. price );}

The output should be:

CODE:

"mackarel, gray, water, 20""goldfish, orange, water, 20""salmon, white water, 20"

You can see that all fish have the attributes livesIn and price, and we didn't even specifically declare these attributes for each different fish. In this case, when an object is created, this constructor will assign its property prototype to the internal attribute _ proto _ of the new object __. This _ proto _ is used by this object to find its attributes.

You can also use prototype to add common functions to all objects. This has one benefit: you do not need to create and initialize this function every time you construct an object. To explain this, let's repeat Example DT9 and rewrite it using prototype:

Add a function to an object using prototype

Example PT3

CODE:

function Employee(name, salary){this.name=name;    this.salary=salary;}Employee.prototype.getSalary=function getSalaryFunction(){return this.salary;}Employee.prototype.addSalary=function addSalaryFunction(addition){this.salary=this.salary+addition;}

We can create objects as usual:

CODE:

var boss1=new Employee("Joan", 200000);var boss2=new Employee("Kim", 100000);var boss3=new Employee("Sam", 150000);

Verify it:

CODE:

Alert (boss1.getSalary (); // output 200000 alert (boss2.getSalary (); // output 100000 alert (boss3.getSalary (); // output 150000

Here is an illustration to illustrate how prototype works. Every instance of this object (boss1, boss2, boss3) has an internal attribute named _ proto __, which points to the prototype of its constructor (Employee. When you execute getSalary or addSalary, this object will find and execute this code in its _ proto. Note: No code is copied here (compared with the chart Example DT8 ).