Overview of basic object-oriented JavaScript knowledge (1)

JavaScript has become the basis for front-end development because of the well-developed libraries such as jQuery and MooTools. However, it is extremely important to pay attention to the advanced concepts used in these excellent libraries. Why? As a Web developer, we must treat the latest programming trends and try to push those trends to the extreme without discrimination. Otherwise, there will be no innovation in the Web development field. Therefore, we may take some time to understand the basic knowledge of JavaScript object-oriented programming, including classes, inheritance, and scope.

Class

Before learning how to implement the class into code, we may discuss what the class is and why it is necessary to learn/use the class.

As declared in the Java document, "classes are used to create blueprints for objects ." This blueprint is like the actual blueprint used in the house building process. The builder uses a blueprint to evaluate the attributes and functions of the house. Class is a convenient way to indicate object attributes, whether the object is a house, a car or a person. When there is more than one object, the class becomes particularly useful.

For example, we do not use classes to compare two actual objects. This reflects the procedural thinking process, rather than the object-oriented thinking process. We will describe a man named Rob and a little girl named Emillee. We must assume that we do not know anything about the human body, because we do not have a blueprint (class) for use.

Rob:

1. Rob has two elliptical structures on the top of his body, several inches apart. These elliptical structures have a black background with brown in the middle.

2. Rob has two structures that are relatively parallel to the ground and seem to indicate the most vertical part of the human body, which is still part of the base of the body.

3. Rob has two attachments that extend from the other two. These seem to be used to capture objects. They seem to be relatively large.

4. Rob's height is about 6 feet.

5. Rob unconsciously inhaled oxygen and converted oxygen into carbon dioxide.

Emilee:

1. Emillee has two elliptical structures on the top of the body, several inches apart. These elliptical structures have a black background with blue in the middle.

2. Emillee has two structures that are relatively parallel to the ground and seem to indicate the most vertical part of the human body, which is still part of the base of the body.

3. Emillee has two attachments that extend from the other two. These seem to be used to capture objects. They seem to be relatively small.

4. The height of Emillee is approximately 1.5 feet.

5. Emillee unconsciously inhale oxygen and converts oxygen into carbon dioxide.

Describing a person's 1) eyes, 2) shoulders, 3) Hands, 4) height, and 5) Breathing has a lot of work to do. Note: we have to give almost identical views twice because we don't have a blueprint to use. Although it is not difficult to describe two people, what if we want to describe 100 people, 1000 people or 1 million people? There must be a more efficient way to describe objects with similar properties: This is the highlight of the class.

We may wish to use the object-oriented concept to reconsider the previous example. Since we describe men and girls, we know they are all human beings. So create a simple blueprint for humans first.

Humans:

1. The upper part of the body has two elliptical structures. These elliptical structures have a black background with different colors in the middle. We call it eyes.

2. There are two structures that are relatively parallel to the ground and seem to indicate the most vertical part of the human body, which is still part of the base of the body. We call it shoulder.

3. There are two attachments that extend from the other two. These seem to be used to capture objects. They are of different sizes. We call it hands.

4. The height varies depending on age and other factors. We call it height.

5. unconsciously inhale oxygen and convert oxygen into carbon dioxide. We call it breathing.

So we have declared that the attribute of humans is that they have eyes, shoulders, hands, and height. We have also declared that these attributes may be different. After defining the human blueprint and declaring Rob and Emillee as humans, we can apply known attributes about humans to Rob and Emillee.

Rob is a human.

1. Rob has brown eyes

2. Rob has shoulders

3. Rob has big hands

4. Rob is 6 inch tall.

5. Rob will breathe

Emillee is a human.

1. Emillee has blue eyes

2. Emillee has shoulders

3. Emillee has little hands

4. Emillee height 1.5 feet

5. Emillee breathing

As long as we explicitly declare that Rob and Emillee are humans, we can apply the attributes and functions related to humans directly to Rob and Emillee. This allows us to avoid redefining all parts of the body, while allowing us to efficiently describe the important differences between the two objects.

The following are examples of classes and objects (instances named classes) so that you can understand the relationship between them.

Student (Student)

◆ Attributes: grade, age, date of birth, and student ID (SSID)

◆ Function: calculate the average grade score, view the absence of courses, and update the exercise comment

Class Employee)

◆ Attributes: employer ID (EIN), hourly salary, contact number, and insurance

◆ Function: Set salary, view work efficiency, and obtain resume

Computer)

◆ Attributes: processor, host, and display

◆ Function: Start, shut down, and restart

Well, we have understood the concept behind the class. We may wish to apply what we know to JavaScript. Unlike languages including PHP and C ++, JavaScript does not have class data types. However, if we use JavaScript flexibility, it is easy to use functions to simulate classes.

In the previous example, class is used to represent students.

When creating a class, you must know the attributes/functions (also called methods) of the class. You must use a value to initialize the property.

 
 

  
  
Function Student (name, gender, age, grade, teacher)
  
  
{
  
  
This. name = name;
  
  
This. gender = gender;
  
  
This. age = age;
  
  
This. grade = grade;
  
  
This. teacher = teacher;
  
  
}
  
  
Var bob = new Student ("bob", "male", 15, 10, "Marlow ");
  
  
Alert (bob. age); // output 15
  
  
Var susan = new Student ("susan", "female", 10, 5, "Gresham ");
  
  
Alert (susan. gender); // output 'female'
 
 

We can see from this example that the class instance uses the new operator for initialization. Class attributes and methods are accessed using the. (dot) operator. So to get the attribute age of the Student class instance named bob, we only need to use bob. age. Similarly, we created an instance of the Student class and assigned it to susan. To get susan's gender, we only need to use susan. gender. Class brings huge benefits in code readability: without any programming experience, you can deduce that bob. age is bob's age.

However, the previous example has two disadvantages (but it is easy to fix.

1) any statement can be used as an alias class attribute.

2) parameters must be passed in a certain order.