函数声明提升

• 1.变量只提升声明，不提升赋值
• 2.函数表达式不提升赋值
• 3.函数声明提升
• 顺序：形参 变量 函数

//定义函数
function demo(num){
	console.log(111,num)	//111 f num(){	console.log(1111)	}
	//定义变量
	var num = 20;
	console.log(222,num)	///222 20
	//声明一个函数
	function num(){
		console.log(111)
	}
	console.log(333,num)	///333 20
}
//执行函数
ickt(10);

首先，形参提升（形成AO属性），变量提升(提升声明，不提升赋值，第一个打印后被变量赋值，所以第二个第三个都打印20)，函数提升（num被覆盖，所以第一个打印的是个函数）

我们都知道 js 中函数声明会提升，变量声明会提升（赋值不提升）。那为什么会这样呢，这就涉及到 js 预编译。

js 运行三部曲

1. 语法解析——检查有无语法错误；
2. 预编译；
3. 解释运行——将 js 翻译成计算机识别的语言（0 和 1组成的），翻译一行执行一行。

预编译什么时候发生

1. 预编译不仅发生在函数体内，还发生在全局；
2. 预编译发生在函数或代码执行前一刻。

说预编译之前有两点需要我们记住

1. 暗示全局变量（imply golbal）：任何变量未经声明（没有用 var 关键字声明）就赋值，此变量就为全局变量所有；

    a = 123;                      // a 是全局变量
    var a = b = 123;              // b 是全局变量。赋值一定是从右向左的
   

2. 一切声明的全局变量都是 window 的属性（window 就是全局）。

预编译的步骤

函数：

1. 创建 AO( Activation Object ) 对象（执行期上下文）；
2. 找形参和变量声明，将形参和变量名作为 AO 对象的属性名，值为 undefined（有重复的名称只写一个即可）；
3. 将形参与实参值统一（用实参的值替换 undefined）；
4. 在函数体中找函数声明，将函数名添加到 AO 对象的属性中，值为函数体（如属性名重复，则覆盖前面的）。

最后得到一个 AO 对象，代码运行时按照 AO 对象来。例如：

function fn(a) {
	console.log(a);
	var a = 123;
	console.log(a);
	function a() {}
	console.log(a);
	var b = function() {}
	console.log(b);
	function d() {}
	console.log(d);
}

fn(1);

以上代码按照前面的四个步骤：

1、创建 AO 对象
AO = {}

2、找形参和变量声明，将形参和变量名作为 AO 对象的属性名，值为 undefined
AO = {
	a: undefined,
	b: undefined
}

3、将形参与实参值统一
AO = {
	a: 1,
	b: undefined
}

4、在函数体中找函数声明，将函数名添加到 AO 对象的属性中，值为函数体。
AO = {
	a: function a() {},
	b: undefined,
	d: function d() {}
}
预编译完成后得到的 AO 对象

预编译完成后运行代码：

function fn(a) {
	console.log(a);          // function a() {}
	var a = 123;
	console.log(a);          // 123 这时的 AO 对象变成 
								AO = {
									a: 123,
									b: undefined,
									d: function d() {}
								}
	function a() {}
	console.log(a);          // 123
	var b = function() {}    // 这时的 AO 对象变成
								AO = {
									a: 123,
									b: function() {},
									d: function d() {}
								}
	console.log(b);          // function() {}    
	function d() {}
	console.log(d);          // function d() {}
}

fn(1);

全局：

1. 创建 GO( Global Object ) 对象；
2. 找变量声明；
3. 找函数声明。

全局变量也是一样的：

console.log(a);
var a = 123;
function a() {}
console.log(a);

第一步：创建 GO( Global Object ) 对象
GO = {}

第二步：找变量声明
GO = {
	a: undefined,
}

第三步：找函数声明
GO = {
	a: function a() {},
}

预编译完成后得到的 GO 对象

函数运行结果：
console.log(a);          // function a() {}
var a = 123;
function a() {}
console.log(a);          // 123

再看几个例子

console.log(test);
function test(test) {
	console.log(test);
	var test = 321;
	console.log(test);
	function test() {}
}
test(1);
var test = 123;
console.log(test);

按照以上的步骤得到的两个对象分别是：

GO = {
	 test: function test(test) {
		console.log(test);
		var test = 321;
		console.log(test);
		function test() {}
	}
}

AO = {
	test: function test() {}
}

执行结果：

function test(test) {
	console.log(test);
	var test = 321;
	console.log(test);
	function test() {}
}

function test() {}
321
123

