Preface
In JavaScript, the implementation of classes is based on the prototype inheritance mechanism.
An important feature of classes in JavaScript is "dynamic inheritance".
Classes and Prototypes
In JavaScript, all instance objects of a class inherit properties from the same prototype object, so the prototype object is the core of the class.
All classes have a common root class/parent class Object, and instance objects of all classes can inherit methods or properties from the Object.prototype prototype. For example, our commonly used toString() method is a method on the Object prototype.
Constructor
When declaring a constructor, use this format:
function Name( formal parameter 1, formal parameter 2....){
Attribute 1;
Attribute 2;....
method 1;
Method 2;
} format, the first letter of the function is capitalized.
Using the keyword new to call the constructor will automatically create a new object, and the prototype property of the constructor is used as the prototype of the object.
Constructor properties
Every JavaScript function can be used as a constructor, because every function automatically has a prototype property, the value of this property is an object, this object contains the only non-enumerable property constructor, the value of the construct property is a function object .
var F = function(){} var p = F.prototype; //The prototype object associated with F var c = p.constructor(); //Prototype-associated functions c === F // =>true
For any function F.prototype.constructor == F
The constructor is the "public identifier" of the class. The constructor that an object usually inherits refers to its constructor. This constructor attribute provides the class for the object.
Class ID
Constructors cannot be used as class identifiers, because the prototype attributes of two constructors may point to the same prototype, and the instances created by these two constructors belong to the same class.
The prototype object is the unique identifier of the class: two objects are instances of the same class if and only if they inherit from the same prototype object.
class and object creation
The following are objects created in three ways:
//The most primitive and simple object creation function simpleInit() { var cuptwo = { name:"cup two", color:"white", material:"mood", showColor:function() { console.log("%s The color is:%s", this.name, this.color); } } return cuptwo; } //Simple creation of objects using the most primitive way function simpleClick(){ let cuptwo = simpleInit(); cuptwo.showColor(); console.log(cuptwo); }
The following is the result of the printed cuptwo:
The following is to instantiate an object through the constructor:
// Create classes using constructors function Cup(name, color, material) { this.name = name this.color = color; this.material = material; //material this.showColor = function () { console.log("%s The color is:%s", this.name, this.color); } this.showMerial = function () { console.log("%s The material is:%s", this.name, this.material); } } // Use new to instantiate an object through the constructor function constructClick() { let cupone =new Cup("cup one", "yellow", "glass"); cupone.showColor(); cupone.showMerial(); console.log("cupone is: ", cupone); console.log(cupone); console.log("Cup prototype is:"); console.log(Cup.prototype); }
In the diagram above we can see each level in the prototype chain of the Cup class.
Use the class method to create classes and objects, the code is as follows:
// class way to create a class class CupA{ constructor(name, color, material){ //Attributes that can be set by passing in externally this.name = name; this.color = color; this.material = material; //properties used internally this.height = 70; this.use = "Tea"; } showCup() { console.log("%s The color is:%s", this.name, this.color); console.log("%s The material is:%s", this.name, this.material); console.log("%s the height of:%d, use:%s", this.height, this.use); } } //Instantiate an object using class function classClick() { let cupthree = new CupA("cup three", "transparent", " steel"); cupthree.showCup(); console.log("cupone is:"); console.log(cupthree); console.log("Cup prototype is:"); console.log(CupA.prototype); }
The picture above is the print result of the prototype prototype of the CupA class