class

JavaScript Classes – How They Work with Use Case Example

• JavaScript still follows a prototype-based inheritance model. Classes in JavaScript are syntactic sugar over the prototype-based inheritance model which we use to implement OOP concepts. JavaScript 仍然遵循基于原型的继承模型。 JavaScript 中的类是我们用来实现 OOP 概念的基于原型的继承模型的语法糖。

• Before classes, we used constructor functions to do OOP in JavaScript. class被引入（EcmaScript 2015 (ES6) ）之前，使用构造函数在 JavaScript 中进行 OOP。

// Pen Constructor function
function Pen(name, color, price) {
  this.name = name;
  this.color = color;
  this.price = price;
}

const pen1 = new Pen("Marker", "Blue", "$3");
console.log(pen1);

/**
 * we want to add a new function to the Pen constructor.
 * To do this we need to add the function into the prototype property of Pen.
*/
Pen.prototype.showPrice = function(){
  console.log(`Price of ${this.name} is ${this.price}`);
}

pen1.showPrice();

• We can re-create the above example with the help of the class keyword.

class Pen {
  constructor(name, color, price){
    this.name = name;
    this.color = color; 
    this.price = price;
  }
  
  showPrice(){
    console.log(`Price of ${this.name} is ${this.price}`);
  }
}

const pen1 = new Pen("Marker", "Blue", "$3");
pen1.showPrice();

• attributes、abstract functions

• extends、super()

An Easy Guide To Understanding Classes In JavaScript

• classes are Functions

• All three methods below are valid ways to implement a class in JavaScript.

// A class declaration
class Person_Dec {
  constructor(name, gender) {
    this.name = name;
    this.logo = gender;
  }
}

// An Unnamed class expression
const Person_Exp = {
  constructor(name, gender) {
    this.name = name;
    this.logo = gender;
  }
}

// Named class expression
const Person_Exp2 = class Person_Exp {
  constructor(name, gender) {
    this.name = name;
    this.logo = gender;
  }
}

• classes are Objects

  在 JavaScript 中，Class 是一个特殊的函数，JavaScript 中的所有函数都是对象，因此 JavaScript 类是一个对象。 JavaScript 仍然使用原型继承。然而，类提供了一种新的和改进的方法来设置对象原型。

• 将 static 关键字与方法一起使用，可以为该类创建一个静态方法。静态方法不能被类的实例继承，因此不能用类的实例调用它们。 Static methods aren't called on instances of the class. Instead, they're called on the class itself. 但是可以用该类的子类直接调用。

• super。The super keyword is used to access and call functions on an object's parent.

  • super.x. access the property of the parent class
  • super(). Calling super() method inside the constructor of a subclass would call the constructor of the parent class.

tip

子类constructor使用this前必须调用super方法。The super method must be called in the constructor in a class before the this keyword is made available else we get a reference error.

• classes在实际中的应用

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}