Definition and reference of JavaScript classes

I. Overview

In Java, we can define our own classes and create objects based on these classes for use. In Javascript, we can also define our own classes, for example, define the User class and Hashtable class.

Currently, some standard classes exist in Javascript, such as Date, Array, RegExp, String, Math, and Number, which provides a lot of convenience for programming. But for complex client programs, these are far from enough.

Different from Java, Java2 provides many standard classes that basically meet our programming needs, but Javascript provides few standard classes. Many programming needs need to be implemented by ourselves, for example, Javascript does not have the Hashtable table, which makes it inconvenient to process key values.

Therefore, I personally think a complete Javascript Object view should be as follows:

Ii. Basic Concepts

1. Custom object.
Based on the JS object extension mechanism, you can customize JS objects, which is similar to Java.
Corresponding to custom objects are JS standard objects, such as Date, Array, and Math.
2. prototype)
In JS, this is a way to create object attributes and Methods. You can use prototype to add new attributes and methods for objects.
With prototype, we can add new attributes and methods for JS standard objects. For example, for String objects, we can add a new method trim () for them ().
Unlike strict programming languages (such as Java), we can dynamically add new attributes to JS objects during runtime.

Iii. Syntax Rules

1. Object Creation Method

1) object initializing Method

Format: objectName = {property1: value1, property2: value2 ,..., PropertyN: valueN}
Property is the property of an object.
Value is the object value. The value can be a string, number, or object.
For example: var user = {name: "user1", age: 18 };
Var user = {name: "user1", job: {salary: 3000, title: programmer}
In this way, you can also initialize the object method, for example:
Var user = {name: "user1", age: 18, getName: function (){
Return this. name;
}
}
The following will focus on the constructor mode, including the definition of attributes and methods, as well as the constructor mode.

 

2) constructor Method

Compile a constructor and create an object using the new method. The constructor can have constructor parameters.
For example:
Function User (name, age ){
This. name = name;
This. age = age;
This. canFly = false;
}
Var use = new User ();

2. Define Object Attributes

1) JavaScript can define three types of attributes for an object: Private attributes, instance attributes, and class attributes. Similar to Java, private attributes can only be used within an object, the instance attribute must be referenced by the instance of the object, and the class attribute can be referenced directly by the class name.

2) Private Property Definition
Private attributes can only be defined and used within the constructor.
Syntax format: var propertyName = value;
For example:
Function User (age ){
This. age = age;
Var isChild = age <12;
This. isLittleChild = isChild;
}
Var user = new User (15 );
Alert (user. isLittleChild); // Correct Method
Alert (user. isChild); // error: the object does not support this attribute or Method

3) There are two ways to define instance attributes:
Prototype Method, syntax format: functionName. prototype. propertyName = value
This method, syntax format: this. propertyName = value, pay attention to the location used by this in the following example
The value above can be a character, number, and object.
For example:
Function User (){}
User. prototype. name = "user1 ";
User. prototype. age = 18;
Var user = new User ();
Alert (user. age );
--------------
Function User (name, age, job ){
This. name = "user1 ";
This. age = 18;
This. job = job;
}
Alert (user. age );

3) Class property Definition
Syntax format: functionName. propertyName = value
For example:
Function User (){}
User. MAX_AGE = 200;
User. MIN_AGE = 0;
Alert (User. MAX_AGE );
Refer to the class attributes of JS standard objects:
Number. MAX_VALUE // maximum Math. PI // circumference Rate

4) for the attribute definition, in addition to the more formal method above, there is also a very special definition method, syntax format: obj [index] = value
Example:
Function User (name ){
This. name = name;
This. age = 18;
This [1] = "OK ";
This [200] = "year ";
}
Var user = new User ("user1 ");
Alert (user [1]);
In the preceding example, note that the age attribute cannot be obtained through this [1] Or this [0, that is, the index method must be used for reference. If the index method is not used, the index method must be used for reference.

3. Define object Methods

1) JavaScript can define three types of methods for objects: Private methods, instance methods, and class methods, similar to Java:
Private methods can only be used inside objects
The instance method can be used only after the object is instantiated.
Class methods can be directly used by class names.
Note: The method definition cannot be performed using the index method mentioned above.
2) Define private methods
Private methods must be defined in the constructor body and can only be used in the constructor body.
Syntax format: function methodName (arg1 ,..., ArgN ){}
For example:
Function User (name ){
This. name = name;
Function getNameLength (nameStr ){
Return nameStr. length;
}
This. nameLength = getNameLength (this. name );
}
3) define the instance method. Currently, you can use either of the following methods:
Prototype method, used outside the constructor, syntax format:
FunctionName. prototype. methodName = method;
Or
FunctionName. prototype. methodName = function (arg1 ,..., ArgN ){};
This method is used inside the constructor. Syntax format:
This. methodName = method;
Or
This. methodName = function (arg1 ,..., ArgN ){};
In the preceding syntax description, method is an external method. The method of the object to be defined by methodName means that an external method is directly assigned to a method of the object.
Take function (arg1 ,..., ArgN) {} defines object methods that developers should master.

