变量声明

变量声明总结

首先，我们知道在学习javascript的过程中，学习到了多种声明变量的方式，那它们有什么不同呢？
总共有下面这些:

ES5
var 关键字
function 关键字

ES6
let 关键字
const // 声明常量
class // 声明类
import // 导入模块

ok ,暂时只有这些了

var

var 是一开始，我们就接触的声明变量的方式，由于javascript是基于对象的弱类型语言，所以
变量储存的是什么数据类型由值来决定

语法：
var 变量名 = 值;

① 允许重复声明

var a = 10;
var a = 100;

console.log(a) // 100

这种情况，后面会覆盖前面的，因为变量名相同，而且这种写法极其不合理
变量声明了，干嘛还有声明一次，并且还允许，假设在一种环境下，不小心将前面声明过的变量覆盖了在怎么办?

② 作用域

我们知道使用var 声明的变量在全局作用域下是全局变量，在局部声明是局部变量


<script>
	
	var a = 10; // 全局变量
	
	function dome(){
		var a = 20; // 局部变量
		
		console.log(a) // 20
	}

<//script>

③ 变量提升

使用 var 声明变量会存在变量声明提升的问题，我们声明部分，会提升到当前作用域的最顶端【只提升变量，不提升值】

console.log(a) // undefind

var a  = 20;

// 局部作用域中也是一样

隐式声明

我们说，任何变量，未经声明就赋值，此变量为全局所有，
也就是说任何变量，不管你在何处，只要是没有声明就赋值，此变量就归全局


a = 20; // 
console.log(a) // 20
console.log(window.a) // 20

function

function 是我们用来声明函数的一种方式，其本质上也是一种变量声明，
函数名就是变量名，只能声明函数的这种数据类型是 function类型，
用function声明的是函数对象，作用域与var一样，是函数作用域。

function dome(a){
	// 函数作用域
	
}

① 函数提升

在预编译的过程中，会发生两种情况，① 变量声明提升 ② 函数声明整体提升

<script>
	
	dome();
	
	function dome(){ // 全局函数
		var a = 20; 
		
		console.log(a) // 20
		
		dome1();
		function dome1(){
			
		}
	}

<//script>

我们知道js是一种解释性语言，通俗来说就是，解析一行代码，执行一行代码，并且是按照顺序执行的
我们也可以称之为循序结构, 但是上面函数调用写在了函数的前面，竟然也能调用，是因为js在执行前会把函数整体提升到作用域的
最顶端

let ES6+

let 声明变量是ES6才有的，它对比var,有几个特点

① 不允许重复声明
② 没有变量提升
③ let声明的变量可以具有块级作用域
⑤ let声明的全局变量不在是顶层对象的属性【window】

通过代码我们来看一下

// ① 不允许重复声明

let a  = 10;
let a = 20 // SyntaxError: 语法错误

// ② 没有变量提升
console.log(a); // ReferenceError : 非法的错误
let a = 10;

// ③ let声明的变量可以具有块级作用域

{
	// 块级作用域
	let a  = 10;
}
console.log(a) // ReferenceError: a is not defined


//  ⑤ let声明的全局变量不在是 顶层对象的属性

let name = '张三'；

console.log(window.name) // undefind

const ES6+

const 一般我们是用来声明常量，这里我顺带提一下
使用const 声明的常量，与 let 基本相同唯一的不同点就是【不能被修改值】

const PI = 3.14;

PI = 3.15; // TypeError: Assignment to constant variable.

class ES6+

ES6引入了类的概念，有了class这个关键字，当然，类只是基于原型的面向对象模式的语法糖，
为了方便理解和开发而已，类的实质还是函数对象，类中的方法和对象其实都是挂在对应的函数对象的prototype属性下。


class Person{
	// 预先定义属性
	name = null;
	age = null;
	
	// 构造器
	constructor(name,age){
		this.name = name;
		this.age = age;
	}
	
	say(){
		console.log('我叫'+this.name+',我的年龄'+this.age)
	}
}

// 实例化
let p = new Person('小丽丽', 18);
p.say() // 我叫小丽丽,我的年龄18
// 通过new 关键字后， name 与 age 会成为实例的属性，而方法会自动跑到实例的原型上

//--------------------------------

// 还有这种形式
let Person = class Me {
    getClassName() {
        return Me.name;
    }
};
其实就相当于 
var Person = function test(){}

// Class其实就是一个function，但是有一点不同，Class不存在变量提升，也就是说Class声明定义必须在使用之前。

Class不存在变量提升，也就是说Class声明定义必须在使用之前

import

ES6采用import来代替node等的require来导入模块。

import {$} from './jquery.js'

$对象就是jquery中export暴露的对象。

import接受一个对象，所以我们使用对象的解构赋值方式来结构到 jquery暴露的对象

注意，import命令具有提升效果，会提升到整个模块的头部，首先执行。