global = 100;
function fn4() {
	console.log(global);
	global = 200;
	console.log(global);
	var global = 300;
}
fn4();
var global;

两个对象：

GO = {
	global: 100
}

AO = {
	global: undefined
}

执行结果：

undefined
200

function fn5() {
	console.log(b);
	if(a) {
		var b = 100;
	}
	c = 234;
	console.log(c);
}
var a;
fn5();
a = 10;
console.log(c);

两个对象：

GO = {
	a: undefined,
	fn5: function fn5() {
	    console.log(b);
	    if(a) {
	        var b = 100;
	    }
	    c = 234;
	    console.log(c);
	},
	c: undefined          // 变量 c 未经声明（没有用 var 关键字声明）就赋值，此变量就为全局变量所有，所以添加到 GO 对象中
}

AO = {
	b: undefined
}

对于函数体内变量的值（如此例中的 c），AO对象中有就用AO对象中的值，AO对象中没有就用GO对象中的值

运行结果：

undefined
234
234

总结

综上，所以有我们都知道的：

• 函数声明提升
• 变量声明提升（赋值不提升）

变量声明提升

1、变量定义

可以使用var定义变量，变量如果没有赋值，那变量的初始值为undefined。

2、变量作用域

变量作用域指变量起作用的范围。变量分为全局变量和局部变量。全局变量在全局都拥有定义；而局部变量只能在函数内有效。
在函数体内，同名的局部变量或者参数的优先级会高于全局变量。也就是说，如果函数内存在和全局变量同名的局部变量或者参数，那么全局变量将会被局部变量覆盖。
所有不使用var定义的变量都视为全局变量

3、函数作用域和声明提前

JavaScript的函数作用是指在函数内声明的所有变量在函数体内始终是有定义的，也就是说变量在声明之前已经可用，所有这特性称为声明提前（hoisting），即JavaScript函数里的所有声明（只是声明，但不涉及赋值）都被提前到函数体的顶部，而变量赋值操作留在原来的位置。如下面例子：
注释：声明提前是在JavaScript引擎的预编译时进行，是在代码开始运行之前。

var scope = 'global';
function f(){
    console.log(scope);
    var scope = 'local';
    console.log(scope);
}

由于函数内声明提升，所以上面的代码实际上是这样的

var scope = 'global';
function f(){
    var scope;    //变量声明提升到函数顶部
    console.log(scope);
    scope = 'local';    //变量初始化依然保留在原来的位置
    console.log(scope);
}

经过这样变形之后，答案就就非常明显了。由于scope在第一个console.log(scope)语句之前就已经定义了，但是并没有赋值，因此此时scope的指是undefined.第二个console.log(scope)语句之前，scope已经完成赋值为’local’，所以输出的结果是local。

函数声明提升

1、函数的两种创建方式

• 函数声明
• 函数表达式

函数声明语法

f('superman');
function f(name){
    console.log(name);
}

运行上面的程序，控制台能打印出supemran。
函数表达式语法

f('superman');
var f= function(name){
    console.log(name);
}

运行上面的代码，会报错Uncaught ReferenceError: f is not defined(…),错误信息显示说f没有被定义。
为什么同样的代码，函数声明和函数表达式存在着差异呢？
这是因为，函数声明有一个非常重要的特征：函数声明提升，函数声明语句将会被提升到外部脚本或者外部函数作用域的顶部（是不是跟变量提升非常类似）。正是因为这个特征，所以可以把函数声明放在调用它的语句后面。如下面例子，最终的输出结果应该是什么？：

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

可能会有人觉得最后输出的结果是1。让我们来分析一下，这个例子涉及到了变量声明提升和函数声明提升。正如前面说到的函数声明提升，函数声明function getName(){}的声明会被提前到顶部。而函数表达式var getName = function(){}则表现出变量声明提升。因此在这种情况下，getName也是一个变量，因此这个变量的声明也将提升到底部，而变量的赋值依然保留在原来的位置。需要注意的是，函数优先，虽然函数声明和变量声明都会被提升，但是函数会首先被提升，然后才是变量。因此上面的函数可以转换成下面的样子:

function getName(){    //函数声明提升到顶部
    console.log(1);
}
var getName;    //变量声明提升
getName = function(){    //变量赋值依然保留在原来的位置
    console.log(2);
}
getName();    // 最终输出：2

所以最终的输出结果是：2。在原来的例子中，函数声明虽然是在函数表达式后面，但由于函数声明提升到顶部，因此后面getName又被函数表达式的赋值操作给覆盖了，所以输出2。