A very easy to be overlooked JavaScript face question seven questions seven answers _javascript tips

This is my final set of front-end interview questions, used to assess the overall ability of the interviewer's JavaScript, it is a pity that nearly two years so far, almost no one has been able to correct correctly, not too difficult just because most of the interviewer too despise him.

The topics are as follows:

function Foo () {
 getName = function () {alert (1);};
 return this;
}
Foo.getname = function () {alert (2);};
Foo.prototype.getName = function () {alert (3);};
var getName = function () {alert (4);};
function GetName () {alert (5);}

Please write out the following output:
foo.getname ();
GetName ();
Foo (). GetName ();
GetName ();
New Foo.getname ();
New Foo (). GetName ();
New New Foo (). GetName ();

The answer is:

function Foo () {
 getName = function () {alert (1);};
 return this;
}
Foo.getname = function () {alert (2);};
Foo.prototype.getName = function () {alert (3);};
var getName = function () {alert (4);};
function GetName () {alert (5);}

Answer:
foo.getname ();//2
getName ();//4
Foo () getName ();//1 getName
();//1
New Foo.getname ();//2
new Foo (). GetName ();//3
new New Foo (). GetName ();//3

This topic is my synthesis before the development experience and encountered a variety of JS pits together. This topic involves numerous knowledge points, including variable definition elevation, this pointer, operator precedence, prototyping, inheritance, global variable pollution, object attributes and prototype attribute precedence, and so on.

This question contains 7 small questions, respectively.

First question

First look at what the top half of this question has done, first define a function called Foo, then create a static property called GetName for Foo to store an anonymous function, and then create a new anonymous function called GetName for the prototype object of Foo. Then a getname function is created by the function variable expression, and finally a call getname function is declared.

The foo.getname nature of the first question is to access the static properties stored on the Foo function, which is naturally 2, nothing to say.

Second question

The second question is to call the GetName function directly. Since it's a direct call then it's the access function called GetName in the scope above, so it doesn't matter 1 2 3. Countless interviewers answered 5 for this question. Here are two pits, one is the variable declaration elevation and the other is the function expression.

1. Variable declaration Promotion

That is, all declared variables or declaration 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 code executes, the JS engine promotes the declaration statement to the top of the code and changes to:

var x;
Console.log (' x ' in window);//true
x = 0;

2. Expression of function

var getName and function GetName are declarative statements, except that Var getName is a function expression, and function getName is a functional declaration. About JS in various functions to create a way to see most people will do the wrong classic JS closed-envelope Test this article has detailed description.

The biggest problem with function expressions is that JS will split this code into two lines of code to execute separately.

For example, the following code:

Console.log (x);//output: function X () {}
var x=1;
function X () {}

The actual code that executes is, the Var x=1 is split into Var x first; and x = 1; Two lines, and then the Var x; and function X () {} Two lines are elevated to the top to become:

var x;
function X () {}
Console.log (x);
X=1;

So the end Function declaration x covers the X,log output of the variable declaration as the X function.

In the same vein, the code in the original title is executed at the end:

function Foo () {
 getName = function () {alert (1);};
 return this;
}
var getname;//only promotes variable declaration
function getName () {alert (5);} The elevation function declaration, which overrides the Var declaration

foo.getname = function () {alert (2);
Foo.prototype.getName = function () {alert (3);};
GetName = function () {alert (4);};/ /Final Assignment overwrites function GetName declaration

GetName ()/FINAL output 4

Third question

The third question, Foo (). GetName (); The Foo function is executed first, and the GetName property function of the return value object of the Foo function is called.

The first sentence of the Foo function is GetName = function () {alert (1);}; is a function assignment statement, note that it does not have a VAR declaration, so first look for the getname variable in the scope of the current Foo function, No. And then to the top of the scope of the current function, that is, the outer scope to find whether to contain the getname variable, found, that is, the second question in the alert (4) function, the value of this variable is assigned to function () {alert (1)}.

The GetName function in the outer scope is actually modified here.

Note: If you are still not found here, you will always look up to the Window object, and if there is no GetName property in the Window object, create a GetName variable in the Window object.

The Foo function after the return value is this, and JS the This question blog Park has a lot of articles introduced, here no longer said.

To put it simply, the point of this is determined by how the function is invoked. And here's a direct call, this points to the Window object.

The Foo function returns the Window object, which is equivalent to executing window.getname (), and the GetName in window has been modified to alert (1), so it will eventually output 1

Here we look at two knowledge points, one is the variable scope problem, one is this point to the problem.

Question Four

Call the GetName function directly, which is equivalent to Window.getname (), because the variable has been modified by the Foo function when it was executed, and the result is the same as the third question, 1

Question Five

Question New Foo.getname (); , this is the operator precedence problem for JS.

By looking up the table, you can tell that the point (.) priority is higher than the new operation, which is equivalent to:

New (Foo.getname) ();
so the GetName function is actually executed as a constructor, so it pops up 2.

Question Six

Ask the new Foo (). GetName (), first look at the operator precedence bracket above new, and actually execute AS

(New Foo ()). GetName ()
Then the Foo function is executed, and Foo has the return value as the constructor, so here you need to explain the constructor return value problem in the next JS.

The return value of the constructor

In traditional languages, constructors should not have return values, and the actual returned value is the instantiated object of this constructor.

In JS, constructors can have return values or not.

1. No return value returns the instantiated object as in other languages.

2, if there is a return value to check whether its return value is a reference type. if a unreferenced type, such as the base type (string,number,boolean,null,undefined), is the same as no return value, it actually returns its instantiated object.

3. If the return value is a reference type, the actual return value is the reference type.

In the original title, this is returned, and this is the current instantiated object in the constructor, and the final Foo function returns the instantiated object.

The GetName function of the instantiated object is then invoked because no attributes are added to the instantiated object in the Foo constructor, and then the object's prototype object (prototype) is searched for GetName and found.

The final output is 3.

Seventh question

Question seventh, new New Foo (). GetName (); The same is the problem of operator precedence.

The final actual execution is:

New ((New Foo ()). GetName) ();
Initializes the instantiated object of Foo and then new the GetName function on its prototype as a constructor.

The final result is 3.

At last

In terms of the answer, the first question 100% can be answered correctly, the second question is probably only 50% correct rate, the third question can answer the right is not much, the fourth question is very very few. In fact, this problem does not have too many tricky to use, are some likely to encounter scenes, and most people have 1 years to 2 years of work experience should be completely correct.

Can only say that some people too impatient too despise, I hope you through this article to understand some of the characteristics of JS.