構造関数とclassの関連と区別

   function Person(name) {
      this.name = name
      this.sayName = function() {
        console.log(this.name)
      }
    }
    const p1 = new Person(' ')
    const p2 = new Person(' ')
    p1.sayName() //   
    p2.sayName() //  
    console.log(p1.sayName === p2.sayName) //false
    console.log(Person.prototype)
    /*
     * {constructor: ƒ}
     *  constructor: ƒ Person(name)
     *  __proto__: Object
     *  
     * */

上記の印刷結果から、インスタンスを作成するたびにsayName関数が再作成され、実行するとパフォーマンスが低下することがわかります.
 

   class Student {
      constructor(name) {
        this.name = name
      }
      sayName() {
        console.log(this.name)
      }
    }
    const p3 = new Student(' ')
    const p4 = new Student(' ')
    p3.sayName() //  
    p4.sayName() //  
    console.log(p3.sayName === p4.sayName) // true
    console.log(Student.prototype)
    /*
    *{constructor: ƒ, sayName: ƒ}
    constructor: ƒ Student(name),
    sayName: ƒ sayName(),
    __proto__: Object
    */

ここで、クラスの関数はprototypeに作成され、各インスタンスのsyaNameメソッドは同じアドレス、すなわち同じメソッドを指し、構造関数に比べてパフォーマンスが向上することがわかります.
次は両者の類似点です.これはインスタンスを指しています

  function Person(name) {
      this.name = name
      this.sayName = function() {
        console.log(this)
      }
      this.sayHello = function() {
        const check = this.sayName
        check()
      }
    }
    const p1 = new Person(' ')
    const p2 = new Person(' ')
    p1.sayName() // Person {name: " ", sayName: ƒ, sayHello: ƒ}
    p2.sayName() // Person {name: " ", sayName: ƒ, sayHello: ƒ}
    p1.sayHello() // undefiend

 

  class Student {
      constructor(name) {
        this.name = name
      }
      sayName() {
        console.log(this)
      }
      sayHello() {
        const checkThis = this.sayName
        checkThis()
      }
      sayBind() {
        const checkThisBind = this.sayName.bind(this)
        checkThisBind()
      }
    }
    const p5 = new Student(' ')
    const p6 = new Student(' ')
    p5.sayName() // Student {name: " "}
    p6.sayName() // Student {name: " "}
    p5.sayHello() // undefiend    react this
    p5.sayBind() // Student {name: " "}