js中函数执行顺序以及变量提升

例题

function Foo(){
  getName = function (){
    console.log(1);
  }
}
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();

//请写出顶上的执行输出结果

我这就不卖关子了，输出的结果分别是：2、4、1、1、2、3、3
不知你答对了吗？

解析

下面进入重点，我们进行分析

首先，代码在加载之后，第一步是要进行代码的编译阶段，此处用到一个知识点，
- 变量提升
- 函数提升
我们来分析一下预编译阶段的结果
Foo = #AAFF00 --> 指向Foo函数的函数地址，
地址中的上下文包括
 getName = function (){
    console.log(1);
  }

var getName;
getName = func --> console.log(5)

执行阶段：
全局的getName
getName = func --> 4
        = func --> 1

Foo函数中的变化
getName = function(){
  console.log(2)
}

接下来我们看一下具体的调用顺序
Foo.getName(); // 结果为2
getName();  // 结果为4
Foo().getName(); // 先执行Foo() ->this --window   window.getName();  结果为1
getName();  // 全局的 window.getName()  --> 1

要想计算下面这几项，我们需要先了解 js 运算符的执行顺序，可以参考这个网址：运算符优先级

new Foo.getName(); // 先执行属性运算符 ’ . ‘ Foo.getName() --> 2
new Foo().getName(); // 创建实例，然后调用Foo实例的getName(), 结果为 3
new new Foo().getName(); // new Foo() ---> 实例调用 getName() --->  3

内存分析图

内存分配图.jpg