Easy to forget front-end JS interview questions

This question is integrated with previous development experience and various JS pitfalls. This topic involves many knowledge points, including variable definition escalation, this pointer pointing, operator priority, prototype, inheritance, global variable contamination, object attributes, and prototype attribute priority.

Used to assess the comprehensive JavaScript capabilities of the interviewer
/**
* A front-end JS interview question that is often despised
 *
* This question is integrated with previous development experience and various JS pitfalls. This topic involves many knowledge points, including variable definition escalation, this pointer pointing, operator priority, prototype, inheritance, global variable contamination, object attributes, and prototype attribute priority.
* Used to assess the comprehensive JavaScript capabilities of the interviewer
*/

GetName (); // 5 is directly called, so the variable declaration for accessing the getName function in the current scope is promoted.

// Declares a function named Foo.
Function Foo (){
// Note that it does not have a var declaration, so first look for the getName variable in the current Foo function scope, no. Search for whether the getName variable is contained in the upper-level function scope, that is, the 'Function () {console in the window. log (4);} 'function, which assigns the value of this variable to 'Function () {console. log (1 );}'.
// Note: If it is still not found, the window object will be searched up. If the window object does not have the getName attribute, a getName variable will be created in the window object.
GetName = function (){
Console. log (1 );
};
Var getAge = function (){
Console. log ('age ');
};
Return this; // The point of this is determined by the method in which the function is called. The returned window object
}

// Create a static property named getName for Foo and store an anonymous function
Foo. getName = function (){
Console. log (2 );
};

// Create an anonymous function named getName for the prototype object of Foo
Foo. prototype. getName = function (){
Console. log (3 );
};

// Create a getName function using the function variable expression
Var getName = function (){
Console. log (4 );
};

// Declare a function called getName
Function getName (){
Console. log (5 );
}

Foo. getName (); // 2 access the static attribute stored on the Foo function
GetName (); // 4 directly calls the getName function in the current scope.
/**
* One is the scope of variables, and the other is the point of this.
* Foo (): The Foo function is executed first, and then the getName attribute function of the returned object of the Foo function is called. The getName function in the outer scope is modified. The direct call method here. this points to the window object.
*. GetName (): equivalent to window. getName ()
*/
Foo (). getName (); // 1
// Directly call the getName function, which is equivalent to window. getName ()
GetName (); // 1
/**
* JavaScript operator priority
* Reference link: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
*/
New Foo. getName (); // The priority of point 2 (.) is higher than that of the new operation. The actual execution is: new (Foo. getName )();
/**
* Return value of the constructor
* This is returned, and this represents the currently instantiated object in the constructor. Then, the final Foo function returns the instantiated object.
* Then call the getName function of the instantiated object. Because no attribute is added to the Foo constructor for the instantiated object, the getName is found in the prototype of the current object.
*/
New Foo (). getName (); // 3 new has a higher priority than function call. The actual execution is: (new Foo (). getName ()
New Foo (). getName (); // 3 the final execution is: new (new Foo (). getName )();
Foo (). getAge; // undefined local scope
Variable Declaration escalation

That is, all declared variables or declared functions are promoted to the top of the current function.
For example, the following code:

Console. log ('x' in window); // true
Var x;
X = 0;
When the code is executed, the js engine promotes the declaration statement to the top of the code and changes it:

Var x;
Console. log ('x' in window); // true
X = 0;
Three things to be parsed in advance:

Variables defined by var
Function-defined functions (do not include function expressions)
Function parameters, such as a and B in function abc (a, B) {}
Among them, 1st and 2 play a role in any scope, while 3rd play a role in the internal scope of the function. In fact, this is the pre-parsing mechanism of js.

Function expression

Both var getName and function getName are declaration statements. The difference is that var getName is a function expression, while function getName is a function declaration.

The biggest problem with function expressions is that js splits the code into two lines for separate execution.

For example, the following code:

Console. log (x); // output: function x (){}
Var x = 1;
Function x (){}
The actual code is to split var x = 1 into var x; and x = 1; and then convert var x; and function x () {} two rows are upgraded to the top:

Var x;
Function x (){}
Console. log (x );
X = 1;
Therefore, the final function declared x overwrites the variable declared x, and the log output is the x function.

Return value of the constructor

In traditional languages, constructor should not return values. The actual returned values are the instantiated objects of the constructor.

In js, constructor can return values or not.

If no value is returned, the instantiated object is returned in the same way as other languages.

Function F () {}// undefined
New F () // F {}

If a return value exists, check whether the return value is of the reference type. If it is a non-reference type, for example, the basic type (string, number, boolean, null, undefined) is the same as the non-return value, the actual returned instantiated object is returned.

Function F () {return true;} // undefined
New F () // F {}
If the return value is of the reference type, the actual return value is of this reference type.

Function F () {return {a: 1};} // undefined
New F () // Object {a: 1}

7. Several function definition methods

Function (){},

Var a = function (){}

8. Object definition method

A = new Object (), a = {}

9. Class definition method (prototype) (inheritance)

Var a = function (){}

A. prototype = {}

New ();

 

10. Point of this keyword

Obj. foo () = obj // method call mode, which points to obj

Foo () = window; // function call mode. this points to window.

New obj. foo () = obj // Constructor call mode, this points to the new object

Foo. call (obj) = obj; // APPLY call mode. this points to obj.

11. DOM operations

Replace "hello" with "hello" in <body> <div id = "a"> hello </div> </body>"

What is the difference between rewriting innerHTML of the Body and rewriting innerHTML of <div>?

12. What is a closure and its functions

13. Several methods of event binding, event bubbling

14. Ajax/json/json0070

15. Advantages and disadvantages of asynchronous ajax

Advantages:

• Compared with synchronous ajax: the UI will not be stuck and the user experience will be good.

• Saves traffic compared with refreshing pages

Disadvantages:

• The backend button is invalid;

• When multiple requests are triggered at the same time, uncertain callback time may cause confusion. To avoid such confusion, a complicated judgment mechanism is required.

• Unfriendly search engines

• Data security

16. Common JS frameworks. Do you have used jQuery or jQuery.

18. How long has it taken to introduce my own JS project,

19. Development and debugging tools and methods (editor, browser

20. Classes, functions, and objects (code expression)

21. The closure (setTimeout) (generates two timers connected at the beginning and end) (uses the for loop to generate 10 timers) |

22. Jquery Mobile

23. HTML5/CSS3

24. Have you heard about and understood webapp?

25. Advantages and disadvantages of the language in the industry

26. Introduce the project experience, cooperative development and independent development

27. Important programming knowledge

28. How to solve the problems encountered during the development process.

29. Are there any personal/open-source projects?

30. Front-end development (HTML/CSS/