当JavaScript代码执行时，会先根据作用域中的变量、函数、以及this等信息，创造出执行上下文，并形成可用的作用域链，接着才会开始执行代码。局部变量的定义在这个过程中扮演着重要的角色，局部变量能够有效地提升JavaScript代码的性能。
局部变量提升
JavaScript代码执行时，会遇到变量和函数的声明，JavaScript会预处理变量和函数声明，将其放置到相应作用域的顶部，这个过程就是变量提升和函数提升。下面以两种不同情况示例说明：
示例一：全局环境下的变量
var a = 1;
function test(){
console.log(a);
}
在全局作用域下声明变量a和函数test，执行JavaScript代码时，全局作用域会在执行前预处理函数和变量声明，代码优化器也会尽可能地优化执行过程。在上述代码中，变量a和函数test被提升到了全局作用域的顶端，等价于以下代码：
var a;
function test(){
console.log(a);
}
a = 1;
从上述代码可以看出，虽然变量提升和函数提升会带来提前声明的问题，但对于性能来说，这是很有帮助的。当JavaScript引擎看到一个变量或函数声明时，就能将这些代码理解为一个静态的方法集合，可以将其直接编译并优化性能。
示例二：函数内部的变量
function test(){
var a = 1;
console.log(a);
}
在函数内部定义变量a并使用，执行JavaScript代码时，会在函数作用域内预处理函数和变量声明，作用域链会包含函数的变量，然后才会执行后续的代码。同时也会优化执行过程，避免重复声明和其他性能问题。在上述代码中，变量a被提升到函数作用域的顶端，等价于以下代码：
function test(){
var a;
a = 1;
console.log(a);
}
同样，从上述代码可以看出，虽然变量提升能够带来提前声明的问题，但对于性能来说，这是很有帮助的。
如何巧用局部变量提升
在编写代码时，为了提高JavaScript代码的性能，我们可以遵循以下几点：
- 变量和函数的声明应该尽可能集中在函数文首，方便将其提升到顶端。
例如，以下代码中变量声明和函数声明分散在整个函数体内，导致代码的可读性和性能受到影响：
function test(){
var num1 = 1;
var num2 = 2;
var num3 = 3;
console.log(num1 + num2 + num3);
function add(num1, num2){
return num1 + num2;
}
console.log(add(num2, num3));
}
在重构代码时，可以将其优化为：
function test(){
var num1, num2, num3;
function add(num1, num2){
return num1 + num2;
}
num1 = 1;
num2 = 2;
num3 = 3;
console.log(num1 + num2 + num3);
console.log(add(num2, num3));
}
- 重复执行的代码应该存储到局部变量中，避免重复计算。
例如，以下代码中，每次执行循环时，都需调用函数getRandomInt：
for(var i = 0; i < 10; i++){
console.log(getRandomInt(1, 10));
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
重构代码时，我们可以将getRandomInt调用的计算结果缓存在一个局部变量中：
for(var i = 0; i < 10; i++){
var randomNum = getRandomInt(1, 10);
console.log(randomNum);
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
通过以上优化，重复计算被避免，代码也更易读。
通过巧用局部变量提升，我们可以有效地提升JavaScript代码的性能，降低系统的CPU和内存小号，提高代码的稳定性和可读性。