Illustrate oo Javascript in the simplest example.

Source: Internet
Author: User
. A simplified example

You only need to understand three keywords:
The first one is function. The class definition in the JS world uses 'function'. The content in the function is the content of the constructor.
The second is the this pointer, which indicates the object that calls this function.
The third is prototype, which is used to define member functions and compare standards and insurance.

  1. // Define the circle class, which has the member variable R, constant Pi, and calculated area. Area ()
  2. FunctionCircle (RADIUS)
  3. {
  4. This. R = radius;
  5. }
  6. Circle. Pi = 3.14159;
  7. Circle. Prototype. Area =Function(){
  8. ReturnCircle. Pi *This. R *This. R;
  9. }
  10. // Use the circle class
  11. VaRC =NewCircle (1.0 );
  12. Alert (C. Area ());

// Define the circle class, which has the member variable R, constant Pi, and the calculated area member function area () <br/> function circle (RADIUS) <br/>{< br/> This. R = radius; <br/>}< br/> circle. pi = 3.14159; <br/> circle. prototype. area = function () {<br/> return circle. pI * This. R * This. r; <br/>}< br/> // use the circle class <br/> var c = new circle (1.0); <br/> alert (C. area ());

 

In addition, the member function definition can also be written as follows:

    1. FunctionCompute_area (){
    2. ReturnCircle. Pi *This. R *This. R;
    3. }
    4. Circle. Prototype. Area = compute_area;

Function compute_area () {<br/> return circle. Pi * This. R * This. R; <br/>}< br/> circle. Prototype. Area = compute_area;

2. Inheritance

Note:
1) define the inheritance relationship childcircle. Prototype = new circle (0); where 0 is used for placeholder
2) Call the constructor of the parent class

  1. This. Base = circle;
  2. This. Base (RADIUS );
  3. // Define the child class of childcircle
  4. FunctionChildcircle (RADIUS ){
  5. This. Base = circle;
  6. This. Base (RADIUS );
  7. }
  8. Childcircle. Prototype =NewCircle (0 );
  9. FunctionCircle_max (a, B ){
  10. If(A. R> B. R)ReturnA;
  11. Else ReturnB;
  12. }
  13. Childcircle. max = circle_max;
  14. // Use the childcircle subclass
  15. VaRC =NewChildcircle (1 );
  16. VaRD =NewChildcircle (2 );
  17. VaRBigger = D. Max (c, d );
  18. Alert (bigger. Area ());

This. base = circle; <br/> This. base (RADIUS); <br/> // defines the childcircle subclass <br/> function childcircle (RADIUS) {<br/> This. base = circle; <br/> This. base (RADIUS); <br/>}< br/> childcircle. prototype = new circle (0); <br/> function circle_max (a, B) {<br/> If (. r> B. r) return a; <br/> else return B; <br/>}< br/> childcircle. max = circle_max; <br/> // use the childcircle subclass <br/> var c = new childcircle (1); <br/> var d = new childcircle (2 ); <br/> var bigger = D. max (c, d); <br/> alert (bigger. area ());
3. var-Type Definition

 

JS also supports the form of VaR Circle = {raidus: 1.0, Pi: 3.1415}. The syntax is like the definition of CSS.
Therefore, if there is only one circle instance, the following definition method is more concise:

    1. var newcircle =
    2. {
    3. r: 1.0,
    4. Pi: 3.1415,
    5. area: function () {
    6. return This . pI * This . R * This . r;
    7. }
    8. };
    9. alert (newcircle. Area ();

VaR newcircle = <br/>{< br/> r: 1.0, <br/> Pi: 3.1415, <br/> area: function () {<br/> return this. pI * This. R * This. r; <br/>}< br/>}; <br/> alert (newcircle. area ());
Let's take a look at the OO JavaScript library-prototype in rails.
In fact, the current Syntax of JavaScript is really not suitable for the so awkward Writing of the OO mode ....

 

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.