作用域和提升

作用域

作用域指的是有权访问的变量集合

在ES2015之前，在JavaScript中只有两种作用域类型：

• 局部作用域 —— 局部（函数内）声明的变量拥有局部作用域，只能在它们被声明的函数内访问

  （在函数完成时被删除）

• 全局作用域 ——全局（在函数之外）声明的变量拥有全局作用域，可以在 JavaScript 程序中的任何位置访问

  （在页面关闭时被删除）

函数参数也是函数内的局部变量；

如果为尚未声明的变量赋值，此变量会自动成为全局变量（严格模式中的JavaScript不允许在未被声明的情况下使用变量）

function myFunction() {
    carName = "porsche";
}


// 此处的代码能够使用 carName 变量

myFunction();

块作用域

通过 var 关键词声明的变量没有块作用域，在块{} 内声明的变量可以从块之外进行访问

{ 
  var x = 10; 
}
// 此处可以使用 x

ES2015引入了==let关键字==来声明拥有块作用域的变量，在块 {}内声明的变量无法从块外访问

{ 
  let x = 10;
}
// 此处不可以使用 x

重新声明变量

使用 var 关键字重新声明变量会带来问题

在块中重新声明变量也将重新声明块外的变量

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

使用 let 关键字重新声明变量可以解决这个问题

在块中重新声明变量不会重新声明块外的变量

var x = 10;
// 此处 x 为 10
{ 
  let x = 6; // const x = 6
  // 此处 x 为 6
}
// 此处 x 为 10

允许在程序的任何位置使用 var 重新声明 JavaScript 变量

var x = 10;

// 现在，x 为 10
 
var x = 6;

// 现在，x 为 6

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的

var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的

let x = 10;       // 允许
let x = 6;       // 不允许

{
  let x = 10;   // 允许
  let x = 6;   // 不允许
}

在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的

let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

在不同的作用域或块中，通过 let 重新声明变量是允许的

let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

通过 const 定义的变量与 let 变量类似，但不能重新赋值

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

// 但是常量对象是可以更改的

const car = {type:"porsche", model:"911", color:"Black"};

// 可以更改属性：
car.color = "White";

// 可以添加属性：
car.owner = "Bill";

// 但是无法重新为常量对象赋值
const car = {type:"porsche", model:"911", color:"Black"};
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

// 常量数组与常量对象是类似的

const 变量必须在声明时赋值

// 错误写法
const PI;
PI = 3.14159265359;

// 正确写法
const PI = 3.14159265359;

在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const

var x = 2;         // 允许
const x = 2;       // 不允许
{
  let x = 2;     // 允许
  const x = 2;   // 不允许
}

在同一作用域或块中，为已有的 const 变量重新声明或赋值是不允许的

const x = 2;       // 允许
const x = 3;       // 不允许
x = 3;             // 不允许
var x = 3;         // 不允许
let x = 3;         // 不允许

{
  const x = 2;   // 允许
  const x = 3;   // 不允许
  x = 3;         // 不允许
  var x = 3;     // 不允许
  let x = 3;     // 不允许
}

在另外的作用域或块中重新声明 const 是允许的

const x = 2;       // 允许

{
  const x = 3;   // 允许
}

{
  const x = 4;   // 允许
}

循环作用域

在循环中使用 var

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

// 在循环中使用的变量使用var重新声明了循环之外的变量

在循环中使用 let

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7

// 在循环中使用的变量使用let并没有重新声明循环外的变量

// 如果在循环中用 let 声明了变量 i，那么只有在循环内，变量 i 才是可见的

函数作用域

在函数内声明变量时，使用var和let很相似

它们都有函数作用域：

function myFunction() {
  var carName = "porsche";   // 函数作用域
}
function myFunction() {
  let carName = "porsche";   // 函数作用域
}

全局作用域

如果在块外声明，那么var和let也很相似

它们都拥有全局作用域：

var x = 10;       // 全局作用域
let y = 6;       // 全局作用域

HTML中的全局变量

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境

在 HTML 中，全局作用域是 window 对象

通过 var 关键词定义的全局变量属于 window 对象

var carName = "porsche";
// 此处的代码可使用 window.carName

通过 let 关键词定义的全局变量不属于 window 对象

let carName = "porsche";
// 此处的代码不可使用 window.carName

提升（Hoisting）

提升是JavaScript将所有声明提升到当前作用域顶部的默认行为（提升到当前脚本或当前函数的顶部）

• 在JavaScript中，可以在使用变量之后对其进行声明，或者说可以在声明变量之前使用它，也就是说，下面两种方式的结果是相同的

  // 方式一：
  x = 5; // 把 5 赋值给 x
   
  elem = document.getElementById("demo"); // 查找元素
  elem.innerHTML = x;                     // 在元素中显示 x
  
  var x; // 声明 x
  
  
  // 方式二：
  var x; // 声明 x
  x = 5; // 把 5 赋值给 x
  
  elem = document.getElementById("demo"); // 查找元素
  elem.innerHTML = x;                     // 在元素中显示 x
  

  
  

  通过var 定义的变量会被提升到顶端，通过let 和const定义的变量不会被提升到顶端

  
  

  在声明 let 变量之前就使用它会导致 ReferenceError

  变量从块的开头一直处于“暂时死区”，直到声明为止：

  carName = "Volvo";    // 可以在此处使用 carName
  var carName;
  
  // 在此处，不可以使用 carName
  let carName;
  
  carName = "Volvo";    // 不可以在此处使用 carName
  const carName = "Volvo";
  

• JavaScript只提升声明，不提升值