Class in JavaScript describes _javascript tips in detail

In JavaScript, you can use classes (class) to implement Object-oriented programming (object Oriented programming). However, the classes in JavaScript are different from Java, and they are defined and used differently.

Definition of classes in JavaScript

In JavaScript, all objects derived from the same prototype object (prototype) Form a class; that is, the class in JavaScript is the concept of a collection of objects, and if two objects have the same prototype, they belong to the same class The class name is not even required for classes in JavaScript. Take the following code as an example:

Copy Code code 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 example above, objects A and B have the same prototype object (prototype) p, so that A and B belong to the same class (although this class has no class name), and they inherit the property x with a value of 42 from the prototype object p.

As you can see from this example, the role of a prototype object is the equivalent of a template, which can derive/create multiple objects, the same status as class code in the Java language, and is the core of class definitions in JavaScript. The prototype object in the following example will look more like the code of the class:

Copy Code code 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 example above, the prototype object P defines a property (increment_by) with a value of 1 and a function named INCREMENT, and objects A and B obtain the increment_by and INCREMENT functions from the template p. When you call the Increment function of object A or B, JavaScript attempts to get the increment_by value of a or B (this. increment_by); Because Increment_by is obtained from P, its value is 1-a variable that gets the same value from the template, similar to the static class variable in Java (the statics variable), so the example above Increment_ Full uppercase characters are used when the by variable is named.

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

Copy Code code 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 the template p have a variable custom_increment_by that is not necessarily equal to each other, and the final result of the behavior of their increment () function is related to the custom_increment_by value. In general, the task of customizing a new object is often done in a unified function:

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

This completes the definition of a class through the prototype object P and the Getincrementalclassobject () function: You can get the object that the prototype object is p by calling the Getincrementalclassobject () function. These new objects can be customized in the process of invoking the Getincrementalclassobject () function. It is noteworthy that at this time the already defined class has no class name, for convenience of description, let's call it incremental.

Reviewing the work done in the Getincrementalclassobject () function, you can see the process of creating a new object from the incremental class as follows:

1. Create an empty object and define its prototype object as P.
2. Customize the new empty object according to the different parameter values.
3. Returns a new object that has been customized for completion.

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

Constructor (constructors) in JavaScript

As you can see from the example above, the incremental class defining a new class requires two parts of code: Creating a Prototype object as a template, creating a custom function to initialize the new object, and creating a new object from the class undergoes three procedures: specifying a prototype object for the new object, customizing/Initializing the New object, Returns the new object. In JavaScript, all of this can be done by constructor (constructors).

Constructor in JavaScript is a function that assumes responsibility for initializing new objects, and the prototype of this constructor function is used as a template for creating new objects. Still take the incremental class above as an example, after rewriting the code with constructor:

Copy Code code 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 is actually going through the following stages, with the New keyword:

Creates a new, empty object.

1. Point the object's prototype object to the prototype property of the constructor function.
2. Use this object as the this parameter to perform the constructor function.
3. This is the same as the work done in the previous getincrementalclassobject () function.

Class name

When you create an object using constructor, the corresponding object also has the class name, which can be validated from the results of the instanceof operator:

Copy Code code as follows:

Console.log (a instanceof incremental);//true
Console.log (b instanceof incremental);//true

However, the instanceof operator does not judge whether the object is created by the incremental constructor, and the instanceof operator only determines whether the object's prototype object is Incremental.prototype. When there are two prototype-like constructors, the instanceof operator returns true without distinguishing which constructor is used to create the object.

Copy Code code as follows:

function Incremental2 (customincrementbyvalue) {
this.custom_increment_by = Customincrementbyvalue + 3;
}
Incremental2.prototype = Incremental.prototype;
Console.log (a instanceof Incremental2);//true