navigation

[Deep 01] Execution context [Deep 02] Prototype chain [Deep 03] Inheritance [Deep 04] Event loop [Deep 05] Curri Bias function [Deep 06] Function memory [Deep 07] Implicit conversions and operators [Deep 07] Browser caching mechanism (HTTP caching mechanism) [Deep 08] Front-end security [Deep 09] Deep copy [Deep 10] Debounce Throttle [Deep 10] Front-end routing [Deep 12] Front-end modularization [Deep 13] Observer mode Publish subscribe mode Bidirectional data binding [Deep 14] Canvas [Deep 15] webSocket Webpack HTTP and HTTPS CSS- Interview Handwriting Promise

[react] Hooks

[Deployment 01] Nginx [Deployment 02] Docker deployVue project [Deployment 03] gitlab-CI

[source code – Webpack01 – precompiler] AST abstract syntax tree [source code – Webpack02 – Precompiler] Tapable [source code – Webpack03] hand written webpack-compiler simple compilation process [source code] Redux React-redux01 [source] Axios [source] vuex

Prototype chain inheritance

• Point the prototype of the subclass to an instance of the superclass, and change constructor of the subclass to point it back to the subclass, or use the instance of the superclass as the implicit prototype of the instance of the subclass
• Note:
  • After changing prototype, you need to change the pointing of prototype.constructor
• Disadvantages:
  • When creating a subclass instance, you cannot pass parameters to the parent class
  • It is not possible to implement multiple inheritance (inheriting multiple parent classes) because you are assigning prototype directly
  • Multiple instances share the properties of the parent class and the properties on the parent class stereotype. When the properties are of a reference type, the changes between the subclass instances affect each other [especially arrays].
  • To hang properties and methods on a subclass’s prototype, you must change the subclass’s prototype point.
  • Sub.prototype = new Super('woow_wu7') sub.prototype. sex = 'man', otherwise the new reference will be replaced

