Five typical JavaScript-side questions

Issue 1: Range (scope)

Consider the following code:

(function() {   

What does the console print?

Answer

The above code will print out 5 .

The pitfall of this problem is that in the immediate execution of the function expression (iife), there are two names, but the variables are var declared by keywords. This means that it a is a local variable for this function. In contrast, it b is a global variable that belongs to this function.

Another pitfall of this problem is that he does not use "strict mode" () in the function ‘use strict‘; . If strict mode is turned on, then the code will report an uncaught reference error (uncaught referenceerror): B is not defined. Remember that strict mode requires that if this is the expected behavior, you need to explicitly refer to the global variable. So, you need to write like this:

(function() {   ‘use strict‘;   var a = window.b = 5;})();console.log(b);  

Issue 2: Create a native (native) method

Stringdefine a function on the object repeatify . This function takes an integer argument to clarify that the string needs to be repeated several times. This function requires the string to repeat the specified number of times. As an example:

``console.log(‘hello‘.repeatify(3));``

Should print out hellohellohello .

Answer

One possible implementation is as follows:

String.prototype.repeatify = String.prototype.repeatify || function(times) {   var str = ‘‘;   for (var i = 0; i < times; i++) {      str += this;   }   return str;};

This question tests the developer's mastery of the inheritance in JavaScript, as well as prototype this attribute. This also verifies that the developer has the ability to extend the native data type functions (although this should not be done).

Another important point here is to demonstrate how you realize that you are not overriding a function that might already be defined. This requires that the function does not exist before the custom function.

This technique is useful when you are asked for a shim JavaScript function.

Issue 3: Lifting variables (hoisting)

What is the result of executing the following code? Why is that?

function test() {   console.log(a);   console.log(foo());   var a = 1;   function foo() {      return 2;   }}test();

Answer

The result of the execution of this code is undefined and 2 .

The reason for this result is that variables and functions have been promoted (hoisted). Therefore, a it was printed at that time, it exists in the function (that is, it is declared), but it is still undefined . In other words, the code above is the same as the following code.

function test() {   var a;   function foo() {      return 2;   }   console.log(a);   console.log(foo());   a = 1;}test();

Question 4: thisHow it works in JavaScript

What is the result of the following code? Please explain your answer.

var fullname = ‘John Doe‘;var obj = {   fullname: ‘Colin Ihrig‘,   prop: {      fullname: ‘Aurelio De Rosa‘,      getFullname: function() {         return this.fullname;      }   }};console.log(obj.prop.getFullname());var test = obj.prop.getFullname;console.log(test());

Answer

The code prints the Aurelio De Rosa and John Doe . The reason is that in JavaScript, the context of a function, which is referred to by the this keyword, depends on how the function is invoked, not how it is defined.

In the first console.log() call, getFullname() it is called as a obj.prop function. Therefore, the context here points to the latter and the function returns the properties of the object fullname . Conversely, when getFullname() test the variable is specified, that context points to the global object ( window ). Because it test is equivalent to a property set to a global object. For this reason, the function returns window a fullname property, which in this case is set in the first line of the code fragment.

Question 5: call()And apply()

Fix the last problem and let the final console.log() print out Aurelio De Rosa .

Answer

This problem can be done by function call() or by apply() forcing the function context. If you do not know call() and apply() the difference between, I recommend reading the article between Function.call and function.apply there and difference? In the following code, I'll use it call() , but in this case, apply() you can get the same result:

``console.log(test.call(obj.prop));``

Conclusion

In this article, we discussed five typical questions to ask in the interview in order to test the JavaScript developer. The real questions from the interview may be different, but the concepts and topics covered are usually very similar. I want you to test your abilities with pleasure. In case you don't know all the answers, don't worry: there are no problems that the study and experience can't solve.

Https://juejin.im/entry/584e0cd08e450a006ac932ba

Five typical JavaScript-side questions