ES6 类和模块
1.类
Class是ES6中的语法糖，本质上还是function。（语法看起来更简洁、优雅、可读性高、可维护性高）
Java中的语法糖：
List list = new ArrayList();
list.add(new Object());
...
for(Object obj : list){
System.out.println(obj);
}
list.forEach(obj -> System.out.println(obj) );
//Java语言不管怎么变，本质上还是类、强类型
基础用法
类定义
类表达式可以为匿名或命名
// 匿名类
let Example = class {
constructor(a) {
this.a = a;
}
}
// 命名类
let Example = class Example {
constructor(a) {
this.a = a;
}
}
类声明
class Example {
constructor(a) {
this.a = a;
}
}
注意要点：不可重复声明。
class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been
// declared
let Example = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been
// declared
会有以下报错
注意要点
类定义不会被提升，这意味着，必须在访问前对类进行定义，否则就会报错。
类中方法不需要 function 关键字。
方法间不能加分号。
new Example();
class Example {}
类的主体
属性
prototype
ES6 中，prototype 仍旧存在，虽然可以直接自类中定义方法，但是其实方法还是定义在 prototype 上的。 覆盖方法 / 初始化时添加方法
Example.prototype={
//methods
}
添加方法
Object.assign(Example.prototype,{
//methods
})
静态属性
静态属性：class 本身的属性，即直接定义在类内部的属性（ Class.propname ），不需要实例化。 ES6 中规定，Class 内部只有静态方法，没有静态属性。
class Example {
// 新提案
static a = 2;
}
// 目前可行写法
Example.b = 2;
公共属性
class Example{}
Example.prototype.a = 2;
实例属性
实例属性：定义在实例对象（ this ）上的属性。
class Example {
a = 2;
constructor () {
console.log(this.a);
}
}
name 属性
返回跟在 class 后的类名(存在时)。
let Example1=class Exam {
constructor(a) {
this.a = a;
}
}
console.log(Example1.name); // Exam
let Example2=class {
constructor(a) {
this.a = a;
}
}
console.log(Example2.name); // Example2
输出结果是
2.模块Module
ES6的重大的语法升级，提高了封装性。
一个 js文件就是一个模块，编译的时候就可以确定依赖关系，控制暴露的方法、变量等。
ES6严格模式
1.对变量的影响
变量必须先声明、再使用。提高代码的可读性、可维护性
2.对类的影响
向只读的属性赋值会报错
对于不可扩展的对象添加属性会报错
3.对函数的影响
普通函数中，不允许使用this引用window对象
函数的参数必须唯一
eval()函数不会创建变量或函数
模块的export 与 import
export
//该模块定义了2个变量，一个函数、一个类
let myName = "Tom";
let myAge = 20;
let sayHello = function(){
return "My name is" + myName + "! I'm '" + myAge + " years old. "
}
let myClass = class myClass {
static a = "yeah!";
}
//导出，该模块暴露给外接使用的列表：
export{
myName,
myAge,
sayHello,
myClass
}
import
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="module">
//从另一个模块导入
import { myName, myAge, sayHello, myClass } from "./js/module1.js";
alert(sayHello())
</script>
模块化：模块是一个文件
好处：
1.减少命名冲突
2.避免引入时的层层依赖
3.可以提升执行效率
方法一：
1.如何导出（暴露）
export let run =function(){
console.log("run-->fun")
}
export let userName = "jinglijuan"
2.如何引入（依赖）
<script type="module"> //设置为module类型
import {run,userName} from "./module.js" //内部名字要与暴露出来的名字一致
run();
console.log(userName);
</script>
方法二：暴露的数据过多时使用
1. 导出时正常导出
export let run =function(){
console.log("run-->fun")
}
export let userName = "jinglijuan"
2. 导入时
<script type = "module">
import * as 别名 from './mo.js'
console.log(别名.暴露的方法或者变量名)
console.log(mo.run)
</script>
方法三：直接导出对象
1. 导出：
let run = function(){
console.log("jinglijuan")
}
let userName = "jinglijuan"
let age = 21
let sex = "woman"
export {
run,
userName,
age,
sex
}
2. 如何导入（接收）：
import {userName,age} from "./mo.js"
console.log(userName,age)
方法四：导出的数据起个别名
导出时通过as给导出的内容起个别名，接收时需要以别名为依据
1. 导出：
let age = 21
let sex = "woman"
export {
age as a,
sex
}
2. 如何导入（接收）：
import {userName,a} from "./mo.js"
console.log(userName,a)
方法五：引入时增加别名（从不同文件中的引入的变量名或者方法名可能是重名的，引入时使用会报错）
1.引入
import {userName as moUserName} from './mo4.js'
import {userName} from './mo5.js'
console.log(moUserName,userName)
方法六：默认导出（使用频率最高）
只能有一个默认对象
1.导出（暴露）
export default {
userName:'jinglijuan',
age:20
}
2.引入（接收）
import mo from "./mo.js"
console.log(mo.userName)
方法七：混合导出
1.导出（暴露）
export default{
userName:'jinglijuan',
age:20
}
export let sex = '男'
2.引入
import mo,{sex} from './mo7.js'
console(mo.userName,mo.age,sex)
模块的特点：
1.可以相互依赖
2.当你的模块被多次引入时，只执行一次
在多处引入相同的js文件，那么这个js文件只会执行一次