前端面试题目，求解答

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

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

当调用这个 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 2

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]作为构造函数并执行