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