Prototype Chain inheritance - Principle: Change the prototype.constructor property of the subclass to point to the instance of the parent class. Change the prototype.constructor property of the subclass to point to the parent class again. Prevent references from going wrong) - 2021/07/24 Supplement - Because: Concrete is (child) constructor) = > (child. Prototype. Constructor) = > (the parent class instance constructor, The father. The constructor) = > (father) prototype) constructor) = > father - so: After the modified prototype, Child. The prototype. The constructor to the Father, so the constructor need to refer to the Child - i.e., [child-.prototype = new Father()] Need to modify the Child. The prototype. The constructor to the Child. The prototype. The constructor = Child 】 - disadvantages: 1. 2. Multiple inheritance cannot be realized. 3. Attribute sharing. To hang properties and methods on a subclass's prototype, we need to do this after the subclass's prototype points to an instance of the parent class: Function Sub(address) {this.address =. // Subclass function Sub(address) {this.address = Address} sub.prototype = new Super('woow_wu7') address} sub.prototype = new Super('woow_wu7') address} sub.prototype = new Super('woow_wu7') Cannot achieve multiple inheritance Sub. Prototype. Constructor = Sub / / remember, after the modification of the prototype need to modify the constructor, prevent reference error, don't change, Const Sub = new Sub(' constructor ') // 错 误 : const Sub = new Sub(' constructor ') You can only pass arguments to subclasses, Console. log(sub.address, 'properties of the subclass instance itself ') console.log(sub.sex,' properties of the subclass instance prototype ') console.log(sub.name, 'properties of the subclass instance prototype ') console.log(sub.name, 'Properties on the subclass instance stereotype => properties on the superclass instance ') console.log(sub.age,' properties on the subclass instance stereotype => properties on the superclass instance stereotype ') // Layer upCopy the code

Constructor can also be modified with the following method: sub.prototype = object.create (super.prototype, {// oject. create the second argument represents a property on the generated stereotype // don't forget to respecify constructor: {value: Student}})Copy the code

Inheritance from constructor (classical inheritance)

• How it works: By binding a parent class to an instance of a subclass by calling (this, parameter), and executing the parent class, you replace this in the parent class with an instance of the subclass
• Advantages:
  • Ability to implement multiple inheritance (that is, call multiple parent classes)
  • When you generate a subclass instance, you can pass parameters to the parent class
  • Inherited properties are generated directly on subclass instances, and properties that modify reference types between subclass instances are not affected by each other
• Disadvantages:
  • Properties and methods on the parent instance object stereotype chain cannot be inherited
    • (Because the parent class does not generate an instance of the parent class with the new command and does not change the reference of the subclass prototype, there is no prototype chain inheritance.)
  • The disadvantages of constructors are that both properties and methods are generated on the instance, and each new copy is generated, resulting in a waste of system resources (i.e., no shared properties). For read-only properties that can be shared, they should be on the method prototype chain

Function Super2(age) {this.age = age} super1.prototype.sex = 'man' function Super2(age) {this.age = age} super1.prototype.sex = 'man' function Super2(age) {this.age = age} Function Sub(name, age, address) {super1. call(this, name); Name = name super2. call(this, age) This. Address = address // 错 误 : This. Address = address } const sub = new sub ('woow_wu7', 20, 'hangzhou') // Console. log(sub)Copy the code

Combinatorial inheritance (prototype chain inheritance + borrowing constructor inheritance)

• Composite inheritance: that is, prototype chain inheritance + borrowing constructor inheritance
• Advantages:
  • Both has the advantage of borrowing from the constructor inheritance (passing parameters to the parent class, multiple inheritance, no property sharing)
  • It also has the advantage of stereotype chain inheritance (inheritance of properties on the parent instance and properties and methods on the parent instance stereotype chain, and are shared).
• Disadvantages:
  • The parent constructor is called twice, resulting in the same property or method on both the subclass instance and the subclass instance prototype chain
  • The superclass is called twice, once by the call that borrows from the constructor, and once by the new call that inherits from the prototype chain
  • Because the parent class is called twice, the child class and the parent instance have the same properties and methods on the prototype chain, resulting in waste

Combinative inheritance - borrow constructor inheritance + prototype chain inheritance - Advantages: multiple inheritance, passing arguments to the parent class, some properties not shared, inheriting properties and methods on the prototype chain of the parent class instance - Disadvantages: ！！！！！！ - The parent class is called twice, once as a call from the constructor and once as a new call from the prototype chain - Because the parent class is called twice, the subclass and the instance of the parent class have the same properties and methods on the prototype chain, resulting in a waste of code:  function Super1(name) { this.name = name } function Super2(age) { this.age = age } Super1.prototype.getName = function() { return 'Super1' + this.name } Super2.prototype.getAge = function() { return 'Super2' + this.age } function Sub(name, age, address) {super1.call (this, name); Super2. Call (this, age) this.address = address} sub.prototype = new Super1() There is no pass, in the prototype chain inherit the line, the parent class instance nane property is undefined / / note: Prototype chain inherit this line or not multiple inheritance, (such as cannot inherit Super2 Super1 and prototye) because it is a Sub direct assignment. The prototype. The constructor = Sub / / remember to modify the constructor, back to the Sub, GetAddress = function() {return 'Sub' + this.address} const Sub = new Sub('woow_wu7', 20, 0); 'hangzhou') console.log(sub) composite inheritance New Sub('woow_wu7', 20, 'hangzhou') will execute super.call (this, name)------- to generate name // 'woow_wu7' -2. Sub.prototype = new Super1()Copy the code

Review modular inheritance

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 13px! Important;" / / 1. The parent constructor is called twice, resulting in the same properties and methods on both the subclass instance and on the prototype chain of the subclass instance. Subclass instances also have superName1 properties on the prototype chain // 2. The superclass is called twice, once as a call from the constructor and once as a new call from the prototype chain inheritance. Because the parent class is called twice, the child class and the parent instance have the same properties and methods on the prototype chain, Function Super1(name) {this.supername1 = name} function Super2(name) {this.supername2 = name} function Super2(name) {this.supername2 = name} Super1.prototype.superAge1 = 10 Super2.prototype.superAge2 = 20 function Sub(superName1, superName2, SubName) {// inherit from the constructor // Advantage: you can pass parameters to the parent constructor, multiple inheritance, not shared attributes // disadvantages: Super1.call(this, superName1) super2. call(this, superName1) super1. call(this, superName1) SuperName2) this.subname = subName} // subName = subName; // subName = subName; When generating a subclass instance, you cannot pass parameters to the parent class, and you cannot implement multiple inheritance. When the inherited attribute is a reference type, Subclass instance changes will influence each other between Sub. Prototype = new Super1 (Sub). The prototype. The constructor = Sub Sub. Prototype. SubAge = 30 const Sub = new Sub('super1', 'super2', 'sub') console.log('sub', sub) console.log('sub.superName1', sub.superName1) console.log('sub.superName2', sub.superName2) console.log('sub.subName', sub.subName) console.log('sub.superAge1', sub.superAge1) console.log('sub.subAge', sub.subAge) </script> </body> </html>Copy the code

Parasitic combinatorial inheritance

• Parasitic combination inheritance: It mainly solves the problem of calling the parent class twice in the combination inheritance, which results in the properties of the parent instance in the subclass instance itself, and the properties of the parent instance stereotype in the subclass instance

Parasitic combinatorial inheritance - Main solutions: - In combinative inheritance, the parent class is called multiple times, resulting in the problem that the instance properties of the subclass and the instance prototype chain of the subclass have the same properties - Because the parent class is called twice, call and new, the properties in the constructor are generated twice, Function Super(name) {this.name = name} super.prototype.getName = function() {return 'Super' + this.name} function Sub(name, age) { Super.call(this, Age = age} // sub.prototype = new Super() ---------------- From Damascus) function Parasitic(){} Parasitic. Prototype = super.prototype sub.prototype = new Parasitic() // Had no attribute in medine // so that no superclass (Super constructor) was executed But only indirectly inherited the parent class instance prototype properties on Sub. The prototype. The constructor = Sub / / modify the prototype to modify conscrutor to Sub. Prototype. GetAge = function () { return 'Sub' + this.age } const sub = new Sub('woow_wu7', 20) console.log(sub)Copy the code

Review parasitic combination inheritance

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title>Document</title> </head> <body> <script> function Super1(name) {this.supername1 =  name } function Super2(name) { this.superName2 = name } Super1.prototype.superAge1 = 20 function Sub(superName1, superName2, name) { Super1.call(this, superName1) Super2.call(this, SuperName2) this.subname = name} function Parasitic() {} Had no properties or methods of its own from medine. Prototype = super1.prototype // So that the sub instance could inherit the properties and methods from super1.prototype The inheritance lines are not in the inheritance super1 instance methods on the Sub. The prototype = new Parasitic (Sub). The prototype. The constructor = Sub Sub. Prototype. SubAge = 30 const sub = new Sub('super1', 'super2', 'sub') console.log('sub', sub) </script> </body> </html>Copy the code

class

• Classes can be inherited through the extends keyword
• Subclasses must call the super method within the constructor method, or an error will be reported when creating an instance
  • Because a subclass’s this needs to be obtained through the superclass’s constructor, you can’t get the this object without calling the super method
• Constructor is added by default without a subclass definition
• Super () must be called before this can be used in a subclass constructor
• Static methods of a parent class are also inherited by a child class

Es5 inheritance (borrowing constructor inheritance) - Es5's borrowing constructor inheritance: - creates a subclass's this object, and then adds the properties and methods of the parent class to the subclass's this object. Es6's inheritance: - adds the properties and methods of the parent class instance to this, and then changes this using the subclass's constructorCopy the code

The super keyword

• It can be a function or an object

Super as a function

• Super as a function can only be used in constructors, representing the constructor of the superclass, and this refers to an instance of the subclass
• Note:

Super as a function, although represents the constructor of the superclass, but returns an instance of the subclass, that is, super inside this refers to the instance of the subclass ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

Super as a function -super as a function: Used only in constructors that represent the superclass constructor -super as a function: Class A {constructor() {console.log(this, constructor) }} class B extends A {constructor() {super() }} new B() // B this ========> super;}} new B() // B this ========> superCopy the code

Super as an object

• Super as an object
• In normal methods: Points to the stereotype of the superclass, and this points to an instance of the current subclass (properties and methods on the instance cannot be obtained by this super)
• In static methods: points to the superclass and this to the subclass

Since this refers to a subclass instance, if you assign a property via super, which is this, the assigned property becomes a property of the subclass instance. class A { constructor() { this.x = 1; } } class B extends A { constructor() { super(); this.x = 2; super.x = 3; // ！！！！！ If super is assigned to an attribute, super means this, an instance of the subclass ！！！！！ console.log(super.x); Console. log(this.x); // 3 } } let b = new B();Copy the code

Class Parent {static myMethod(MSG) {console.log('static', MSG); } myMethod(msg) { console.log('instance', msg); } } class Child extends Parent { static myMethod(msg) { super.myMethod(msg); MyMethod (MSG) {super. MyMethod (MSG) {super. MyMethod (MSG); } } Child.myMethod(1); // static 1 // child.myMethod () = new Child(); var Child = new Child(); child.myMethod(2); // myMethod is called on an instance, and the super object represents the prototype of the superclass in the normal methodCopy the code

Super summary

• Super as a function represents the constructor of the superclass, and this refers to the instance of the subclass (this can only be used at this time)
• Super as an object, in a normal method, represents the prototype of the superclass, and this points to the instance of the subclass
• Super as an object, in static methods, represents the superclass, and this refers to the subclass

Es6 inheritance

• Class, as the syntactic sugar for the constructor, also has__proto__And the prototype
• So class has two chains of inheritance:
  • A subclass__proto__Always refer to the superclass (indicating inheritance of the constructor)
  • A subclassprototype.__proto__Always refer to the prototype of the superclass (representing method inheritance)

I’m Jane books: www.jianshu.com/p/d8809038c… God: sichuan juejin. Cn/post / 684490… www.jianshu.com/p/a8844b28f…