Class in JavaScript _ javascript tips-js tutorial

This article mainly introduces classes in JavaScript in detail. This article describes the definition of classes in JavaScript, Constructor (Constructor) in JavaScript, and Class name, for more information about how to use Class in JavaScript, see Object Oriented Programming ). However, the classes in JavaScript are different from those in Java, and their definitions and usage are different.

Class Definition in JavaScript

In JavaScript, all objects derived from the same prototype constitute a class. That is, classes in JavaScript are the concept of an object set, if two objects have the same prototype, they belong to the same class. Classes in JavaScript do not even need class names. The following code is used as an example:

The Code is as follows:

Var p = {x: 42 };
Var a = Object. create (p );
Var B = Object. create (p );
Console. log (a = B); // false
Console. log (Object. getPrototypeOf (a) === Object. getPrototypeOf (B); // true

In the above example, objects a and B have the same prototype p, so a and B belong to the same class (although this class has no class name ), they inherit property x with a value of 42 from the prototype object p.

In this example, we can see that the role of a prototype object is equivalent to a template, and multiple objects can be derived/created from it. Its position is the same as that of Class code in Java, is the core of class definition in JavaScript. In the following example, the prototype object looks more like the class code:

The Code is as follows:

Var p = {
INCREMENT_BY: 1,
Increment: function (x ){
Return x + this. INCREMENT_BY;
}
}
Var a = Object. create (p );
Var B = Object. create (p );
Console. log (a. increment (7); // 8
Console. log (B. increment (9); // 10

In the preceding example, the prototype object p defines a property (INCREMENT_BY) with a value of 1 and a function named increment; objects a and B obtain the INCREMENT_BY and increment functions from the p template. When calling the increment Function of object a or object B, JavaScript will try to obtain the INCREMENT_BY value (this. INCREMENT_BY); Because INCREMENT_BY is obtained from p, the values are all 1-variables obtained from the template with the same values, similar to the static variable in Java, the INCREMENT_BY variable is named in the preceding example with all uppercase characters.

In the preceding example, all the objects created from template p (these objects belong to the same class) have the same attributes and behaviors. But in fact, for different objects of the same class, apart from the attributes/behaviors defined by the class, they often have some special attributes and behaviors. Therefore, if you need to use the prototype template as a class, you must customize each derived object:

The Code is as follows:

Var p = {
INCREMENT_BY: 1,
Increment: function (x ){
Return x + this. INCREMENT_BY + this. custom_increment_by;
}
}
Var a = Object. create (p );
Var B = Object. create (p );
A. custom_increment_by = 0;
B. custom_increment_by = 1;
Console. log (a. increment (7); // 8
Console. log (B. increment (9); // 11

In this example, the objects a and B Created from template p have a variable custom_increment_by with different values, and their increment () the final result of this function is related to the value of custom_increment_by. In general, the work of customizing new objects is usually carried out in a unified function:

The Code is as follows:

Var p = {
INCREMENT_BY: 1,
Increment: function (x ){
Return x + this. INCREMENT_BY + this. custom_increment_by;
}
}
Function getIncrementalClassObject (customIncrementByValue ){
Var incrementalObj = Object. create (p );
IncrementalObj. custom_increment_by = customIncrementByValue;
Return incrementalObj;
}
Var a = getIncrementalClassObject (0 );
Var B = getIncrementalClassObject (1 );
Console. log (a. increment (7); // 8
Console. log (B. increment (9); // 11

In this way, a class is defined through the prototype object p and getIncrementalClassObject (): You can call the getIncrementalClassObject () function to obtain that the prototype object is a p object, you can customize the newly created objects when calling the getIncrementalClassObject () function. It is worth noting that this defined class does not have a class name. To facilitate the description, it should be called Incremental.

Looking back at the work done in the getIncrementalClassObject () function, we can see that the process of creating an object from the Incremental class is as follows:

1. Create an empty object and define its prototype as p.
2. Customize the new empty object based on different parameter values.
3. Return the custom object.

In JavaScript, you can use Constructor to quickly define classes and create new objects.

Constructor (Constructor) in JavaScript)

From the above Incremental class example, we can see that defining a new class requires two parts of code: creating a prototype object as a template, creating a UDF to initialize the new object; creating an object from a class goes through three steps: specifying the prototype object of the new object, customizing/initializing the new object, and returning the new object. In JavaScript, all of this can be done through Constructor (Constructor.

Constructor in JavaScript is a function that initializes new objects. prototype of this Constructor function is used as a template to create new objects. The Incremental class is still described as an example. After the Constructor is used to rewrite the code, it is like this:

The Code is as follows:

Function Incremental (customIncrementByValue ){
This. custom_increment_by = customIncrementByValue;
}
Incremental. prototype = {
INCREMENT_BY: 1,
Increment: function (x ){
Return x + this. INCREMENT_BY + this. custom_increment_by;
}
}

Var a = new Incremental (0 );
Var B = new Incremental (1 );
Console. log (a. increment (7); // 8
Console. log (B. increment (9); // 11

Using the new keyword and the Constructor function to create a new object actually goes through the following stages:

Create a new empty object.

1. Point the prototype object of this object to the prototype attribute of the constructor function.
2. Use this object as the this parameter and execute the constructor function.
3. This is the same as the work done in the previous getIncrementalClassObject () function.

Class Name

When a Constructor is used to create an object, the corresponding object also has a "Class Name", which can be verified from the results of the instanceof OPERATOR:

The Code is as follows:

Console. log (a instanceof Incremental); // true
Console. log (B instanceof Incremental); // true

However, the instanceof operator does not determine whether an object is created by the Incremental constructor. The instanceof operator only determines whether the object's prototype is Incremental. prototype. When two constructors with the same prototype exist, the instanceof operator returns true without distinguishing which constructor is used to create an object.

The Code is as follows:

Function incremental (customIncrementByValue ){
This. custom_increment_by = customIncrementByValue + 3;
}
Incremental2.prototype = Incremental. prototype;
Console. log (a instanceof incremental); // true