A summary of the way Atitit.javascript implements the class

Source: Internet
Author: User
Tags mootools

a summary of the way Atitit.javascript implements the class

1. Implementation of the type of Class :: construction method, prototype mode, construction method + prototype hybrid mode 1

2. Prototype mode (function mode) Classic type. Implementing a Property recommendation 1

3. precautions for this 2

4. Prototype mode prototype, implementation method recommended 3

5. Hybrid mode ( attribute Classic mode, method propoty ), recommended 3

6. Private Method 4

7. Static properties and methods ... 5

8. Closure Type 5

9. MooTools Framework, it feels good, it is more perfect for Javascript class emulation, also supports class inheritance 5

10. Reference 5

1. Implementation of class-style::How to construct a method; a prototype; a construction method.+how to mix prototypes

2. Prototype mode (function mode) Classic style: Implementing attribute Recommendations

· Create a Student class

· function Student (name) {

· THIS.name = name;

· This.sayname = function () {

· alert (this.name);

· };

· }

·  New two different Student.

· var jimmy = new Student (' Jimmy ');

· var henry = new Student (' Henry ');

The method is simple and clear, but also conforms to Javaer's appetite, but each new object will allocate a Sayname method in memory, performance is not very good

Author:: Old Wow's paw attilax Ayron, email:[email protected]

Reprint please indicate source: Http://blog.csdn.net/attilax

3. Thisthe precautions

According to the author's experience, this in class does not always point to the object itself, mainly because Javascript is not the OOP language, Also, functions and classes are defined by function , which of course causes minor problems.

this pointer refers to the wrong situation generally in the event processing above, we want to let an object's member function to respond to an event, when the event is triggered, the system will call our member function, but the incoming this The pointer is not the object of our own, and of course, It will be an error to call this again in the member function.

The workaround is that we save this to a private property at the beginning of the definition class, and later we can use this attribute instead of this . I use this pointer in this method is quite safe, and is very worry ~

function Shape (Ax,ay)

02

{

03

var _this=this; Save this and replace this with _this, so you won't get dizzy by this.

04

var x=0;

05

var y=0;

06

_this.gx=0;

07

_this.gy=0;

08

var init = function ()

09

{

10

x=ax;//access the private property, write the variable name directly

11

Y=ay;

12

_this.gx=ax;//access to the public property, you need to precede the variable name with this.

13

_this.gy=ay;

14

};

15

Init ();

16

}

4. Prototype mode prototype,Recommended Implementation Methods

Prototype mode

1.// Create a Student class

2.// properties and methods are set through Student.prototype

3. Function Student (name) {

4. Student.prototype = name;

5. Student.prototype.sayName = function () {

6. Alert (this.name);

7.}

8.}

9.//new two different Student.

var jimmy = new Student (' Jimmy ');

var henry = new Student (' Henry ');

Jimmy.sayname ();// show Henry!!!

Henry.sayname ();// show Henry!!!

Maybe there's a discrepancy between the code executed and some children's shoes.. Two playsAlertall pop uphenry!It's really good to understand.. properties and methods are passedprototypeSet. the same property or method of a different object points to the same memory, soHenryis inJimmyafter setting the. soHenryputJimmycover the.

5. Mixing mode (PropertiesClassic mode,MethodPropoty-),Recommended

The way you construct a method can allocate different memory for each object of the same class, which is good for setting properties when writing classes.

But when we set the method, we need to have different objects of the same class share the same memory . It 's best to write methods in a prototype way. .  So when writing a class, you need to mix the construction method and the prototype in two ways . .

· / Create a Student class

· property is set by construction method

· method is set by Student.prototype

· function Student (name) {

· THIS.name = name;

· Student.prototype.sayName = function () {

· alert (this.name);

· }

· }

·  New two different Student.

· var jimmy = new Student (' Jimmy ');

· var henry = new Student (' Henry ');

· Jimmy.sayname ();// show Jimmy

· Henry.sayname ();// show Henry

6. Private methods

function Shape ()

2

{

3

var x=0;

4

var Y=1;

5

var draw=function ()

6

{

7

Print

8

};

9

}

This function cannot be called with Ashape.draw .

8

};

6.1.1.1. Constructors

Javascript does not support OOP, and of course there are no constructors, but we can simulate a constructor ourselves so that the object is automatically called when it is created, with the following code:

1

function Shape ()

2

{

3

var init = function ()

4

{

5

Constructor code

6

};

7

Init ();

8

}

7. Static properties andMethod...

shape.count=0;//defines a static property count, which belongs to the class, not to the object.

14

Shape.staticmethod=function () {};//defines a static method

8. Closed-Package

Var x={All Code};

This IDE can show whether there is a problem , or not recommended ... but a one-watt class library is one of the ways ...

9. Js OOPFrame---mootoolsframe that feels pretty good about itJavascriptclass emulation is more complete and supports the inheritance of classes10. Reference

how JavaScript Implements Classes -- Concise modern Magic . htm

Implementing the way JavaScript writes classes -51cto.com.htm

A summary of the way Atitit.javascript implements the class

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.