Some time ago brush nuggets found a very good article (list), feel quite reasonable. After some knowledge before to see, after a period of time to find and forget, and then to find information, repeatedly feel that knowledge is never their own and learn more scattered. So follow the self-checklist of a [qualified] front-end engineer to improve my knowledge system (make some adjustments according to my own situation).

Here to explain most of the knowledge points are quoted in the following links, are very good articles, worth studying, here to thank the authors greatly. If the reference involves the author’s copyright or something, please send me a private message and it will be deleted as soon as possible.

reference

  • Self-checklist of a [qualified] front end engineer

The knowledge system

First, JavaScript foundation

Variables and types:

  1. How many language types does JavaScript specify?

    • Basic data types:Number.Undefined.Boolean.String.Null.Symbol.BigInt
    • Reference data type:Object
    • What is the difference between basic data types and reference types?
    • The differences between basic data types and reference types are explained in detail
    • Four ways to judge JS data types

  2. What are the underlying data structures of JavaScript objects? : HashMap

    • What is the underlying data structure such as object Array map set in JS?

  3. Symbol type in the actual development of the application, can be manually implemented a simple Symbol

    • Briefly understand the ES6/ES2015 Symbol() method

  4. How variables in JavaScript are stored in memory

    • JavaScript memory mechanism (prerequisite for advanced students)
    • Front-end basic advance (1) : memory space detailed diagram

  5. The built-in objects corresponding to the basic types, and the boxing and unboxing between them

    • Packing and unpacking in javascript

  6. Understand value types and reference types

    • The differences between basic data types and reference types are explained in detail

  7. Difference between null and undefined

    • Undefined means there is no definition at all
    • Null means that a value is defined as “null”;
    • Some understanding of Undefined and Null
    • The difference between undefined and null

  8. There are at least three ways to determine the type of JavaScript data, their advantages and disadvantages, and how to accurately determine the type of Array ES6 has an Array. IsArray is a good way to determine whether it is an Array type. JS datatype: JS datatype

    1. typeof:

      • For basic types, dividenullThe correct result can be returned.
      • For reference types, dividefunctionExcept, all returnobjectType.
      • fornullTo return toobjectType.
      • forfunctionreturnfunctionType.

    2. instanceof:

      • instanceofIt can only be used to determine whether two objects belong to the instance relationship, but cannot determine which type an object instance belongs to

    3. constructor:

      • Null and undefined are invalid objects and therefore will not existconstructorYes, these two types of data need to be judged in other ways.
      • Function of theconstructorIs not stable, this is mainly reflected in the custom object, when the developer overwrites prototype, the originalconstructorReferences will be lost,constructorWill default toObject

    4. toString:

      • ToString () is the prototype method of Object. This method is called and returns the current Object’s [[Class]] by default. This is an internal property of the format [object Xxx], where Xxx is the type of the object. This method does not accurately determine a custom type. For a custom type, it only returns [object object], but you can use instanceof instead.

        
function Person () {}
const p = new Person();
Object.prototype.toString.call(p); // [object Object]
p instanceof Person; // true

Copy the code
    • Why use Object. The prototype. ToString. Call (obj) detection Object types
    • Four ways to judge JS data types

  9. Scenarios where implicit type conversions can occur, and the principles of conversions, and how to avoid them or apply them wisely.

    • Js implicit conversions that you ignored

  10. The reason for the loss of decimal precision, the maximum number that JavaScript can store, the maximum security number, the method of JavaScript processing large numbers, and the method of avoiding the loss of precision.

    • JavaScript can store the largest number:Number.MAX_VALUEIts value is given as number.max_value, and printed on the console as 1.7976931348623157e+308.
    • Maximum safety number:Number.MAX_SAFE_INTEGER: 9007199254740991
    • Insight into the loss of precision in JavaScript
    • JavaScript floating point number trap and solution

Prototypes and prototype chains

  1. Understand prototyping patterns and prototyping rules in JavaScript

    • Prototype rules

      • All reference types (array, object, function), have object properties, can be freely extended properties;var arr = []; arr.a = 1;
      • All reference types (arrays, objects, functions) have a _proto_ attribute (implicit stereotype) whose value is a normal object;
      • All functions have oneprototype(explicit stereotype), the property value is also a normal object;
      • For all reference types (arrays, objects, functions), the implicit stereotype points to the explicit stereotype of their constructor;(obj._proto_ === object.prototype);
      • When trying to get a property of an object, if the object itself does not have the property, it will be removed_proto_That is, of its constructorprototype) in search of;
      • Prototype rules and prototype chains in JS

    • Deep understanding of the JavaScript series (42) : Prototype Patterns of Design Patterns

  2. Instanceof of the underlying implementation principle, manual implementation of an Instanceof

    • On the principle of instanceof and Typeof

  3. There are several ways to implement inheritance and their pros and cons

    • JS implements inheritance in several ways

  4. Name at least one example where prototype inheritance is used in an open source project such as Node.

  5. You can describe the detailed process of new an object by manually implementing a new operator

    • JavaScript in-depth new simulation implementation

  6. Understand the underlying principles of es6 class construction and inheritance

    The class class introduced by ES6 is essentially the syntax sugar of JavaScript’s prototype-based inheritance.

    
