I mainly comb the front-end knowledge points that I am not familiar with, because it is my personal understanding, which may not be in-depth, welcome to discuss.

JS Advanced Section

Scope, scope chain, closure

  • What is js scope: a variable defined inside a function in JS is valid only in the current function, and cannot be accessed outside the function
  • Scope chain: if used in the current function is not defined in the internal variables, this function will be to the parent scope (may be another function, may also be a document) to look for, if there are no access to the parent scope or will continue to parent the parent scope to find, this way up query is called js scope chain
  • What is a closure: A closure is a phenomenon where a function has access to a variable defined in another function
  • What closures do: Closures keep variables from being corrupted. They stay in memory after the closure, so we can store frequently used variables to prevent tampering
  • Disadvantages of closures: Closures keep variables resident in memory, which can result in variables not being freed and occupying memory space

Prototype, prototype chain, inheritance

  1. Js is divided into function objects and ordinary objects. Each object has a __proto__ attribute, but only function objects have a Prototype attribute
  2. Object and Function are built-in js functions, similar to Array, RegExp, Date, Boolean, Number, String
  3. The __proto__ attribute is an object that has two attributes, constructor and __proto__
  4. The prototype object prototype has a default constructor property that records which constructor the instance is created from
1. The Person. The prototype. The constructor = = Person / / * * standard 1: Person.prototype the constructor points to the constructor itself ** 2.person01.__proto__ == Person.prototype The __proto__ of the instance (that is, person01) points to the same place as the prototype object **Copy the code
  • The role of prototype objects: to store the attributes and methods common to the instance, you can greatly reduce memory consumption.

Function context, this points to

  • Function context :(leave white, fill in later)
  • This point:
    • In normal functions, whoever calls the function points to whoever, and in particular, the timer this points to Windows.
    • The arrow function “this” points to the outer “this”
    • Bind: Directly following the function name. Bind (), this refers to the object in parentheses
    • The first argument to call is the object to which this refers, and the second argument is the argument passed, separated by a comma, as in:func.call(obj, a, b)

Js running mechanism, event queue and loop, synchronous, asynchronous programming:

  • Event queue: includes synchronous event queue and asynchronous event queue
  • Js EventLoop:
    • Js tasks enter the execution stack. Synchronous tasks and asynchronous tasks are distinguished first. Synchronous tasks enter the main thread for execution. The asynchronous task is sent to the EventTable event queue and the asynchronous callback function is registered.
    • After the synchronization task is executed, it will check whether the task in the Event queue needs to be executed. If so, it will be executed. After the execution, it will continue to check the Event queue until there are no more tasks to execute, which is the Event Loop.
  • Further subdivided into macro tasks and micro tasks
    • The macro task contains the entire script block, setTimeout, setInterval,
    • Microtasks include statements following await, as well as promise, process.nexttick.
    • Js will execute the macro task first. If there are new macro tasks in the macro task, they will be put into the macro task event queue. If there are micro tasks, they will be put into the micro task queue.

ES6 related

String, array, object extension API

Variable extension: let const destruct assignment block-level scope

Function extension: Arrow function default argument, rest argument

Expand operator, template string

Set and MAP data structures

  • The main applications of sets and maps are array deduplication and data storage
  • A Set is a data structure called a collection, and a Map is a data structure called a dictionary
const s = new Set(); Let arr = [1,2,1,4,5,3]; arr = [...new Set(arr)]Copy the code

Properties and methods of a Set instance

  • Set attributes:
    • Size: Returns the number of elements contained in the collection
  • The Set method:
    • Operation method:
      • Add (value): Adds a new item to the collection
      • Delete (value): Removes a value from the collection
      • Has (value): Returns true if the value exists in the collection, false otherwise
      • Clear (): Removes all items in the set
    • Traversal method:
      • Keys (): Returns an array containing all the keys in the collection
      • Value (): Returns an array containing all the values in the collection
      • Entries: Returns an array containing all the key-value pairs in the collection
      • ForEach (): variable collection member that performs operations on collection members
The difference between collections and dictionaries:
  • Common: Collections and dictionaries can store values that are not duplicated
  • Differences: Collections store elements as values, dictionaries as keys

An understanding of iterators and generator functions next and yield

Proxy Object property Proxy: Reads (gets) and sets (sets) properties

Promise objects, a solution for asynchronous programming

Async + await: syntactic candy of promise + Generator, the ultimate scheme of asynchronous programming

Syntax sugar for the class syntax constructor

Modular programming export + import export and import

Vue related

Vue – the router: building SPA

Routing, component configuration

Value transmission between routes

Routing hop

Navigation guard for routing

Remember how it is used in router.js and component pages

Vuex: State management: data warehouse store

Instantiate the use of the five major properties of the repository

$nextTick

In vue, when data is updated, vue does not immediately render it to the template. Vue does not manipulate the template until all operations on data are completed. If we want instructions to be executed after vue updates the template, there are two ways:

1. The timer delays

It can be done without delay or after the template is updated

setTimeout(() => {
    this.$ref.inputTitle.focus();
})
Copy the code

2. $nextTick

this.$nextTick(function() {
    this.$ref.inputTitle.focus();
})
Copy the code