首先来看一个例子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> console.log(a); </script></body></html>看一下输出结果：
这是因为 a 我们并没有定义，所以报错。
例子2：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> console.log(a); var a; </script></body></html>
看结果：
这结果说明变量 a 我们已经定义了，但是我们没有给它赋值。可是我们是先输出的a，而后才定义的变量a，为什么这时候就不报错了呢？
原因就是js的变量提升，当 js 执行代码的时候，它会把我们的代码先描一遍，把我们定义的变量提升到代码的顶部，如果是在函数内定义的变量，会提升到函数的顶部。
于是我们的代码实际上就变成了这个样子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> var a; console.log(a); </script></body></html>
接下来我们给变量赋值。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> console.log(a); var a = 1; console.log(a); </script></body></html>
打印结果：
结果是先打印undefind，再打印 1 。这是因为由于有代码提升的原因，我们的代码实际上变成了先把变量 a 分解成 var a; 然后再进行赋值。最终是变成了这个样子：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> var a; console.log(a); a = 1; console.log(a); </script></body></html>
这个过程就是 js 的变量提升，下面我们再来看看有函数的情况。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> function show() { var a = 1; } console.log(a); </script></body></html>
输出结果：
结果是 a 报错，没有定义，这是因为如果变量是在函数中定义的，那么变量提升会提升到函数的顶部，不会走出这个函数。我们可以在函数内部测试一下。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> function show() { console.log(a); var a = 1; console.log(a); } show(); </script></body></html>
打印结果：
还有一种连等赋值的情况，这种情况定义的变量是可以走出函数体在函数外部拿到值的。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> function show() { console.log(a); var a = b = 1; console.log(a); } show(); console.log(b); </script></body></html>
打印结果：
这种情况是因为赋值代码是从右到左执行，在解析的时候会解析成： b = 1; var a = 1;这时候的 b 是全局变量，所以可以在函数外部拿到。解析后的结果就成了：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> function show() { var a; console.log(a); a = 1; b = 1; console.log(a); } show(); console.log(b); </script></body></html>不单单是变量会提升，我们的函数也会提升，比如我们先调用函数，再定义：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> show(); function show() { console.log("打印"); } </script></body></html>打印结果：
函数的提升是把整个函数体提升到代码的顶部，并且函数的优先级要比变量的优先级高。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> console.log(show); var show = "abc"; function show() { } </script></body></html>打印结果：
这是因为函数的优先级比较高，所以当变量提升后，发现还有一个没赋值的变量，就把名字一样的变量show给忽略掉了。解析后的样子是：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> function show() { } var show; //忽略掉 console.log(show); show = "abc"; </script></body></html>这整个就是js的变量提升，总的来说就是：变量提升到代码的顶部，函数内的变量提升到函数的顶部，函数的提升优先级比变量的优先级高。