前端面试题目，求解答

Question

function  Foo() {   
    getName =   function () {
        console.log(1);
    };   
    return  this;
}
Foo.getName =   function () {
    console.log(2);
};
Foo.prototype.getName =   function () {
    console.log(3);
};
var  getName =   function () {
    console.log(4);
};

function  getName() {
    console.log(5);
}

//请写出以下输出结果：
Foo.getName(); 
getName(); 
Foo().getName(); 
getName();  
new  Foo.getName(); 
new  Foo().getName(); 
new  new  Foo().getName(); 

如题，求大神解答,希望可以把原因写得很详细。

Answer 1

JS在执行之前有一个编译阶段，在编译阶段主要：一、初始化用var定义的变量为undefined；二、初始化function定义的函数。注意：两种定义函数的方式在编译阶段初始化的结果是完全不同的，比如：

var greet = function(){}; // `greet` 初始化为 `undefined`
// 而
function greet(){} // `greet` 初始化为 函数

结合你的例子，实际上根据编译及执行的过程，可以将代码的顺序调整为：

// 定义 1
function Foo() {
  // 定义 7
  getName = function() {
    console.log(1);
  };
  return this;
}
// 定义 2
var getName = undefined;
// 定义 3
function getName() {
  console.log(5);
}
// 定义 4
Foo.getName = function() {
  console.log(2);
};
// 定义 5
Foo.prototype.getName = function() {
  console.log(3);
};
// 定义 6
getName = function() {
  console.log(4);
};

//请写出以下输出结果：
Foo.getName(); // 2 [定义 4]

getName(); // 4 [定义 6]

Foo().getName(); // 1 `Foo()`做了两件事：
// 一：将`getName`从[定义 6]改变为[定义 7]
// 二：`return this`, `this`此时为`window`
// 所以`Foo().getName()`相当于`window.getName()`相当于`getName()`（注意，此时getName为[定义 7]）

getName(); // 1 理由见上

new Foo.getName(); // 2 `new Foo.getName()`相当于`new (Foo.getName)()`, 
// 而不是`(new Foo).getName()`, 这条语句将[定义 4]作为构造函数并执行

new Foo().getName(); // 3 `new Foo().getName()`相当于`(new Foo()).getName()`, 
// 而不是`(new Foo().getName)()`, 这条语句执行了[定义 5]

new new Foo().getName();// 3 `new new Foo().getName()`相当于`new (new Foo().getName)()`, 
// 这条语句将[定义 5]作为构造函数并执行

Answer 2

这样题目只能作为面试，生产环境没有这么写的。

当调用这个 Foo() 的时候，getName 成为全局变量，不使用 var 这样的在严格模式是不允许的，另外在严格模式下函数内的this指向undefined的，非严格模式下就成了window

function  Foo() {   
    getName =   function () {
        console.log(1);
    };   
    return  this;
}

var  getName =   function () {
    console.log(4);
};

function  getName() {
    console.log(5);
}

这个就相当于

// 函数表达式提升比Function声明提升少一级
function  getName() {
    console.log(5);
}
// 这里就会重写了
var getName;
getName =  function () {
    console.log(4);
};

Answer 3

1. 关键词一：函数声明提升
2. 关键词二：this
3. 题目的答案不是输出结果分别是什么，而是从上到下执行下来，输出结果是什么，下方语句执行时是会对全局的变量、函数产生影响的

前两个关键词百度下都有详细解释。
然后你再自己看看。