Detailed introduction to classes in JavaScript_javascript skills

In JavaScript, you can use classes to implement Object Oriented Programming. However, classes in JavaScript are different from those in Java, and their corresponding definitions and uses are also different.

Definition of classes in JavaScript

In JavaScript, all objects derived from the same prototype object (prototype) form a class; that is to say, a class in JavaScript is the concept of a collection of objects. If two objects have the same prototype, Then they belong to the same class; classes in JavaScript don't even need a class name. Take the following code as an example:

Copy code 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 object (prototype) p, so a and b belong to the same class (although neither this class has a class name), and they inherit the value from the prototype object p as 42 attribute x.

As you can see from this example, the prototype object functions as a template, and multiple objects can be derived/created from it. Its status is the same as the class code in the Java language. It is a class in JavaScript. The core of the definition. The prototype object in the following example looks more like class code:

Copy 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 above 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 template p. When calling the increment function of object a or b, JavaScript will try to get the INCREMENT_BY value of a or b (this.INCREMENT_BY); since INCREMENT_BY is obtained from p, its value is all 1 - obtained from the template, the value They are all the same variables, similar to static variables in Java, so in the above example, all uppercase characters are used when naming the INCREMENT_BY variable.

In the above example, all objects created from template p (those objects belonging to the same class) have exactly the same properties and behaviors. But in fact, for different objects of the same class, in addition to having the attributes/behavior defined by the class, they often have some unique attributes and behaviors. Therefore, if you need to use the prototype template as a class, you must customize each object derived from it:

Copy code 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, objects a and b created from template p have a variable custom_increment_by whose values ​​are not necessarily equal to each other, and the final result of their increment() function is related to the value of custom_increment_by. Generally speaking, customizing new objects is often done in a unified function:

Copy code 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, the definition of a class is completed through the prototype object p and the getIncrementalClassObject() function: you can obtain objects whose prototype objects are p by calling the getIncrementalClassObject() function, and these new objects can be created during the call of the getIncrementalClassObject() function. Make some customizations. It is worth noting that this defined class does not have a class name at this time. For the convenience of description, let's call it Incremental.

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

1. Create an empty object and define its prototype object as p.
2. Customize this newly created empty object according to different parameter values.
3. Return the new object that has been customized.

In JavaScript, you can quickly complete the definition of a class and the creation of new objects by using Constructor (constructor).

Constructor in JavaScript

As you can see from the above example of the Incremental class, defining a new class requires two parts of code: creating a prototype object as a template and creating a custom function to initialize the new object; while creating a new object from a class goes through Three processes: specifying the prototype object of the new object, customizing/initializing the new object, and returning the new object. In JavaScript, all this can be done through Constructor (constructor).

Constructor in JavaScript is a function that is responsible for initializing new objects; and the prototype of this Constructor function is used as a template to create new objects. Still taking the above Incremental class as an example, after using Constructor to rewrite the code, it will look like this:

Copy code 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

The process of using the Constructor function to create a new object through the new keyword 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 this parameter to execute the constructor function.
3. This is the same work done in the previous getIncrementalClassObject() function.

Class name

When using Constructor to create an object, the corresponding object also has a "class name", which can be verified from the result of the instanceof operator:

Copy code 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 the object is created by the Incremental constructor. The instanceof operator only determines whether the object's prototype object is Incremental.prototype. When there are two constructors with the same prototype, the instanceof operator will return true uniformly without distinguishing which constructor is used to create the object.

Copy code The code is as follows:

function Incremental2(customIncrementByValue){
This.custom_increment_by = customIncrementByValue 3;
}
Incremental2.prototype = Incremental.prototype;
console.log(a instanceof Incremental2);//true