声明变量的六种方法

[ES6 声明变量的六种方法](#ES6 声明变量的六种方法)
- var
- function
- let
- const
- class
- import
顶层对象的属性

1. ES6 声明变量的六种方法

ES5 只有两种声明变量的方法： var 命令和 function 命令。

ES6 除了添加 let 和 const 命令，还有另外两种声明变量的方法： import 命令和 class 命令。

所以，ES6 一共有6种声明变量的方法。

以下是ES6声明变量的六种方法，每种方法都附带一个简单的示例：

1.1. var

这是ES5就有的声明方式，但在ES6中仍然可用。

var声明的变量可以被重新声明，且存在变量提升现象。

javascript 复制代码

var x = 10;
console.log(x); // 输出: 10

1.2. function

函数声明也可以视为一种声明变量的方式，它用于定义可重用的代码块。

javascript 复制代码

function sayHello(name) {
  console.log("Hello, " + name);
}
sayHello("World"); // 输出: Hello, World

1.3. let

let允许你声明一个块级作用域的本地变量，解决了var变量提升和重复声明的问题。

javascript 复制代码

if (true) {
  let y = 20;
  console.log(y); // 输出: 20
}
// console.log(y); // 这里会报错，因为y只在if块内有效

1.4. const

用于声明一个常量，其值在初始化后不能被重新赋值。同样具有块级作用域。

javascript 复制代码

const PI = 3.14;
// PI = 3; // 尝试更改PI的值会引发错误
console.log(PI); // 输出: 3.14

1.5. class

用于定义类，类是一种特殊的函数，用来创建具有特定原型的对象。

类的声明也会创建一个新的引用类型。

javascript 复制代码

class Person {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}
let person = new Person("Alice");
person.sayName(); // 输出: Alice

1.6. import

虽然通常用于模块导入，但也可以视作一种声明变量的方式，因为它可以将模块中的导出内容作为局部变量使用。

javascript 复制代码

// 假设有一个模块 export.js
// export.js 内容:
// export const msg = "Hello from export.js";

// 另一个文件中使用import
import { msg } from './export.js';
console.log(msg); // 输出: Hello from export.js

这些声明方式丰富了JavaScript的语法，使得开发者可以根据不同场景选择最合适的变量声明方式。

2. 顶层对象的属性

顶层对象，在浏览器环境指的是 window 对象，在 Node 指的是 global 对象。ES5 之中，顶层对象的属性与全局变量是等价的。

js 复制代码

window.a = 1;
a // 1
a = 2;
window.a // 2

上面代码中，顶层对象的属性赋值与全局变量的赋值，是同一件事。

顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计

败笔之一。

ES6 为了改变这一点，

一方面规定，为了保持兼容性， var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性；
另一方面规定， let 命令、 const 命令、 class 命令声明的全局变量，不属于顶层对象的属性。

也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

js 复制代码

var a = 1;
// 如果在 Node 的 REPL 环境，可以写成 global.a
// 或者采用通用方法，写成 this.a
window.a // 1

let b = 1;
window.b // undefined