Built-in types
What are the built-in js types?
There are seven built-in types in JS, which are divided into two main types: primitive types and objects.
Basic types include: null, and undefined, string, int, Boolean, symbol
TypeOf distinguishes types
In JS, null and object are two data types, but when using Typeof, they are regarded as object, because different objects are represented as binary at the bottom. In JavaScript, if the first three digits are all zeros, they are considered as object, and NULL is represented as all zeros by binary. Naturally, the first three digits are also 0, so typeof automatically returns object. You can use instansof to distinguish null from object, and Instanceof is determined using a prototype chain.
Type conversion
Explicit conversion
Converting a type manually is called an explicit conversion;
Converts to numeric types: parseint(), Number(), parsefloat()
ToString (),string()
Convert to Boolean: Boolean ()
Implicit type conversion
In some cases js does not actively provide data conversion, js will also do data conversion internally
IsNaN – calls Number() to check if it can be converted and returns a Boolean value;
Increment decrement symbol – Will perform increment decrement after converting all the numbers that will perform this operation to a number
Addition, subtraction, multiplication and division – Calls number() for all non-numeric types
Logical operator – Call Boolean () to do type conversion
Comparison operator – calls number() if one side is an int, toString () if one side is a string
== equality operator – similar to above, null and undefined return true
scope
An understanding of JavaScript scope
Scope is the scope that variables and functions can access, or it can be said that scope controls the visibility and life cycle of variables and functions, including global scope and local scope.
What is a scope chain
When looking for a variable, it will look for the variable in the current execution context. When it is not found, it will look for the variable in the parent execution context until it finds the global variable. This process is called scope chain.
Block-level scope for let and const
In ES5, there was only global scope. In ES6, block-level scopes were introduced, with a pair of {} or for, if being a block-level scope.
Let and const are accessible only in the block-level scope without variable promotion and cannot be declared repeatedly.
Var,const, and let
Only var has variable promotion, only var is a declaration of global scope, var and LET declarations do not have to be assigned, and only var can be defined repeatedly (not recommended)
The process of new
You first create a new object and inherit the prototype of the constructor, and then pass arguments inside the constructor to execute the constructor, also known as changing the reference to this inside the constructor.
Execution context
For the implementation of the above understanding
Before the JavaScript code executes, the JS engine does a preparatory work called the execution context; Execution contexts fall into three broad categories: global execution contexts, function execution contexts, and eval execution contexts.
closure
What do you think of closures, why use closures, how they work, and how they work
Concept: In JavaScript execution, only the child functions inside a function can access the variables inside the function, so a closure can be understood as a child function defined inside a function. It can be said that a closure is a bridge between the variables inside a function and the outside. —- from Yifeng Ruan
Use: Can access the function internal variables; You can also keep these variables in memory forever;
Principle: Function execution is dependent on the function definition of the scope chain, that is, js function execution access is the function of the scope chain, to access this cannot access the variable, when the function context operation, the function will be destroyed, and its variables will be stored in the variable.
Closure issues and optimizations
Because the variables in the closure are stored in memory, which has a great impact on memory. Improper use will cause memory leakage and seriously affect the performance of the web page. The solution is to delete all useless local variables after the function execution.
This points to the
How do I determine that this points to
This in the global scope refers to the Window object
Constructor, this points to the instance’s object
When the object method is called, this refers to the called object
In the event-binding method, this refers to the object to which the event is bound
Timer function, timer function, this points to the global window function
Change the method to which this points
Function. call(caller, function argument);
Function. Apply (caller, array to pass function parameters)
Function.bind (caller)(function argument)
Introduction to arrow functions
Since the arrow function does not bind this, it captures the this value in the context of her defined position as its own this value.
Apply, bind, call does not change the direction of this in the arrow function.
How bind is implemented
function test (name){
console.log(name,this.id)
}
function bind1( func , obj){
var paramsArr = [].slice.call(arguments,2)
return function(){
func.apply(obj,paramsArr.concat([].slice.call(arguments,0)))
}
}
var object = {id:’123′}
var test1 = bind1(test,object)
test1(‘ssc’)
Archetype, inheritance
Understanding of prototype chain, prototype chain diagram
Proptype: A prototype chain is formed by looking up from an instance object for a prototype object that has a constructor. On top of the constructor’s prototype object is the object. Proptype.
Instance.__prop__ === prototype
Constructor. Proptype === prototype
Constructor ===
Example of JS inheritance
Function father(){this.fname = 'sang'} function son (){// father. Call (this) And stored in its own constructor function} / / son prototype = new father () / / son prototype. The constructor = son / / this method inherited not only inherited the fathher, The first layer of the instantiated object has its own attributes. The second layer of constructor contains the constructor (son), whose constructor is father /. // father.prototype.sex = 'nan' // son.prototype = father.prototype // son.prototype.constructor = son // Var son1 = new son() var son1 = new son() var son1 = new son() console.log(son1.fname)Copy the codeWhat’s different about ES5 / ES6 inheritance other than how it’s written
1. Function constructors are promoted and assigned values, class constructors are not
2. Inside the class is strict mode.
3. Class has no prototype object and no constructor.
4. Class can only be called with new
5. The inner class name cannot be overridden
Event loop
An understanding of the event loop
When executing code synchronization code and asynchronous code, at the time of synchronization code is placed in the main thread, asynchronous code on the task in the queue, when synchronized code in the main thread executes execution stack formation, and the task center of asynchronous tasks can be carried in the main thread synchronization task after returned to the main thread a callback, The main thread then returns the result of the asynchronous task, and then searches the task queue to see if there is any task. This process is called an event loop.
The difference between microtasks and macro tasks
When executing the code, the JS engine will fetch the execution from the microtask queue first, and then fetch the execution from the macro task queue.
Asynchronous programming
What are the asynchronous solutions
- The callback function
- Subscriber pattern: A pattern similar to one-to-many, in which all subscriber objects listen for a topic object and notify all subscribers to change their state when the topic object changes.
- promise
- Generator, iterator: Generator function
- Async and await
The introduction and use of Promise
Promise objects have three states:
1. Pending: Indicates the initial state, which is neither success nor failure
This is a big pity
3. Rejected: Indicates the rejected state
Once a promise’s state is established, it can’t be changed;
Promise’s approach:
Then: chain call
Catch: Catch an error
All: The state of the whole Promise object is determined by the parameter. When all the peomise instance objects of the parameters are in the successful state, the whole Promise object is in the successful state. If one of the peomise instance objects is in the failed state, the rogue enters the failed state. When the first failed state occurs, the overall promise is passed.
Race: Like All, it accepts multiple promise instance objects, but unlike All, when the first instance to change state changes state, it passes that state to the entire promise
Resolve: A promise object that changes it to a successful state
Reject: A promise object that makes it a failed state
ES6 array common method differences
Map () : refers to the function that changes the array and returns the array.
Find () : Returns the first element in the array that matches the corresponding condition.
FindIndex () : Returns the position of the first element in the array that matches the corresponding condition.
Filter () : Returns all eligible elements in the array.
ForEach () : iterates through all arrays, making changes to the elements in the array, and does not return a new array.
Some () : Finds elements in an array, returning true if there are conditions.
Every () : finds all elements in the array, and returns true only when all elements meet the criteria.
Reduce () : sums from left to right and returns a value.
Async and await
Async functions can be thought of as a Promise object, and the value returned by the success state when a return occurs.
Await can only appear in async functions. If await is followed by a promise, it waits for its formal processing to complete and returns a successful result. If it is not a promise, it is converted to a normally processed Promise. Await will throw its error;
The difference between async and Promise
Promise is an ES6 proposal, async is an ES7 proposal.
Async cannot be used for callback functions, promise can.
Async makes asynchronous functions more like synchronous functions.
Using async when there are multiple intermediate values makes the statement more concise and does not require multiple chain calls.