JavaScript OOP Ideas

The core of JS is the object

{},

The new function () {} is also an object in this form.

http://www.nowamagic.net/librarys/veda/detail/241

Tidy up some information on the Internet for reference

1. Create an Object

1.1 New

To create an object with new:

[JavaScript]View Plaincopyprint?

1. var user = new Object ();
2. User.age = 12; //Add properties to an object at the same time
3. User.Name = ' Ajun ';

1.2{}

Create an object with {}, such as:

[JavaScript]View Plaincopyprint?

1. var user = {
2. ' Name ': ' Ajun,
3. ' Age ': 12
4. }

At the same time, we have added two attributes for User: Name,age

In the above code, you can also add a method to an object, such as:

[JavaScript]View Plaincopyprint?

1. var user = {
2. ' Name ': ' Ajun ',
3. ' Age ': 12
4. ' Say ':function () {
5. Alert (this.name); This represents the current object
6. }
7. }

2. Classes and constructors

2.1 How to define

In JavaScript, all variables and methods are objects that can be used to pass arguments to each other.

Look at the following method:

[JavaScript]View Plaincopyprint?

1. function User (name,age) {
2. this.name = name;
3. this.age = age;
4. This.say = function () {
5. Alert (this.name+ ' say hello!! ');
6. }
7. }

At this point you can understand that the user you can see the name of a class, and user () is the class to construct the method, which is a bit similar to the Java class and constructor method must have the same name, in the new call its construction method, some initialization operations, can be placed within your constructor method, Here we are used to initialize the value of the name and age property, and the following creates the code for the user object:

[JavaScript]View Plaincopyprint?

1. var user = New user (' Ajun ', 24);
2. User.say ();  //ajun say hello!!

Here is the following explanation:

When we are in the new object, we actually invoke a called call (), the current object is passed as a parameter, assigned to this, so this refers to the current reference object

3. Prototypes

3.1 Prototype

In JavaScript, each method is named "Prototype" and is used to refer to the prototype object in the following code:

[JavaScript]View Plaincopyprint?

1. function user () {  
2.         this.name =  ' Ajun ';   
3.         
4.         this.say = function () {  
5.             alert ( this.name+ '  say hello!! ');   
6.                }  
7. }  

This user will have a prototype attribute, which can be user.prototype when you refer to it, and this object will inherit from user when you new user object. Prototype all the attributes while the user. Prototype also inherits all of the attributes from Object.prototype, so you can call ToString () on your object, in fact he is an object. The prototype property is only inherited by your object, where you can understand that Java classes inherit, and subclasses inherit the parent class.

With the concept of prototype, we can add methods and properties to user through prototype, so that each user object will share methods and properties later, instead of having their copy for each object.

[JavaScript]View Plaincopyprint?

2. function User () {
4. this.name = ' Ajun ';
6. this.age = 24;
8. }
10. User. Prototype. Say = function () {
12. Alert (this.name+ ' say hello!! ');
14. }
16. var user = new user ();
18. User.say ();
20. var user2 = new User ();
22. User2.say ();

So that when we finish the new user object, when we call this method, he can continue to use it for other methods.

3.2 Prototype chain

Each JavaScript object inherits a prototype chain, and all prototypes are terminated by Object.prototype. Note that the inheritance that you see so far is the inheritance between the active objects. It differs from the common concept of inheritance, which refers to the occurrence of inheritance between classes when declaring a class. As a result, JavaScript inheritance is more dynamic. It does this with a simple algorithm, as follows: When you try to access the properties/methods of an object, JavaScript checks to see if the property/method is defined in the object. If not, the prototype of the object is checked. If not, the prototype of the object is checked, so continue, checking to Object.prototype.

The way that JavaScript dynamically parses property access and method calls produces some special effects:

The changes made to the prototype are immediately rendered on objects that inherit the prototype object, even after the objects have been created.

@ If a property/method X is defined in an object, the property/method with the same name will be hidden in the object's prototype. For example

You can override the ToString method of Object.prototype by defining the ToString method in User.prototype.

The @ change is passed only in one direction, that is, from the prototype to its derived object, but not in the opposite direction.

Example:

[JavaScript]View Plaincopyprint?

1. function user () {  
2.         this.name =  ' Ajun ';   
3.         
4. }  
5. user. prototype.  tostring = function () {  
6.          alert (this.name+ '  say hello!! ');   
7. }  
8. var user =  new user ();   
9. user. tostring  ();   

At this point, the ToString of Object.prototype will be overwritten. This will not invoke Object.prototype's ToString, it will not output [object Object], and the output is Ajun say hello!! The

4. Static Properties and methods

Sometimes, you want to like in Java, through the class directly to manipulate your properties and methods, in Java these are static properties, directly through the class name to refer to, in JavaScript can also be done, see the following code:

[JavaScript]View Plaincopyprint?

1. function User () {}
2. User.age = 12;
3. User.Name = ' Ajun ';
4. User.say = function () {
5. return ' Ajun ';
6. }
7. Alert (User.say ());

You can then refer directly to your method or property using the method name instead of the new object.

5. Private properties

Under normal circumstances, you cannot access local variables inside a function from outside of a function. After the function exits, the local variable will disappear forever for various practical reasons. However, if the local variable is caught by the closure of the inner function, it will survive. This fact is key to simulating JavaScript's private properties, such as:

[JavaScript]View Plaincopyprint?

2. function User (name,age) {
4. This.setname = function (newName) {
6. name = NewName; //name equivalent to SetName's Name property
8. };
10. This.getname = function () {
12. return name;
14. }
16. This.getage = function () {
18. return age;
20. };
22. This.setage = function (newage) {
24. age = NewAge;
26. };
28. }
30. var user = New User (' Ajun ', 24);
32. Alert (user.getname)//ajun
34. User.setname (' Lisi ', 12);
36. var newName = User.getname ();
38. alert (newName); //lisi

Or it can be simulated like a property, because name beyond its scope, is not accessible

[JavaScript]View Plaincopyprint?

1. function user  (name, age)  {  
2.     var name;  
3.     this.getname = function ()  { RETURN NAME; };  
4. this.setname = function (newName)  {   
5.  NAME =  NEWNAME;   
6. };  
7. }  
8. var user = < span class= "keyword" >new user  (' Ajun ', ' n ');   
9. user.  SetName (
10. alert (P.getname ());   

Note: The private property that you set is not accessible by other public methods within this method (refers to a shared method, defined by User.prototype method), which is not similar to Java

Private members can only be accessed by means of having these private members within their closures

Such as: The following code, is not allowed to work

[JavaScript]View Plaincopyprint?

1. user.prototype.somepublicmethod= function () {
2. Alert (this.getname ());
3. }

5. Namespaces

The namespace described here is equivalent to the concept of using the package in Java, which prevents the method name from conflicting and the code is as follows:

[JavaScript]View Plaincopyprint?

2. Name space
4. var ajun = {};
6. Ajun. Examples = {};
8. Ajun. examples.user=function () {
10. This.setname = function (newName) {
12. name = NewName;
14. };
16. This.getname = function () {
18. return name;
20. }
22. This.getage = function () {
24. return age;
26. };
28. This.setage = function (newage) {
30. age = NewAge;
32. };
34. }
36. var user = new Ajun.  Examples.user ();
38. User.setname (' Ajun ');
40. Alert (User.getname ());

Add: In fact, with JavaScript can also implement class inheritance, etc., will use the prototype property, follow up ....

http://blog.csdn.net/ajun_studio/article/details/6837182

JavaScript OOP Ideas