class Animal {
    constructor(name) {
        this.name = name;
    }

sayHi() {
        return `Hello The ${this.name}`; }}// es5
function Animal(name) {
    this.name = name;
}

Animal.prototype.sayHi = (a)= > {
    return `Hello The ${this.name}`;
};

Copy the code

    Let’s see if the Animal class is similar to es5.

    "use strict";

/** * determine whether left is an instanceof right, using instanceof, */
function _instanceof(left, right) {
    if( right ! =null &&
        typeof Symbol! = ="undefined" &&
        right[Symbol.hasInstance]
    ) {
        return!!!!! right[Symbol.hasInstance](left);
    } else {
        return left instanceofright; }}function _classCallCheck(instance, Constructor) {
    if(! _instanceof(instance, Constructor)) {throw new TypeError("Cannot call a class as a function"); }}/** * Add Object property */ with object.defineProperty
function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
        var descriptor = props[i];
        descriptor.enumerable = descriptor.enumerable || false;
        descriptor.configurable = true;
        if ("value" in descriptor) descriptor.writable = true;
        Object.defineProperty(target, descriptor.key, descriptor); }}/** * add attribute or method to constructor or constructor prototype */
function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    return Constructor;
}

var Animal =
/*#__PURE__*/
(function() {
    // The constructor
    function Animal(name) {
        // Check whether this(this refers to the generated instance) is an instance of the Animal constructor
        _classCallCheck(this, Animal);

        this.name = name;
    }

    // Add the method to the constructor
    _createClass(Animal, [
        {
            key: "sayHi".value: function sayHi() {
            return "Hello ".concat(this.name); }}]);returnAnimal; }) ();Copy the code

    From the above escaped code, the underlying inheritance of the prototype is still adopted.

    • Babel online escape
    • Learn more about ES6 class

Scope and closure

  1. Understand lexical scope and dynamic scope

    • JavaScript in-depth lexical scope and dynamic scope

  2. Understand scope and scope chains of JavaScript

    • The scope chain of JavaScript depth

  3. Understanding the execution context stack of JavaScript allows you to apply the stack information to quickly locate problems

    • JavaScript deepens the execution context stack

  4. How this works and how it can be used in different scenarios.

    What is this? This is the environment object in which the function is run.

    • JavaScript this principle
    • JavaScript usage scenarios

  5. Closure implementation principle and function, can list several development closure practical application

    • JavaScript in-depth closures
    • Closure application scenario
    
// 1
for (var i = 0; i < 5; i++) {
    setTimeout((a)= > {
        console.log(i); })}for (var i = 0; i < 5; i++) {
    (function (j) {
        setTimeout((a)= > {
            console.log(j)
        })
    }(i))
}


// 2
const module = (function() {
    var name = 'rudy';
    var getName = function () {
        return name;
    }

    var changeName = function (newName) {
        name = newName;
        return name;
    }

    return {
        getName: getName,
        changeName: changeName
    }
}())

// Private variables
var privateNum = (function () {
    var num = 0;
    return function () {
        return num++;
    }
}())
privateNum(); / / 0
privateNum(); / / 1
privateNum(); / / 2

Copy the code

    There are so many necessary application scenarios that only some of them are listed above.

  6. Understand how stack overflows and memory leaks work and how to prevent them

    • Closure implementation principle and function, and memory leaks

  7. How to handle asynchronous operations on loops;

    If you need to handle the asynchronous operations of a for loop simply by giving each loop body its own scope, you can use es6 lets or closures to solve this problem.

    
// let
for (let i = 0; i < 5; i++) {
    setTimeout((a)= > {
        console.log(i);
        // do something})}/ / closures
for (var i = 0; i <5; i++) {
    (function (j) {
        setTimeout((a)= > {
            console.log(j);
            // do something
        })
    }(i))
}

Copy the code
    • Summary of for loop asynchronous operation issues

  8. To understand the practical problems that modularity solves, list several modularization solutions and understand the principles behind them

    • Javascript modular programming (1) : module writing method
    • Javascript Modular Programming (II) : AMD specification
    • Javascript modular Programming (3) : the use of require.js

Enforcement mechanism

  1. Why do we put a return inside of a try, and finally executes, and understand the internals
    • JavaScript try-catch statement (error handling)
  2. How can JavaScript implement asynchronous programming and describe the EventLoop mechanism in detail
    • JavaScript Asynchronous Programming
  3. What are macrotasks and microtasks
    • Microtask, macro task, and event-loop