As a front end, this article will start from the most basic part

preface

Most object-oriented programming languages support classes and class inheritance, but JavaScript does not support these features, because the creators of JavaScript did not design the JS language with C, Java classes, The Javascript language is actually a hybrid of (simplified) functional programming and (simplified) object-oriented programming. It is not a true object-oriented programming (OOP) language, and its syntax originally did not have classes. From ES1 to ES5, developers have used various approaches to implement similar class features, finally introducing class features in ES6.

object-oriented

To understand classes, we first need to understand the idea of object-oriented programming.

Object Oriented is a new programming method, or a new programming specification. Its basic idea is to use the basic concepts of Object, class, inheritance, encapsulation, polymorphism and so on to design programs. The software system is constructed from the objects that exist objectively in the real world, and the natural thinking mode of human beings is used as far as possible in the system construction.

object

Object is an entity used to describe objective things in the system, and it is a basic unit of the system. An object consists of a set of properties and a set of services (methods) that operate on that set of properties.

Class instantiation generates objects. The life cycle of an object consists of three phases: generation, use, and elimination.

class

A class is a set of objects with the same attributes and methods. It provides a unified abstract description for all objects belonging to the class, including two main parts of attributes and methods. In an object-oriented programming language, a class is an independent program unit that should have a class name and include two main parts, properties and methods.

ES5 class implementation

In ES5 and earlier versions, there is no concept of a class. The way to approximate a class is to create a custom type. First, create a constructor that defines the properties of the class. Finally, use the new operator to create an instance of the class, which is an object.

// constructor
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// Add a method to the constructor prototype
Person.prototype.running = function() {
  console.log(this.name + this.age + "running");
}
// instantiate the object
var p = new Person("blend".18);
p.running(); 
Copy the code

Inheritance in ES5

Inheritance in ES5 requires several steps to implement, as shown in the following example:

// Shape - superclass
function Shape(Length, width) {
  this.length =length ;
  this.width = width;
}

// Method of the parent class
Shape.prototype.getArea = function() {
  return this.length*this.width
};

// Rectangle - Subclass (Rectangle)
function Rectangle(length) {
  Shape.call(this,length,length); // call super constructor.
}

// Subclasses inherit from their parent class
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle? ',
  rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape? ',
  rect instanceof Shape); // true
rect.getArea(1.1); // Outputs, '1'
Copy the code

ES6 classes in the

ES6 introduced the class feature, you can directly use the class keyword for class declaration, but in fact ES6 class declaration is based on ES5 custom type declaration syntax sugar, typeof

Person ultimately returns function, so the class declaration in ES6 actually creates a function that behaves like a constructor method. 👉 Take an in-depth look at classes in JavaScript

class Person {
    // Equivalent to the ES5 constructor
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
   // Equivalent to person.prototype.running
  running() {
    console.log(this.name + this.age + "running");
  }
   // Static method
  static create(name,age){
        return new Person(name,age)
    }
}

const p = new Person("blend".18);
p.running();
Copy the code

⚠ ️ features:

  1. All methods in a class are not enumerable

  2. The function must be called with the keyword new

  3. Static members can be defined using the static keyword. Static methods can only be called directly from a class, not from an instance object

Inheritance in ES6

ES6 uses the extends keyword to specify functions that a class inherits, and the super() method gives access to the constructor of the parent class.

/ / parent class
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  running() {
    console.log(this.name, this.age, "running"); }}/ / subclass
class Student extends Person {
  constructor(name, age, sno, score) {
    super(name, age);
    this.sno = sno;
    this.score = score;
  }

  studying() {
    console.log(this.name, this.age, this.sno, this.score, "studing"); }}const stu = new Student1("why".18.110.100);
stu.studying();
Copy the code

❗ ️ note:

  1. In constructor, a subclass must initialize its parent class by calling its parent class’s constructor via super, or an error will be reported.
  2. Always call super() before the constructor calls this, which initializes this.

Private variables

The advent of class in ES6 brings JS closer to traditional OOP languages. But one of the biggest problems is private variables, which are only accessible inside a class, not outside it. How is this implemented in ES6?

Check out these blogs:

👉 private variables in JavaScript

👉ES6 series of private variable implementation