¿Cómo implementa JavaScript la herencia?

1. ¿Por qué necesita herencia?

Veamos primero un fragmento de código:

    function Person(name, age) {
      this.name = name
      this.age = age
      this.money = function () {
        console.log('赚钱')
      }
    }
    var zs = new Person()
    var ls = new Person()
    console.log(zs.name === ls.name) //true
    console.log(zs.money === ls.money) //false

Los objetos de instancia se crean a través de constructores. Person es el constructor de los objetos de instancia zs y ls. Todos los objetos Person tienen un método de dinero con funciones similares. Cuando las dos instancias de zs y ls acceden al método del constructor, cada objeto de instancia abrirá un espacio separado en la memoria para almacenar este método. Ocupan diferentes espacios de memoria, lo que conducirá al problema del desperdicio de memoria.

Por lo tanto, necesitamos usar la herencia.

La herencia es una forma de permitir que un objeto acceda a las propiedades y métodos de otro objeto.

2. Herencia en JavaScript:

① Herencia de cadena prototipo:

El prototipo de un subtipo es un objeto instancia del supertipo. Crea una instancia del constructor principal, apunta el prototipo de la subclase a la instancia de la clase principal y la subclase puede llamar a las propiedades privadas y los métodos públicos en el objeto prototipo de la clase principal.

    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.money = function () {
      console.log('赚钱')
    }
    function Student(name, age) {
      Person.call(this, name, age)
    }
    Student.prototype = new Person()
    // Student的原型对象指向Person的实例对象就可以访问Person里面的原型对象，Person的原型对象上有money的方法就可以访问 
    Student.prototype.study = function () {
      console.log('学习')
    }
    var zs = new Student('zs', 18)
    console.log(zs)

 Se crea una instancia del constructor principal Person para crear un objeto de instancia del constructor principal. El objeto de instancia del constructor padre y el objeto prototipo del constructor padre están en dos direcciones de memoria diferentes y son dos objetos diferentes.

A través de Student.prototype = new Person(), el objeto instanciado se asigna al objeto prototipo Student.prototype del subconstructor, lo que equivale a dejar que Student.prototype apunte al objeto de instancia de Person. Se puede acceder al objeto de instancia de Persona, al objeto prototipo de Persona a través del objeto de instancia.__proto__. Hay un método de "dinero" en el objeto prototipo de Person, y el objeto de instancia puede usar este método. El objeto prototipo de Estudiante apunta al objeto de instancia de Persona, por lo que el constructor de Estudiante puede usar el método de "ganar dinero" para lograr la herencia.

Cuando la clase principal agrega un nuevo método prototipo o propiedad prototipo, la subclase puede acceder a él. Si desea agregar nuevas propiedades y métodos a la subclase, debe ejecutarlo después de escribir Student.prototype = new Person().

② Use el constructor padre para heredar:

Llame al constructor principal y modifique esto en el constructor principal para que apunte al constructor secundario.

    // 利用父构造函数继承属性并且添加属性
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    function Student(name, age, sex) {
      // 继承Person的属性  
      // 用call方法改变this指向，让Person里的this指向Student
      Person.call(this, name, age)
      // 添加sex属性
      this.sex = sex
    }
    var student = new Student('zs', 18, '男')
    console.log(student)

El this en el constructor principal Person apunta a la instancia de objeto del constructor principal, y el this del constructor secundario Student apunta a la instancia de objeto del constructor secundario.

El constructor secundario llama al constructor principal Person a través de Person.call(this) y cambia el this de la instancia del objeto del constructor principal para que apunte a la instancia del objeto del constructor secundario. En este punto, el constructor secundario Student puede usar las propiedades del constructor principal Person para implementar la herencia.

③ herencia de clase

En ES6, las clases se definen a través de la palabra clave class y las subclases pueden heredar la clase principal a través de extensiones.

   // Person类  
    class Person {
      constructor(name, age, gender) {
        this.name = name
        this.age = age
        this.gender = gender
      }
      learn() {
        console.log('学习')
      }
    }
    var zs = new Person()
    console.log(zs)
   
    //es6  student继承Person类   extends
    class Student extends Person {
      constructor(name, age, gender) {
        super(name, age, gender)
      }
    }
    var student = new Student()
    console.log(student)