Make a summary every day, persistence is victory!

/** @date 2021-07-10 @description JS */Copy the code

One (sequence)

The class in JavaScript is not like the class in other class-oriented languages. The class in JS is just a kind of association, which is realized through the prototype mechanism. Today, several inheritance methods are summarized

Ii (Inheritance)

  1. Archetypal chain inheritance: will children ofprototypeProperties are overwritten to instance objects of the parent class, so that subclasses can use properties and methods in the parent class and override properties themselves
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.getInfo = function () {
  console.log(`i'm ${this.name}, ${this.age} years old`);
};

function Student(name, age, profession) {
  this.name = name;
  this.age = age;
  this.profession = profession;
}

Student.prototype = new Person();

const student1 = new Student('E1e', 18, 'student');
const student2 = new Student('wy', 24, 'student');

student1.__proto__.getInfo = function () {
  console.log(
    `i'm ${this.name}, ${this.age} years old, i'm a ${this.profession}, hhh`
  );
};

student1.getInfo(); // 'i'm E1e, 18 years old, i'm a student, hhh'
student2.getInfo(); 'i'm wy, 24 years old, i'm a student, hhh'
Copy the code

However, overriding a method on a subclass stereotype causes all subclass instance methods to be overridden and, for example, student1 above, has its own name, age, and __proto__ attributes

  1. Constructor inheritance: Using constructors to implement inheritance, the core code is subclassedperformSuperclass constructor, and change the this pointer
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.getInfo = function () {
    console.log(`i'm ${this.name}, ${this.age} years old`);
  };
}
function Student(name, age) {
  Person.call(this, name, age);
}

const student = new Student('E1e', 18);
student.getInfo(); // 'i'm E1e, 18 years old'
Copy the code

This method of inheritance is very simple, which is to change this in the subclass and call the parent class function, so that the subclass has the properties and methods of the parent class, but can not inherit the properties and methods of the parent class prototype, and each subclass instance has to call the parent class function, which is a serious performance consumption

  1. Combination inheritance: the combination of prototype chain inheritance and constructor inheritance to achieve inheritance, with the prototype chain to achieve inheritance on the parent class prototype, with the constructor to achieve the parent class itself inheritance
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.getInfo = function () {
  console.log(`i'm ${this.name}, ${this.age} years old`);
};

function Student(name, age, profession) {
  Person.call(this, name, age, profession);
}

Student.prototype = new Person();

const student = new Student('E1e', 18, 'student');

student.getInfo();
Copy the code

Although this inherits the attributes and methods of the parent class itself and the prototype, it also has the disadvantages of the previous two inheritance methods

  1. Primitive inheritance: Using the object.create method, the inherited Object is specified as the prototype of the child Object
const person = {
    name: 'E1e',
    age: 18
}

const anotherPerson = Object.create(person);
anotherPerson.name = 'wy';
anotherPerson.age = 24;
Copy the code

The Object. Create method is used to specify the prototype to achieve the original type of inheritance, but this can not pass parameters, and easy to modify the properties of the prototype method, and so on, and affect all instance objects

  1. Parasitic composite inheritance: Similar to composite inheritance, except that when setting the prototype property of a subclass, the object.create method is used
function Person(name, age) { this.name = name; this.age = age; } Person.prototype.getInfo = function () { console.log(`i'm ${this.name}, ${this.age} years old`); }; function Student() { Person.call(this, ... arguments); } Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; const student = new Student('E1e', 18); student.getInfo(); // 'i'm E1e, 18 years old'Copy the code

So this is one of the inheritance approaches that we’ve finally implemented based on ES5, and you can write down each of the previous approaches and look at each of the subclasses and the instance objects, and you’ll see that this approach looks the best

  1. Using ES6 classes is also based on ES5 inheritance, which can be regarded as a syntactic sugar. This article will summarize the differences between class and ES5 inheritance
A. Classes declared by let/const have the same existence as variables declared by let/const TDZ (temporary dead zone) B. Strict pattern is used within class C. All internal methods in class are non-enumerable (both static and instance methods) D. To use class, you must use newCopy the code