Prototype chain

  • Each constructor (e.gPerson) have a prototype object (Person.prototype), the stereotype has an attribute (Person.prototype.constructor) refers back to the constructor, while the instance (e.gperson = new Person()) has an internal pointer (in the browser it doesperson.__proto__) Point to the prototype. The prototype itself is also an instance, with an internal pointer to another prototype. This creates a chain of stereotypes between the instance and the stereotype.
  • To make the prototype chain end, JavaScript specifies Object.prototype.proto === null at the very top of the prototype chain
  • Object.getPrototypeOf(window) === window.__proto__;Get the window prototype
  • Object.prototype.isPrototypeOf({})judgeObject.prototypeIsn’t it{}The prototype of the

Attached is the prototype chain diagram drawn by myself with Xmind

Var/let/const

Block-level scope

  • If block the if () {}
  • While block while () {}
  • Do {} while block
  • {} block
  • try{}catch{}

Before ES6, you could simulate creating a block-level scope by (function(){})()

var

  • The declared scope is the function scope;
  • There is variable promotion;
  • Var a =1; var a =2;
  • Variables declared by var become properties of the global winodw object, while those declared by let and const do not.

let

  • The declared scope is a block scope, which is a subset of the function scope.
  • No variable promotion, temporary dead zone;
  • Duplicate declarations will cause an error.

const

  • Const behaves essentially the same as let;
  • To declare a variable, we must also initialize the variable, such as const a; Complains;
  • Modifying a variable declared by const causes a runtime error;
  • If a const variable refers to an object, it does not violate the const constraint to modify attributes inside the object, as in:
const person = {}; 
person.name = 'Matt'; // ok
Copy the code

If you want it to have fixes that cannot be modified, you can use object.freeze () to do so

Array correlation method

New Array (10) and an Array of (10)

  • new Array(10)You’ll get onelengthThe empty array of 10, if printed, will be found to be undefined. Indicates that there should be 10 values, but no value is given. The array is not availablemap,filter,forEachThese methods.
  • Array.of(10)It’s like building an array[10]

Find and filter

Find and filter are methods that do not alter the original array

  • Find returns an item in the array, and findIndex returns the index of that item.
  • Filter finds all the elements that meet the criteria and returns an array of those elements, which must traverse the entire array.

The Number and the String

Number

  • The range of values that ECMAScript can representNumber.MIN_VALUE~Number.MAX_VALUE, and beyond the scope isInfinity(plus infinity) and-InfinityMinus infinity.
  • Number.MAX_SAFE_INTEGERThe largest safe integer, that is, the range of numbers in which no loss of accuracy occurs (except for decimals),16 Number.MAX_SAFE_INTEGER === 2**53-1
  • Number.MIN_SAFE_INTEGERMinimum safe integer
  • Number.POSITIVE_INFINITY=== Infinity
  • Number.NEGATIVE_INFINITY === -Infinity
  • 0.1 + 0.2 = = = 0.3 + 4 e - 17
  • To determine if a value is finitely large (that is, between the minimum and maximum that JavaScript can represent), use theisFinite()function

NaN

NaN= = =NaN//false
NaN= =NaN//false
Copy the code

parseInt

Different numeric formats can be confusing, so parseInt() also takes a second argument that specifies the base (base)

["1"."2"."3"].map(parseInt);//[1, NaN, NaN]
Copy the code

The equivalent of

["1"."2"."3"].map((v, i) = > parseInt(v, i));//
parseInt("1".0);// Base 0 of any number is itself
Copy the code

parseFloat()

The parseFloat() function is also different in that it always ignores the zero at the beginning of the string because parseFloat() only parses decimal values, so you can’t specify a base and only takes one argument

When Number(a) is an object

Object that calls the valueOf() method and converts the returned value according to the rules above. If the conversion results in a NaN, the toString() method is called and converted according to the rules for converting strings.

0.1+0.2 does not equal 0.3

A straightforward solution to this problem is to set a margin of error, often referred to as “machine accuracy.” For JavaScript, this value is usually 2. In ES6, the Number.EPSILON attribute is provided, and its value is 2

String

toString()

In most cases, toString() takes no arguments. However, when this method is called on a value, toString() can take a base argument, that is, at what base to output the string representation of the value, as in

let num = 10; 
console.log(num.toString()); 10 "/ /"
console.log(num.toString(2)); / / "1010"
String(Symbol('wew'))//"Symbol(wew)"
Symbol('wew') +'gty'/ / an error
Copy the code

If the string contains double-byte characters, the value returned by the Length attribute may not be the exact number of characters

String()

The function follows the following rules.  If the value has a toString() method, the method is called (with no arguments) and the result is returned.  If the value is null, return “null”.  If the value is undefined, return “undefined”.

Object related methods

= = = and the Object is

0= = = +0;//true
0= = = -0;//true
NaN= = =NaN;//false

Object.is(0, +0);//true;
Object.is(0, -0);//false;
Object.is(NaN.NaN);//true;
Copy the code

Determines an empty object

Reflect.ownKeys(obj).length === 0;
Copy the code

The Map and Set

Set

  • Values that are not duplicated (+0,-0, 0) are considered the same, and both Nans are considered duplicated)
  • Add (value) : Adds a value and returns the Set structure itself (which can be called chained).
  • Delete (value) : deletes a value. If the value is deleted successfully, the value is returned true; otherwise, the value is returned false.
  • Has (value) : Returns a Boolean value indicating whether the value is a member of Set.
  • Clear () : Clears all members with no return value.
  • Size Gets the length

