1. Describe the data types in JavaScript. (These are basic types and reference types. Some interviewer basic types are called value types.)
A: The basic types are String, Number, Boolean, Null, and Undefined. The rest are reference types, Array, Object, Date, Function, and so on.
Follow-up: How to determine the basic type and reference type?
Answer: There is only a single value, stored only in the stack. Strings, numbers, and booleans, for example, are a single value; they are basic types. All that remains is the reference type, which is the object. Function, Object, Array, Date and so on are all property objects in JS. The reference type is stored on the stack at the same time, and we access the variable identifier (variable name) on the stack and the memory address that points to the type in the heap.
2. What is the name of javascript’s prototype? (Most companies ask)
A: In JS, functions also belong to objects. Each function has a child object named “prototype”. A prototype is the prototype of the function, which contains all members of a class. In JS, classes are rendered as functions (js uses function to declare a class and new to create an instance (Object)). New ES6 provides a syntactic sugar class to declare a class, which is much cleaner than functions).
Through the new process, all members of a function are instantiated as properties of an Object. The Object property __proto__ and the function property prototype both point to the same Object. This is the key to inheritance. Generally speaking, if we do not design inheritance, it will inherit Object by default. This is the top-level Object of JS. For example, if the son class (function) inherits from father(Object), then we can implement inheritance through prototype. Then father inherits Object by default. Object is an Object, so it has its constructor (its own class function). Objecet comes from an Object() function instance, so we can write new Object() when we create the Object; Object is null, an empty Object pointer. All functions inherit from one top-level Function, Function(). In this way, the following objects can access the properties of the upper Object, and the Object is an instance of the function. All functions inherit from the top level function (), so the function will default to 3 methods bind,apply, and call. This is inherited from the top level function (). How else can a function be followed by a dot to access a method. let son = function ( ) { }.bind(father); This bind() inherits Function() to change the pointer. (This content will be more or less asked, MY writing is a little messy, the knowledge is a little abstract, you can collect some articles to read, suggest to read more authoritative books inside the explanation)
What is the this pointer in js?
A: The this keyword in JS is the object in which the function is called, also known as the context in which the function is run. Scripts are Windows and global. Runs as a property of an object pointing to the change object. In strict mode this is not defined by the execution environment, so the value is undefined (in strict mode only).
Ps: Some documentation will specify two places for this Pointers, the first being a closure’s this pointer, and the second being a pointer to a function assigned to another variable as a variable name. The Pointers for these two cases can be confusing. However, all Pointers are judged by context. Some articles talk about a flaw in javascript when the next function on an object is assigned to another variable, and the pointer becomes window. I personally don’t think this is a flaw. Instead, when the variable is assigned, the pointer to the original function is lost, changing the context for the execution of the new function, which happens to run on the Window object.
4, what is the difference between apply, call, bind? Manually implement a bind()? (Some companies ask, but not many)
A: All three functions are functions on the Function prototype chain and are used to change the context in which the Function is executed, namely the this pointer. The only difference between apply and call is the format of the second argument. The former is an array, while the latter lists the values in the array one by one, separated by commas. Bind () creates a new function to call later (return function() {}). Apply and Call are executed immediately.
How it works: When we call call() and apply() we get two things: the function that called the method and the object that we want to bind to. The basic idea is to change the execution context in a call () or apply() function, moving from the calling function to the bound object to implement the pointer change. The difference between Call and apply is only in handling arguments(the argument list at runtime). The bind() method has the same basic principles as the above two methods, and the call and apply methods execute immediately. The bind() method internally returns a function. It is easier to use es6’s arrow function to return. The arrow function’s this pointer does not change with the execution context.
What are the methods of js inheritance?
A:
1. Prototype inheritance: The basic method of prototype inheritance is to override the value of subclass prototype, and change the value of subclass prototype to an instance of the parent class to implement inheritance. You need to transform the constructor within the prototype. This inheritance method does not pass parameters to the parent class, and when using reference type values are shared by all instances. (All new objects will change the value when they operate on the property. Later instances will use the changed value when they use the property. Part of this problem is due to the memory address of the reference type.)
2. Classical inheritance: Classical inheritance is used by calling the parent function’s call method in the subclass function. The idea is to call a parent function inside a child function. Since the function’s this pointer points to the context in which the function is running, we use the call function to make the parent function’s this point to the child function to implement inheritance (scope change) within the parent function. This method of inheritance does not inherit from the parent function prototype. (disabled inheritance method, if there is a method on the parent prototype, it cannot inherit the method on the prototype)
3. Composite inheritance: the combination of inheritance methods in the first two. Stereotype properties are inherited using stereotypes. Through classical inheritance, the properties of the parent class are inherited to the properties of the child class to solve the problem that the properties of the reference type are shared by all instances. (The most common type of inheritance is essentially fault-free)
4. Parasitic combinatorial inheritance: This inheritance method is actually an optimization of combinatorial inheritance, performance optimization, and the principle of combination inheritance is no different. A composite inheritance class instantiates its parent class once when it sets its prototype. The superclass function is called once more within the subclass for the purpose of inheritance using call. So the combination inheritance calls the superclass function twice. The combination inheritance process is equivalent to setting the parent class stereotype to an empty function stereotype in a function and replacing the subclass stereotype with that stereotype.
5. Es6 Classes for inheritance: Using classes is one of the best ways to implement inheritance. The language of class is more like classes in other languages. Inheritance is syntactically more like class-based inheritance. But the underlying inheritance is still based on archetypes.
Ps: Classes are now written and their inheritance is written using class. This syntax is easier to maintain. In the interview, you will be asked about the above four methods of inheritance. Generally, you only need to remember the principles of inheritance of the first three. And there are only two core concepts of inheritance in 3, transformation scope and transformation prototype. Perhaps the early JS design did not think of the syntax optimization inheritance this content, no syntax sugar can only use the oldest prototype inheritance writing method to write. Now it’s much better to develop with class. However, inheritance is usually not involved in projects, unless the overall framework of the company is written. Class inheritance syntax is not used much in other frameworks except react.
\
6. Event loops? Js in a very core content, interview questions can also be asked to do blocking, non-blocking, message queue, task queue, macro task, micro task and so on. These are all part of the event loop.)
A: In JS, when we create some variable objects or functions, we first create some content space in the heap to store the variable. When a function is called, it forms a stack frame and is stored on the stack. Following the first in, first out principle of the stack according to the scope, the execution of the popup stack is completed until the stack is empty (the concept of the stack needs to be used here).
Event loops: There are two important things in javascript. One is the js execution main thread, and the other is the call stack. Js engine for single-threaded, executive function will one by one on the call stack for the main thread to perform, if encounter obstruction, such as asynchronous function settimeout or ajax to event callback function into the task queue (also known as the message queue) waiting for the main thread of spare time in the implementation, the thread will continue to implement the main thread and method, The main thread follows the execution sequence (the parent function is put on the stack first, and then the child function and child method in the parent function continue to be executed. After the child function is executed, the garbage collection mechanism pops up the stack until all the child methods in the function are executed, and then pops up the parent function, and the call stack is empty). Call stack empty, start the event loop, check whether there is a function in the task queue, if there is, put it on the stack for execution, but the task queue is executed in the first in first out order, in fact, which function is written first to execute. When the execution is complete, there is no content in the call stack and message queue, and the code is finished.
Here is a special place, asynchronous functions are all pushed to the task queue (message queue), but the task queue is divided into two kinds of tasks, one is macro task, the other is micro task. Macro tasks include setTimeout, UI event (callback to click, touch, etc.), setInterval, and requestAnimationFrame (page redraw). Microtask browsers usually use a Promise, and the rest will not be considered. Both microtasks and macro tasks belong to the contents of the task queue. The difference is that microtasks are executed before macro tasks. The event loop is all of these things, the test sites will be extracted from them, some companies will test the code, but as long as you know the event loop is not a thing.
What is a closure? What are the advantages and disadvantages of a closure? Where does this pointer point to? 天安门事件
A: A closure is a subfunction defined inside a function. It can access variables inside the function from the outside. The advantage of closures is that the variables inside the function can be accessed externally. The disadvantage is that the variables are always stored in memory. The closure’s this refers to window or global.
Follow-up: Why does this of the closure refer to window?
A: The structure of a closure is nested in a parent function. To call the parent function, the parent function must return the child function. As mentioned above, this refers to the context in which the function is executed. The parent function may be called by an object when it is executed, but the child function returned by the parent function is not called by any object.
8. What are the methods on arrays and objects? (The question is about the ability to process data, although different companies may ask some differences, but the idea is the same. Some companies may give you some data and then process the data into what you want)
A: The common array methods are: Join, push, pop, sort, reverse, concat, includs, find(find if an array contains one, return true), find(find if a function element, Return element), findIndex(find elements, return subscript, if no, return -1), filter(filter array, return new array),slice(slice array), splice(delete array)
Common object methods are assign (object merge), create(create object), keys(return an array of keys), and hasOwnProperty(determine whether the specified attribute is present). There are many others, but not very often.
9. What about deep and shallow copies? (This question is often asked and is also a small core.)
A: Shallow and deep copies differ only in reference types, not in basic types. Latent copy is simple assignment. A simple assignment transformation of a variable on a reference type is just the variable identifier, such as let a = [1,2,3]; let b = a; This shallow copy simply changes the names of variables, and their memory addresses (reference addresses, addresses in the heap) remain the same. If you change B, B. ush(4), then a will also be changed. A deep copy is to create a new memory address in memory to store a new variable. In contrast to a latent copy, it does not simply assign a value, it also creates a new memory address in the heap. Changing B will not affect A. The usual deep copy method, MY side is converted to JSON in turn. Let b = json.parse (json.stringify (a)).
10. What are some design patterns in JS?
A: Factory pattern, prototype pattern, singleton pattern, subscription publication pattern, status pattern. The factory, singleton, and observer patterns are the most common. Nothing else is necessary to know. Some of the characteristics of the schema may be asked below.
CSS
I’m just going to go ahead and ask questions about what’s inside the Css, because it’s all old stuff.
1. Css box model;
2. What are the characteristics of positioning?
3. Achieve a vertical center; (Positioning, CSS3 Transform, elasticity, etc.)
4. Features of Px, REM and EM;
5. Unusual attributes such as vertical-align baseline issues;
6, IE and W3C standards under the box-sizing difference;
7. @import feature;
8. Clear the floating mode;
9, Css pseudo-class content;
10, some content of Css3, transition animation, etc.
The others are some kind of treatment planning. It is best to elaborate the plan within 3 years, so that it is easier to think about and in line with the reality, you can mention some of the content in the future, the impression of the interviewer is also very important, anyway, don’t be nervous and confident.