Class in front-end JavaScript

1. Class

A class is a template for creating objects. The method of generating object instances in JavaScript is through constructors, which is quite different from the writing methods of mainstream object-oriented languages ​​( java , C# ), as follows:

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 1);

ES6 provides a writing method that is closer to Java language and introduces the concept of Class（類） as a template for objects. Classes can be defined using the class keyword.

As follows: constructor() is the construction method, and this represents the instance object:

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

The data type of a class is a function, which itself is a constructor pointing to a function:

// ES5 function declaration function Point() {
 //...
}

// ES6 class declaration class Point {
  //....
  constructor() {
  }
}
typeof Point // "function"
Point === Point.prototype.constructor // true

The methods defined in the class are attached to Point.prototype , so the class only provides syntactic sugar, and the essence is still the prototype chain call.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

Point.prototype = {
  //....
  toString()
}
var p = new Point(1, 1);
p.toString() // (1,1)

Another way to define a class is through a class expression

// Unnamed/anonymous class let Point = class {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
};
Point.name // Point

There is an important difference between function declarations and class declarations. Function declarations are hoisted, but class declarations are not hoisted.

> let p = new Point(); // No error will be reported if promoted> function Point() {}
> 
> let p = new Point(); // Error, ReferenceError
> class Point {}
>

1.1 constructor()

constructor() method is the default method of the class, and it is automatically called when new generates an instance object.

A class must have constructor() method. If it is not explicitly defined, the engine will add an empty constructor() by default.

constructor() method returns the instance object (ie this ) by default.

class Point {
}

// Automatically add class Point {
  constructor() {}
}

1.2 Getters and setters

As in ES5 , you can use get and set keywords inside a class to set a storage function and a retrieval function for a property and intercept the storage and access behavior of the property.

class User {
  constructor(name) {
    this.name = name;
  }

  get name() {
    return this.name;
  }

  set name(value) {
    this.name = value;
  }
}

1.3 this

this inside a class method refers to the instance of the class by default. When calling a method with this, you need to use obj.method() , otherwise an error will be reported.

class User {
  constructor(name) {
    this.name = name;
  }
  printName(){
    console.log('Name is ' + this.name)
  }
}
const user = new User('jack')
user.printName() // Name is jack
const { printName } = user;
printName() // Error Cannot read properties of undefined (reading 'name')

If you want to call it separately without error, one way is to call bind(this) in the constructor.

class User {
  constructor(name) {
    this.name = name;
    this.printName = this.printName.bind(this);
  }
  printName(){
    console.log('Name is ' + this.name)
  }
}
const user = new User('jack')
const { printName } = user;
printName() // Name is jack

bind(this) creates a new function and uses the passed this as the context for the function when it is called.

In addition, you can use arrow functions, because this inside an arrow function always refers to the object where it is defined.

class User {
  constructor(name) {
    this.name = name;
  }
  printName = () => {
    console.log('Name is ' + this.name)
  }
}
const user = new User('jack')
const { printName } = user;
printName() // Name is jack

1.4 Static properties

Static properties refer to the properties of the class itself, rather than the properties defined on the instance object this .

class User {
}

User.prop = 1;
User.prop // 1

1.5 Static Methods

You can define static methods in a class. The method will not be inherited by object instances, but will be called directly through the class.

this is used in static methods to point to the class.

class Utils {
  static printInfo() {
     this.info();
  }
  static info() {
     console.log('hello');
  }
}
Utils.printInfo() // hello

Regarding the calling scope restrictions of methods, such as private and public, ES6 does not provide them yet. They are generally adopted through conventions. For example, adding an underscore _print() in front of the method indicates a private method.

2. Inheritance

In Java , class inheritance is implemented through extends . In ES6 , classes can also be inherited through extends .

When inheriting, the subclass must call the super method in constructor method, otherwise an error will be reported when creating a new instance.

class Point3D extends Point {
  constructor(x, y, z) {
    super(x, y); // Call the parent class's constructor(x, y)
    this.z = z;
  }

  toString() {
    return super.toString() + ' ' + this.z ; // Call toString() of the parent class
  }
}

The static methods of the parent class will also be inherited by the child class

class Parent {
  static info() {
    console.log('hello world');
  }
}

class Child extends Parent {
}

Child.info() // hello world

2.1 super keyword

The super function must be executed once in the constructor of the subclass, which represents the constructor of the parent class.

class Parent {}

class Child extends Parent {
  constructor() {
    super();
  }
}

When calling the parent class method through super in a normal method of a subclass, this inside the method points to the current subclass instance.

class Parent {
  constructor() {
    this.x = 1;
    this.y = 10
  }
  printParent() {
    console.log(this.y);
  }
  print() {
    console.log(this.x);
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}

let c = new Child();
c.printParent() // 10
cm() // 2

2.2 _proto_ and prototype

When you first learn JavaScript , it's easy to confuse _proto_ and prototype . First of all, we know that each JS object corresponds to a prototype object and inherits properties and methods from the prototype object.

• prototype is a property of some built-in objects and functions. It is a pointer to an object. The purpose of this object is to contain the properties and methods shared by all instances (we call this object a prototype object).
• _proto_ Every object has this property, which generally points to prototype property of the corresponding constructor.

The following are some built-in objects with prototype:

According to the above description, look at the following code

var obj = {} // equivalent to var obj = new Object()

// obj.__proto__ points to the prototype of the Object constructor
obj.__proto__ === Object.prototype // true 

// obj.toString calls the method inherited from Object.prototype obj.toString === obj.__proto__.toString // true

// Array var arr = []
arr.__proto__ === Array.prototype // true

For function objects, each declared function has both prototype and __proto__ attributes. The created object attribute __proto__ points to the function prototype , and the function's __proto__ points to prototype of the built-in function object (Function).

function Foo(){}
var f = new Foo();
f.__proto__ === Foo.prototype // true
Foo.__proto__ === Function.prototype // true

2.3 __proto__ in inheritance

As a syntactic sugar for constructor functions, classes also have both prototype and __proto__ properties, so there are two inheritance chains at the same time.

• The __proto__ property of a subclass indicates the inheritance of the constructor and always points to the parent class.
• The __proto__ property of the subclass prototype property indicates the inheritance of the method and always points to prototype property of the parent class.
  

class Parent {
}

class Child extends Parent {
}

Child.__proto__ === Parent // true
Child.prototype.__proto__ === Parent.prototype // true

2.4 __proto__ in inherited instances

The __proto__ property of the subclass instance points to prototype of the subclass constructor.

The __proto__ property of the __proto__ property of the subclass instance points to __proto__ property of the parent class instance. In other words, the prototype of the prototype of the subclass is the prototype of the parent class.

class Parent {
}

class Child extends Parent {
}

var p = new Parent();
var c = new Child();

c.__proto__ === p.__proto__ // false
c.__proto__ === Child.prototype // true
c.__proto__.__proto__ === p.__proto__ // true

3. Summary

This is the end of this article about class in front-end JavaScript . For more relevant content about class in JavaScript , please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!