Correlation traversal method

  • Keys () : returns a traverser for key names.
  • Values () : Iterator that returns key values.
  • Entries () : Returns a traverser for key and value pairs.
  • ForEach () : Iterates through each member using the callback function. (No map,filter, etc.)

WeakSet

  • Members can only be complex data types, which are weak references and easily collected by the garbage collection mechanism
  • WeakSet is non-iterative and therefore cannot be used in for-of loops.
  • WeakSet has no size attribute.

Map

  • Key and value can be of any type. Object can only use string,number, and symbol as keys
  • Map key-value pairs are sequential, and the order is fixed during iteration. The order of Object iteration is different in different iteration methods
  • Object performs better except for accessing (looking up) values, and Map performs better in all other cases (adding, deleting, changing)
  • Set (key, val): Adds new elements to the Map
  • Get (key): Finds a specific value by key value and returns it
  • Has (key): checks whether the Map object has the corresponding key value. Returns true if the Map object has the corresponding key value, and false otherwise
  • Delete (key): deletes data from the Map by key value
  • Clear (): Removes all elements from the Map

Object to turn the Map

for( let k of Object.keys(obj)) {map.set(k,obj[k])}Copy the code

Map to object

let obj = {}
for (let [k, v] of map) {
  obj[k] = v
}
Copy the code

WeakMap

  • WeakMap keys can only be complex data types, which are weak references and easy to be recovered by garbage collection mechanism
  • Can’t traverse
  • Length cannot be accessed by size

Closure, scope chain, execution context

closure

Closures are functions that refer to variables in the scope of another function, usually implemented in nested functions. A closure keeps a variable object in the context of a function that has already run out of memory. Because the closure retains a reference to the variable object that can be accessed through its scope chain, the variable object is not reclaimed. This takes up more memory than normal functions

Application of closures

  1. Implement the function Currize
  2. It is possible to create private variables of functions through methods of closures, such as once: a function that is called only once
  3. Implement partial function

The scope chain

When searching for a variable, it first looks up the variable object in the current context. If there is no variable object in the parent scope, it looks up the variable object in the global context. If there is no variable object, an error is reported. Thus a linked list of variable objects in multiple execution contexts is called a scoped chain.

Execution context

  • The execution context can also be called the execution context, and this can be interpreted as an attribute of the execution context
  • Global context, function context, eval() context

For more details, see the advanced article on the Front end to understand the execution context and stack in JavaScript

The arrow function and this point to

Features of arrow function

  1. Arrow functions are much more compact than normal functions
  2. The arrow function does not have its own this. The reference to this in the arrow function is already identified when it is defined. This is the context in which it is executed. Call (), apply(), bind(), and so on cannot change the direction of this in arrow functions
  3. Arrow functions don’t have prototype and this, so can’t be used as constructors (can’t new)
  4. Arrow functions have no arguments of their own
  5. Arrow functions cannot be used as Generator functions and the yeild keyword cannot be used

This points to the

Arrow functions > New > Bind >apply and call>obj.> Direct call

For details, please refer to this in article JS

Null, and undefined

  • Null as a null object pointer
  • When a variable is declared with var but not initialized, the value of the variable is undefined
var a;//undefined
var b = null;// Reserved storage objects
Copy the code

Event delegate, event bubbling, event capture

Event delegation essentially leverages the browser event bubbling mechanism. Since the event is uploaded to the parent node during the bubbling process, and the parent node can obtain the target node through the event object, the listener function of the child node can be defined on the parent node, and the listener function of the parent node can uniformly handle the events of multiple child elements, which is called event proxy. Using an event broker reduces memory consumption by eliminating the need to bind a listening event to each child element. It is also possible to dynamically bind events using an event broker, such as a new one

Event capture phase. Capturing means that the event is propagated from the document down to the target element, checking to see if the passing node is bound to an event listener, and executing the child node if so. It does not need to add a separate listener event to it, but its occurrence is handled by the listener in the parent element.

Focus and focusin

Focus: No bubbling is supported when the focusable element is in focus; Focusin: Same as focus, except that this event supports bubbling; Blur: No bubbling is supported when the focusable element loses focus Focusout: The same as blur, but bubbling is supported.

Type conversion

Packing and unpacking

  • Boxing conversion: Converts the base type to the corresponding packaging type
  • Unboxing: Converts a reference type to a primitive type

Reference type conversion rules Conversion rules

  • The reference type is converted to the Number type, calling valueOf first and then toString
  • The reference type is converted toString, calling toString first, then valueOf
  • If neither valueOf nor toString exists, or if no primitive type is returned, TypeError is raised.

When the + operator is executed

  • When one side is String, it is recognized as String concatenation, and the other side is converted to String preferentially.
  • When one side is of type Number and the other side is of primitive type, the primitive type is converted to Number.
  • If one side is Number and the other side is a reference type, convert the reference type and Number to a string and concatenate the two.

Implicitly convert tables

Symbol(‘ett’) can be converted to “Symbol(‘ett’)” using String(Symbol(‘ett’)) and Symbol(‘ett’).tostring ()

Js 6 false values (false, “”, 0, NaN, null, undefined), other conversion Boolean are true

Object classification

The host object

Host (or built-in) objects: provided not by the JavaScript language itself but by its runtime environment. In the case of Web usage, this environment is the browser. The predefined objects provided by the browser are called host objects. The Image object is a host (or built-in) object in JS

persistence