JavaScript's class syntax supports object-oriented programming with a clearer structure. 1. Use the class keyword to define the class, and use constructor() to constructor(). The method is written directly in the class without function. 2. Inheritance is implemented through extends. The subclass must call super() to initialize the parent class. 3. Static methods are defined with static, and private fields are declared to be accessed within the class with #. 4. Classes are not promoted, methods cannot be enumerated by default, and getters and setters are supported.

JavaScript's class syntax is a very basic part of modern front-end development, and it makes object-oriented programming more intuitive. Although JavaScript classes are essentially based on prototype implementations, class provides a clearer and closer to the traditional OOP language writing.

How to define a class?

In JavaScript, use the class keyword to define a class. The basic structure is as follows:

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

  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

• constructor() is a constructor that is automatically called when creating an instance with new .
• The method is written directly in the class without adding function keyword.
• There is no comma separation between methods in the class, otherwise an error will be reported.

You can also create an instance and call a method like this:

 const person = new Person('Alice');
person.sayHello(); // Output: Hello, I'm Alice

Note: The class must be called through new and cannot be executed directly like ordinary functions, otherwise an error will occur.

How to implement inheritance of classes?

JavaScript classes support inheritance through extends , and subclasses can inherit the properties and methods of the parent class. For example, we have a Teacher class inherited from Person :

 class Teacher extends Person {
  constructor(name, subject) {
    super(name); // Super must be called to initialize the constructor of the parent class this.subject = subject;
  }

  teach() {
    console.log(`${this.name} teaches ${this.subject}`);
  }
}

Key points:

• Use extends to specify the inherited parent class.
• super() must be called in constructor of the subclass, otherwise an error will be reported.
• The parameters passed in super() should correspond to the requirements of the parent class constructor.

Call method:

 const teacher = new Teacher('Bob', 'Math');
teacher.sayHello(); // Hello, I'm Bob
teacher.teach(); // Bob teachers Math

How to use static methods and private fields?

Static methods belong to the class itself, not the instance of the class. You can define them with the static keyword:

 class Utils {
  static formatName(name) {
    return name.toUpperCase();
  }
}

console.log(Utils.formatName('alice')); // ALICE

Private fields are declared with # prefix and can only be accessed inside the class:

 class BankAccount {
  #balance = 0;

  deposit(amount) {
    this.#balance = amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount();
account.deposit(100);
console.log(account.getBalance()); // 100
console.log(account.#balance); // Error: SyntaxError

These features help you better encapsulate data and logic.

Class Notes and Frequently Asked Questions

• Classes will not be hoisted : Unlike functions, class declarations will not be hoisted to the top of the scope and must be defined before use.
• Class expressions can also be named or anonymous :

   const Animal = class {};

• Methods in classes cannot be enumerated by default : they can be enumerated through for...in like methods of ordinary objects.
• getter and setter support : get and set can be used in the class to define the accessor for attributes.

Basically that's it. Once you master these basics, you will be more comfortable with handling component state, logical reuse, etc. when using React, Vue or other frameworks.

The above is the detailed content of JavaScript Classes: Syntax and Inheritance. For more information, please follow other related articles on the PHP Chinese website!