Prototype. js learning _ prototype

Source: Internet
Author: User
Class Prototype. js learning Prototype. as a successful open-source framework of javascript, js encapsulates a lot of useful functions. Although the official website does not provide any documentation, a lot of related documents are found on google, however, I still encountered some problems in the process of learning and using it. I hope that some familiar friends can give more advice on prototype. I pay attention to the following points in js learning. I also talk about the learning results and problems for each point. ^_^
1. Create a class
Prototype. js has been encapsulated. This is simple.

Var Person = Class. create ();

In this way, a Person class is created. This Person class must provide the Implementation of The initialize method:

Person. prototype = {
Initialize: function (){
}
};

Compared with java, Class. create is equivalent to Class. forName () and initialize is equivalent to the constructor. Like java constructor, initialize can be customized with parameter properties.
We can see that after using this method to define a class, it is clearly differentiated from javascript's original function method to define a Class. In this case, we can use class. create is used to define classes and function is used to directly define functions.
The class usually also involves the definition of static members (static) and instance members (which can be called only after being instantiated.
This is also very easy in javascript:
Static members:

Var Person = {
Name: 'person ',
GetName: function () {return 'person '}
};

Instance members:

Person. prototype = {
Childname: 'child ',
Eat: function ()
}

The above Person. getName can be called directly, but the eat method needs to be called by var person = new Person (); person. eat.
2. class inheritance
Class inheritance is actually supported by javascript, but prototype provides another method.
Based on the implementation supported by javascript:

Var Student = Class. create ();
Student. prototype = new Person ();

In this way, Student is inherited to Person.
This can be achieved when prototype is used:

Var Student = Class. create ();
Object. extend (Student. prototype, Person. prototype );
You can use this method to add a subclass.
Student. prototype. study = function (){};
Or
Object. extend (Student. prototype ,{
Study: function (){}
});

3. event mechanism (listening and observing class method execution)
I encountered some doubts about the event mechanism. As an event mechanism, we mainly need to provide event definitions, event listening, and event observation.
In javascript, an event must start with on, that is, an event must be named like onclick:
Add an external event to the Student, for example:

Student. prototype. study = function (){
This. onstudy ();
}
Student. prototype. onstudy = function (){};
This onstudy is implemented by the corresponding instance. For example, the instance adopts the following method:
Function studyThis (){
Alert ("study this ");
}
Var student = new Student ();
Student. onstudy = studyThis ();
We usually want to listen and Observe events. We tried this based on the bindAsEventListener and Observe provided by prototype:
Study. onstudy = watchStudy. bindAsEventListener (this );
Function watchStudy (event ){
Alert ("watch study ");
}

According to the event mechanism, study this and watch study prompts should be displayed during execution of study, but after the execution, only watch study prompts can be seen. Why? According to the listener concept, the original method should not be overwritten. However, I have read the source code of prototype. js, and the method described above will indeed overwrite the original method.
Observe tried this way:
Event. observe (study, 'Study ', watchStudy, false );
According to the observation mechanism, two prompts should be displayed when study is executed, but this line does not play any role after execution.
Why?
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.