Recently, the author reviewed the content of the front-end and felt the huge volume of front-end knowledge, so I summarized some knowledge points recently to share, which is also convenient to check in the future.

JS type

The original type

Features: The value of the original type is stored locally, and the assignment to another variable does not affect the original value

  1. Boolean(save true or false type)
  2. Number(save the Number type)
  3. String(Save String type)
  4. Null (does not point to any address, used for manual assignment, empty content)
  5. Undefined (default value if the variable is not assigned)
  6. Symbol (as a unique identifier or as a unique attribute name of the object)
  7. BigInt(the latest primitive type, which provides a way to say greater than253-1The integer)

Symbol and Bigint

Symbol and Bigint are new primitive types for ES6 and ES7, documented in more detail here

symbol

  1. We often use const a =Symbol() to create a value of type Symbol, but note that we cannot use the new operator because we instantiate an object through new, not Symbol

  2. The Symbol method takes an argument. Even if the arguments passed are the same, the resulting Symbol is not equal because the Symbol is unique

const foo = Symbol('foo'); const bar = Symbol('foo'); console.log(foo === bar); // false

bigint

  1. Used to describe the type of integer, filling the gap in the integer range
  2. Add n to an integer or call BigInt
  3. BigInt is used mostly like regular numbers but not mixed with regular numbers

Reference types

Features: The value of the reference type is the object stored in the heap, the variable stored in the stack, only used to look up the address of the reference in the heap.

  1. The Object type
  2. Array type
  3. The Data type
  4. The RegExp type
  5. The Function type
  6. . Reference types (juejin.cn) reference types (juejin.cn)

Object to primitive type

  • Call x.tostring () if you need to convert a string, and return it directly if converted to the base type. Valueof is called if it is not a string type, and toString is called if the result is not an underlying type
  • Call x.valueof(), which returns directly if converted to the base type
  • If the original type is not returned, an error is reported

Conversion of strings to numbers

  • Number tostring tostring ()
  • ParseInt (),number(), “+” before string (number)

What happens if the function argument is an object

  • If the function is an object, it will pass the reference address of the object. If the object inside the function is modified, the object outside the function will also change. The original object inside the function will open a new pointer and return the new object.

Judge the JS type

typeof

Function: can check primitive types except null, and can check Function and Object types except Function

Realize the principle of

When JS stores a variable at the bottom level, it stores its type information in the lowest 1-3 bits of the variable’s machine code, such as 000: object 010: floating point number. However, for null and undefined, all machine code represented by NULL is 0, and undefined is represented by a −2^30 integer. So Typeof will judge null as Object, which is also a legacy bug of JS

instanceof

Function: Can determine whether an instance belongs to a certain type, and can also determine whether an instance belongs to its parent type or ancestor type

Realize the principle of

The main implementation principle of instanceof is to iterate through the prototype chain of the variable on the left until the prototype of the variable on the right is found on the prototype chain of the variable on the left. In short, it is the implicit prototype of the instance object = display prototype of the constructor. Here we manually implement an instanceof

function _instanceof(left, Prototype let R = right. Prototype let R = right. While (L! Return true if (L === R) return true if (L === R) return true if (L = l. __proto__) return false if (L === R) return true if (L = l. __proto__) return falseCopy the code

Other methods

Object.prototype.toString.Call()

In use, Object’s prototype methods, which are called by call/apply -> [Object XXX], can determine all data types

constructor

An object derived from the constructor new has a constructor property that points to its constructor as follows: New String(‘1’).constructor === String; constructor === String; This method cannot determine null and instaceof types

Array.isArray()

Used to determine whether an object is an array

Classic topic

for (var i = 0; i <= 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, i * 1000)}Copy the code

You can change var to let or add a third parameter to setTimeout. In this case, you mainly use closures to solve the problem. Let’s start with some pre-knowledge

closure

The reasons causing

Function returns another function inside the function

Function internal reference external function

define

In js, according to the rules of lexical scope, internal function can always access external function declaration of variables, as by calling an external function returns after an internal function, even if the external functions have been executed over, but the internal function reference variable is still kept in memory, we put the collection of these variables is called closure.

The third argument to setTimeout

Many people know how to use setTimeout. Here is mainly about setTimeout parameters

In normal use we usually only use the first two parameters

setTimeout ( code , ms )

  • Code: Code block executed after the delay expires
  • Ms: delay time

In fact, setTimeout can be followed by an infinite number of arguments, which will be used as additional arguments to the previous callback, for example

setTimeout((a,b,c) => { console.log(a,b,c) }, 2000, 1, 2, 3); / / 1 2 3

To solve

First we generate a closure, and if we use a named function, we have to call it. So the natural thing to think about is self-executing functions, first create a self-executing function, and then put a setTimeout function in. At this point, we look back at the generation condition of the closure and find that it does not return a function. Here we start from the particularity of setTimeout function. As a typical asynchronous function, setTimeout function will be put into the task queue and executed outside whether it returns or not. Here is the code attached

for (var i = 0; i <= 5; i++) {
    (function (j) {
        setTimeout(function () {
            console.log(j);
        }, j * 1000)
    })(i)
}
Copy the code

Two other solutions

for (var i = 0; i <= 5; i++) {
    setTimeout(function (j) {
        console.log(j);
    }, i * 1000,i)
}
Copy the code
for (let i = 0; i <= 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, i * 1000)}Copy the code