标签：div 参考资料 为什么 color 赋值 变量 结果 逻辑 ...
1.什么是函数声明和函数表达式
（1）函数声明（function declaration），通过function 关键字，functionName函数名，arg参数（可选）定义的函数。
funcrion calculateAge(year) {.....}
（2）函数表达式: 将函数声明赋值给一个变量，这个表达式叫做函数表达式
var funExpress = function() {};//匿名函数表达式，函数是匿名函数
var funExpress2 = function funName() {} //具名函数表达式，函数有函数名的表式
2. 什么是提升
通常js引擎会在正式执行之前进行一次预编译，在这个过程中，会将函数声明以及变量声明提升至作用于的顶端，并且赋值undefined，这个过程叫过提升。
（1）变量提升
console.log(age); // undefined
var age = 23;
function foo() {
console.log(age); // undefined
var age = 65;
console.log(age); // 65
}
foo();
console.log(age); // 23
出现上面的结果是因为：age变量的声明会在预编译的时候提升至作用域的顶端，并且赋值undefined；上面代码预编译之后的结果相当于下面的代码，所以会出现两个undefined
var age; console.log(age);// undefined age = 23; function foo() { var age; console.log(age); // undefined var age = 65; console.log(age); // 65 } foo(); console.log(age); // 23
后面两个一个输出65一个输出23是因为， 如果存在两个同名变量，我们会现在当前作用域中寻找此变量，若有就用这个若没有，就往外层作用域中寻找。 foo中有age变量就输出65， 全局作用域中也有age变量，所以输出23。
类似的例子还有：
var foo = 3; function hoistVariable() { var foo = foo || 5; console.log(foo); // 5 } hoistVariable();
foo || 5这个表达式的结果是5而不是3，虽然外层作用域有个foo变量，但函数内是不会去引用的，因为预编译之后的代码逻辑是这样的：
var foo = 3; // 预编译之后 function hoistVariable() { var foo; foo = foo || 5; console.log(foo); // 5 } hoistVariable();
如果当前作用域中声明了多个同名变量，那么根据我们的推断，它们的同一个标识符会被提升至作用域顶部，其他部分按顺序执行，比如下面的代码：
function hoistVariable() { var foo = 3; { var foo = 5; } console.log(foo); // 5 } hoistVariable();
由于JavaScript没有块作用域，只有全局作用域和函数作用域，所以预编译之后的代码逻辑为：
// 预编译之后 function hoistVariable() { var foo; foo = 3; { foo = 5; } console.log(foo); // 5 } hoistVariable();
（2）函数提升
1）函数声明
下面这种函数很常见：
function hoistFunction() { foo(); // output: I am hoisted function foo() { console.log(‘I am hoisted‘); } } hoistFunction();
这是因为预编译之后，引擎把函数的声明整个的提前到当前作用域的顶部，上面的代码预编译之后：
// 预编译之后 function hoistFunction() { function foo() { console.log(‘I am hoisted‘); } foo(); // output: I am hoisted } hoistFunction();
如果在同一个作用域中存在多个同名的函数声明，后面的会覆盖前面的函数声明：
function hoistFunction() { function foo() { console.log(1); } foo(); // output: 2 function foo() { console.log(2); } } hoistFunction();
预编译之后：
//预编译之后 function hoistFunction() { function foo() { console.log(2); } foo(); // output: 2 } hoistFunction();
2）函数表达式
那么当函数声明遇到函数表达式时，会有什么样的结果呢，先看下面这段代码：
function hoistFunction() { foo(); // 2 var foo = function() { console.log(1); }; foo(); // 1 function foo() { console.log(2); } foo(); // 1 } hoistFunction();
运行后我们会发现，输出的结果依次是2 1 1，为什么会有这样的结果呢？
因为在js中函数是一等公民，函数声明的优先级最高，会被提升至当前作用域的最顶端，然后才是函数表达式和变量按顺序执行，所以第一次调用实际上执行了下面定义的函数声明，而第二次调用时，由于前面的函数表达式与之前的函数声明同名，故将其覆盖，以后的调用也是同样的结果， 上面的过程预编译之后的逻辑如下：
// 预编译之后 function hoistFunction() { var foo; foo = function foo() { console.log(2); } foo(); // 2 foo = function() { console.log(1); }; foo(); // 1 foo(); // 1 } hoistFunction();
函数与变量同名也是类似的：
var foo = 3; function hoistFunction() { console.log(foo); // function foo() {} foo = 5; console.log(foo); // 5 function foo() {} } hoistFunction(); console.log(foo); // 3
函数声明被提升至作用域顶端，所以第一次打印出来是函数，后面被赋值为5，所以打印出来是5，而外层的变量不会被内层覆盖，所以最外层还是打印出来3， 上面的逻辑是:
// 预编译之后 var foo = 3; function hoistFunction() { var foo; foo = function foo() {}; console.log(foo); // function foo() {} foo = 5; console.log(foo); // 5 } hoistFunction(); console.log(foo); // 3
函数声明的优先级最高，会被提升至当前作用域的最顶端，然后才是函数表达式和变量按顺序执行！！！！
本文完。
参考资料：
https://www.cnblogs.com/liuhe688/p/5891273.html
标签：div 参考资料 为什么 color 赋值 变量 结果 逻辑 ...
原文地址：https://www.cnblogs.com/ycherry/p/10832260.html
