How does JavaScript implement inheritance?

1. Why do you need inheritance?

Let's look at a piece of code first:

    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

Instance objects are created through constructors. Person is the constructor of zs and ls instance objects. All Person objects have a money method with similar functions. When the two instances of zs and ls access the method of the constructor, each instance object will open up a separate space in memory to store this method. They occupy different memory spaces, which will lead to the problem of memory waste.

Therefore, we need to use inheritance.

Inheritance is a way to allow one object to access the properties and methods in another object.

2. Inheritance in JavaScript:

① Prototype chain inheritance:

The prototype of a subtype is an instance object of the supertype. Instantiate the parent constructor, point the prototype of the subclass to the instance of the parent class, and the subclass can call the private properties and public methods on the prototype object of the parent class.

    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)

 The parent constructor Person is instantiated to create an instance object of the parent constructor. The instance object of the parent constructor and the prototype object of the parent constructor are at two different memory addresses and are two different objects.

Through Student.prototype = new Person(), the instantiated object is assigned to the prototype object Student.prototype of the sub-constructor, which is equivalent to letting Student.prototype point to the instance object of Person. The instance object of Person, the prototype object of Person can be accessed through the instance object.__proto__. There is a "money" method in the prototype object of Person, and the instance object can use this method. The Student prototype object points to the instance object of Person, so the Student constructor can use the method of "making money" to achieve inheritance.

When the parent class adds a new prototype method or prototype property, the subclass can access it. If you want to add new properties and methods to the subclass, you must execute it after writing Student.prototype = new Person().

② Use the parent constructor to inherit:

Call the parent constructor and modify this in the parent constructor to point to the child constructor.

    // 利用父构造函数继承属性并且添加属性
    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)

The this in the parent constructor Person points to the object instance of the parent constructor, and the this of the child constructor Student points to the object instance of the child constructor.

The child constructor calls the parent constructor Person through Person.call(this) and changes the this of the parent constructor object instance to point to the object instance of the child constructor. At this point, the child constructor Student can use the properties in the parent constructor Person to implement inheritance.

③ class inheritance

In ES6, classes are defined through the class keyword, and subclasses can inherit the parent class through extends.

   // 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)