Example 1
Function User (name ){
This. name = name;
This. getName = getUserName;
This. setName = setUserName;
}
Function getUserName (){
Return this. name;
}
Function setUserName (name ){
This. name = name;
}

Example 2
Function User (name ){
This. name = name;
This. getName = function (){
Return this. name;
};
This. setName = function (newName ){
This. name = newName;
};
}

Example 3
Function User (name ){
This. name = name;
}
User. prototype. getName = getUserName;
User. prototype. setName = setUserName ();
Function getUserName (){
Return this. name;
}
Function setUserName (name ){
This. name = name;
}

Example 4
Function User (name ){
This. name = name;
}
User. prototype. getName = function (){
Return this. name;
};
User. prototype. setName = function (newName ){
This. name = newName;
};

4) define class methods
Class methods need to be defined outside the constructor, and can be referenced directly by the constructor name.
Syntax format:
FunctionName. methodName = method;
Or
FunctionName. methodName = function (arg1 ,..., ArgN ){};
Example:
Function User (name ){
This. name = name;
}
User. getMaxAge = getUserMaxAge;
Function getUserMaxAge (){
Return 200;
}
Or
User. getMaxAge = function () {return 200 ;};
Alert (User. getMaxAge ());

4. Reference of attributes and Methods

1) visibility:
Private attributes and methods can only be referenced within an object.
Instance attributes and methods can be used anywhere, but must be referenced by objects.
Class attributes and methods can be used anywhere, but cannot be referenced through the instance of the object (unlike Java, static members in Java can be accessed through instances ).
2) at the object level:
Similar to Java bean references, Java bean can be referenced in a deep level.
Methods:
Simple property: obj. propertyName
Object Property: obj. innerObj. propertyName
Index attribute: obj [index]
For deeper references, it is similar to the above.
3) In terms of definition:
Attributes defined by index must be referenced by index.
Attributes defined in non-index mode can be referenced only in normal mode.
Note: The object method cannot be defined using the index method.

5. dynamically add and delete attributes and Methods
1) For an instantiated object, we can dynamically add and delete its attributes and methods. The syntax is as follows (assuming the object instance is obj ):
Dynamically add Object Attributes
Obj. newPropertyName = value;
Dynamically add object Methods
Obj. newMethodName = method OR = function (arg1 ,..., ArgN ){}
Dynamically Delete Object Attributes
Delete obj. propertyName
Dynamic Object deletion method
Delete obj. methodName

2) Example:
Function User (name ){
This. name = name;
This. age = 18;
}
Var user = new User ("user1 ");
User. sister = "susan ";
Alert (user. sister); // run through
Delete user. sister;
Alert (user. sister); // error: the object does not support this attribute

User. getMotherName = function () {return "mary ";}
Alert (user. getMotherName (); // run through
Delete user. getMotherName;
Alert (user. getMotherName (); // error: the object does not support this method

Iv. Summary

1. The custom object mechanism is one of the most attractive JS mechanisms. For C ++ and Java programmers, this is amazing!
2. There are two ways to create an object: Object initializer and constructor.
3. Object Attributes and methods have visibility constraints. attributes and methods with different visibility have different definitions.

5. Application Cases

The following is an application case: Online Shopping Mall
Steps for implementing the application case:
1. Scenario Design

1) logon scenario

2) Shopping scenarios

3) Settlement Scenario

2. Interface Design

1) logon page

2) Shopping page

3) settlement page

3. Class diagram design

4. Code Implementation

1) Product class

2) ShoppingCart class

3) ShoppingSession class

4) ShoppingCartParser class

 

 

 

This article is reproduced, the original address: http://www.ccvita.com/94.html Author: kimi Chen.