This is the 27th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

Before is busy with business development, the basic knowledge of front end to check what are used, rarely has time to sink down and their induction, summarizes the basis, sometimes, what use, feel worthy of pay attention to the thing, are also recorded in his note, also not timely, and then as time goes by, one record everything is at sixes and sevens, I haven’t done it yet. This time, write the basic series of the front end

I plan to chat in a relaxed, chatty tone. If I’m not good at writing, I’ll let you know

Quickly review

Above,

  1. The prototype

Var, let, const

In this case, it’s important to understand the concept of ascending.

console.log(a) // undefined 
var a = 1
Copy the code

We can see from the above code that we can use an undeclared variable even though the variable has not been declared. This situation is called promotion, and promotion is declaration.

In this case, we can look at the code like this

var a 
console.log(a) // undefined 
a = 1
Copy the code

Let’s look at another example

var a = 10 
var a 
console.log(a)
Copy the code

For this example, if you think the printed value is undefined then you’re wrong, the answer should be 10. In this case, let’s look at the code like this

var a 
var a 
a = 10 
console.log(a)
Copy the code

So far, we have seen how variables declared by var can be promoted. In fact, not only variables can be promoted, but functions can also be promoted.

console.log(a) / / ƒ (a) {}
function a() {} 
var a = 1
Copy the code

ƒ A () {} will be printed for the above code, even if the variable is declared after the function, which indicates that the function is promoted and takes precedence over the promotion of the variable.

Variables declared using var are pushed to the top of the scope. Let and const are the next steps.

Let’s start with an example:

var a = 1 
let b = 1 
const c = 1 
console.log(window.b) // undefined 
console.log(window. c) // undefined 
function test(){ 
    console.log(a) 
    let a 
}

test()
Copy the code

Variables are first declared in the global scope using let and const. Variables are not mounted to the window, unlike var declarations.

Furthermore, if we use a before declaring a, we will get an error

You might think that there is an upgrade here too, but for some reason it is inaccessible.

The reason for the error in the first place is that there is a temporary dead zone and we can’t use variables before they are declared, which is one of the advantages of let and const over VAR. However, there is a difference between what you think of as a boost and what you think of as a var boost. Although variables are told at compile time that they are accessible in this scope, access is restricted.

Var, let and const are called by each other. The reason for promoting is to solve the problem of calling each other’s functions

function test1() { 
    test2() 
}

function test2() { 
    test1() 
} 

test1()
Copy the code

If there were no promotion, the above code would not be implemented, because there would be no test1 in front of test2 and test2 in front of test1.

So finally, let’s summarize the content of this section:

  • Function promotion takes precedence over variable promotion, which moves the entire function to the top of scope, and variable promotion only moves the declaration to the top of scope
  • varThere are ascensions that we can use before declaring.let,constCannot be used before declaration due to temporary death zone
  • varDeclaring a variable in a global scope causes the variable to be mounted inwindowThe other two don’t
  • let 和 constThe effect is basically the same, but variables declared by the latter cannot be reassigned

Stereotype inheritance and Class inheritance

First of all, let’s talk about class. In fact, there is no class in JS. Class is just syntactic sugar, and its essence is still function.

class Person {} 
Person instanceof Function // true
Copy the code

In the previous section (Front-end Basic JS article 06) we explained the knowledge of the prototype, in this section we will use the prototype and class respectively to implement inheritance.

Combination of inheritance

Combinatorial inheritance is the most common inheritance method.

function Parent(value) { 
    this.val = value 
}
Parent.prototype.getValue = function() { 
    console.log(this.val) 
} 
function Child(value) { 
    Parent.call(this, value)
} 
Child.prototype = new Parent() 
const child = new Child(1) 
child.getValue() / / 1
child instanceof Parent // true
Copy the code

Call (this) inherits the attributes of the Parent class in the constructor of the child class, and then changes the prototype of the child class to new Parent() to inherit the functions of the Parent class.

The advantage of this inheritance method is that the constructor can pass parameters and will not be shared with the reference attributes of the parent class, and the function of the parent class can be reused. However, there is also a disadvantage that the parent class constructor is called when the parent class function is inherited, resulting in more unnecessary parent class attributes on the prototype of the subclass, resulting in a waste of memory.

Parasitic combinatorial inheritance

This method of inheritance optimizes composite inheritance. The disadvantage of composite inheritance is that the constructor is called when inheriting from the superclass function. We just need to optimize this.

function Parent(value) { 
    this.val = value
} 
Parent.prototype.getValue = function() { 
    console.log(this.val) 
} 
function Child(value) { 
    Parent.call(this, value) 
} 
Child.prototype = Object.create(Parent.prototype, { 
    constructor: { 
        value: Child, 
        enumerable: false.writable: true.configurable: true}})const child = new Child(1) 
child.getValue() / / 1
child instanceof Parent // true
Copy the code

The core of the inheritance implementation above is to assign the prototype of the parent class to the child class, and set the constructor to the child class, which not only solves the problem of useless parent class attributes, but also can correctly find the constructor of the child class.

The Class inheritance

Both types of inheritance are solved by prototypes. In ES6, we can use class to implement inheritance, and it is easy to implement

class Parent { 
    constructor(value) { 
        this.val = value
    } 
    getValue() { 
        console.log(this.val)
    }
}

class Child extends Parent { 
    constructor(value) { 
        super(value)
    }
}
let child = new Child(1) 
child.getValue() / / 1
child instanceof Parent // true
Copy the code

The core of class implementation inheritance is the use of extends to indicate which Parent class it inherits from, and you must call super in the subclass constructor because this code can be viewed as parent.call (this, value).

Of course, as mentioned earlier, there are no classes in JS, classes are essentially functions.

conclusion

  1. Var, let, const
  2. Stereotype inheritance and Class inheritance

Ps: Dry words or more boring, and hard to impress, we are still in daily use, more experience