在开发中我们会用到各种各样的前端框架，比如Vue.js，Angular.js和React.js等，这些框架给我们开发人员带来了极大的便利，在使用这些框架过程中，我们会经常声明一些变量进行使用，因此掌握不同关键字声明变量的特性，对我们来说显得至关重要，由于这些框架底层封装的都是JS的原生代码，深入理解JS声明变量的关键字var，function，let，const，export，import，class等的差别，成为我们使用这些框架的基础，下面将对这些关键字进行简单的解析。
目录
- var和function
- let和const
- export和import
- class
一、var和function
关键字var和function既可以声明全区变量（变量直接声明在标签<script></script>内部），又可以声明局部变量（变量声明在标签<script></script>子代码块内），不同的是var用来声明变量，function用来声明函数（个人理解函数是特殊的变量）
关键字function
<script>
//方法methodA为全局函数，可以在任何位置调用
function methodA(){
alert("A");
//方法methodB为局部函数，只能在方法methodA代码块内调用
function methodB(){
alert("B")
}
methodB();//调用方法methodB
}
methodA();//调用方法methodA
</script>
关键字var
<script>
//变量num为全局变量，可以在任何位置调用
var num = 1;
alert(num);//1
function methodA(){
//变量num2为局部变量，只能在方法methodA的局部代码块内调用
var num2 = 2;
alert(num);//1
alert(num2);//2
}
methodA();
</script>
二、let和const
let和const关键字声明的变量没有变量提升特性（只有变量声明后才可以调用）；let声明的变量具有区域隔离性，即let声明的变量在各自代码块内赋的值，只有在该代码块内有效，不同代码块相互独立，如果在该代码块内没有没赋值，则取上一级代码块的值作为该代码块的值；const关键字声明的变量除了具有局域隔离性外，其还具有只读性，即被声明赋值后，不可更改只能读取，如果赋值的为对象（值为对象的地址值），可对其对象的属性进行更改。
关键字let
<script>
//在该代码块内获取变量num值，只能获取该代码块赋予的值1
let num = 1;
alert(num);
function methodA(){
/**
* 在方法methodA代码块内获取变量num的值，如果该代码
* 块赋予了新值，则取新值2，如果没有赋予新值，则取上
* 一级代码块的值1
*/
num= 2;
alert(num);
}
methodA();
//此处获取变量num的值仍然是1
alert(num);
</script>
关键字const
<script>
//变量只能够赋值一次，作用范围同let
const num = 1;
alert(num);
function methodA(){
//变量num2只能在方法methodA代码块内获取
const num2 = 2;
alert(num2);//2
alert(num);//1
}
methodA();
alert(num);//1
</script>三、export和import
在实际开发中，我们经常遇到一个js模块要用到另一个js模块声明的变量，针对这种情况ES6语法给我们定义了关键字export，export default和import来实现，export（在模块中可以多次使用）和export default（在模块中只可以使用一次）都是用来修饰变量，将变量提升为模块级别；如果我们需要在其他模块使用该模块的变量，可以使用关键字import引入。
export.js文件
<script>
//export可以多次使用，将多个变量提升为模块级别
export const num = 1;
export const num2 = 2;
//export default在一个js模块中只能使用一次
export default const name = '齐天大圣';
</script>
import.js文件
<script>
/**
* import引入export default修饰的变量不需要加大括号，
* 而引入export修饰的变量需要输入具体的变量名，也可以
* 用as对变脸进行重新命名
*/
import name, {num as n, num2 as n2} from export.js
alert(n);//此处会直接弹出export.js声明的变量num值1
alert(n2);//此处会弹出export.js声明的变量num2值2
alert(name);//此处会弹出export.js声明的变量'齐天大圣'
</script>四、class
在最新的ES6语法中为了更接近传统语言的写法，引入了类关键字class作为对象模板，给前端开发人员更加清晰的结构变量结构
<script>
//定义一个普通的类，在中可以声明方法
class People{
constructor(name){
this.name = name;
}
toString(){
return 'hello JS'
}
}
var p = new People('小明')
alert(p.name);//小明
alert(p.toString());//hello JS
//获取对象p的数据类型，发现对象的本质仍然是function声明的函数
alert(typeof p);//function
/**
* 类也可以继承，规则类似于java语法
*/
class Student extends People{
constructor(name,age){
super(name);
this.age = age;
}
}
var s = new Student('小王',20);
alert(s.name);//小王
alert(s.age);//20
alert(s.toString());//hello JS
</script>总的来说，js中用来声明变量的只有关键字var，function和class，而let，const，export，export default和import只是用来修饰声明的变量，用来修饰变量的局域性和是否可重新进行赋值等特性。
