箭头函数：
一、定义
只有定义式 用于解决this的问题 不能用做创建对象
let fn = (n1, n2) => {
return n1 + n2
}
var re = fn(1, 2)
console.log(re) // 3
'
运行运行
当箭头函数的形参只有一个时 可以省略参数整体小括号
var fn = a => a
fn(10); //10
'
运行运行
当箭头函数没有参数或者有多个参数 要用 () 括起来
var fn = (a,b) => a+b;
fn(1,2); //3
'
运行运行
当箭头函数函数体只有一行语句且需要返回结果时 可以省略 {}和return 结果会自动返回
var fn = (a, b) => a * b
var re = fn(10, 20)
console.log(re) //200
'
运行运行
当箭头函数函数体有多行语句 用 {} 包裹起来 表示代码块
var fn = (a,b) => {
let result = a+b;
return result;
}
fn(1,2); // 3
'
运行运行
当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来
var fn = (id,name) => ({id: id, name: name});
f(41,559); // {id: 41, name: 559}
当形实参个数不等 ...剩余形参必须是最后一个形参
var fn = (a, ...b) => {
console.log(b) //[20, 30]
}
fn(10, 20, 30)
//a=10
'
运行运行
二、作用
箭头函数里面没有 this 对象，解决函数内部this的指向问题
箭头函数中this是离它最近的嵌套级别的function/方法这个函数的调用者 没有就是window
示例：
var obj = {
say: function () {
var obj2 = {
say: () => {
console.log(this) //{say: ƒ}
}
}
obj2.say()
}
}
obj.say()
/解析：
this上一层的function是写在say方法中
调用该方法的调用者是obj对象
所以this代表obj对象 /
'
运行运行
示例：
var obj = {
say: () => {
console.log(this)
}
}
obj.say()
/解析：
this所在的箭头函数的上一层作用域是全局作用域 没有function和方法
所以this代表window /
'
运行运行
三、总结
要有个箭头
箭头的前面是小括号，放形参，只有一个形参的时候可以省略小括号；
箭头的后面是函数体；
如果函数体只有一个语句，没有{}，此时的返回值不需要return；
箭头函数里面的this总是指向最靠近的function 内部的this；
对象里面的方法，尽可能不要使用箭头函数；
箭头函数里没有arguments 可使用…reset，接收的是是形参之外的所有的实参 是数组类型
类
一、概念
前言：
js是一个基于面向对象设计的单线程的静态脚本语言
js不是面向对象的语言 只是基于 底层机制仍是原型的思想
引入类是为了更好的把js设计成面向对象的语言的语法特征
在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类
class 的本质是 function
它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法
类不可重复声明
类定义不会被提升，这意味着必须在访问前对类进行定义，否则就会报错
二、定义
命名类：
class Person{}
var p1=new Person()
'
运行运行
匿名类：
var fn=class{}
var f1=new fn()
'
运行运行
注： 严格模式下类名首字母必须大写
三、类的主体
属性：ES6的类中不能直接定义变量，变量被定义在constructor中
class Person {
constructor() {
this.name = "hahah"; //定义变量
}
}
let p = new Person();
console.log(p.name);
'
运行运行
方法
constructor 方法是类的默认方法，创建类的对象时被调用，也称为类的构造方法
一个类中有且仅有一个构造方法 若不写constructor 系统默认内置一个空的构造函数
class Person{
constructor(){
console.log("haha")
}
}
var p = new Person() //将执行constructor方法
'
运行运行
原型方法：不需要使用function关键字，通过“对象.原型方法”调用。
class Person {
say() {
console.log("haha");
}
add(a, b) {
console.log(a + b);
}
}
let p = new Person();
p.say(); //haha
p.add(1, 2); //3
'
运行运行
静态方法：使用static修饰，调用时不需要创建对象，直接通过“类名.静态方法”调用
class Person {
static sum(a, b) {
console.log(a + b);
}
}
Person.sum(1, 2);
'
运行运行
示例：
class Teacher {
constructor(name) {
this.name = name
}
b = 100 //对象的属性 不改变全局
say() { //原型对象的方法
console.log(this.name) //lili
}
static say3() {} //静态方法 用类名访问
static a = 20 //静态属性 用类名访问
}
var t1 = new Teacher("lili")
console.log(t1) //b: 100 name: "lili"
t1.say()
console.log(Teacher.say3) //ƒ say3() {}
'
运行运行
四、继承
解决代码的复用
使用extends关键字实现继承
子类可以继承父类中所有的方法和属性
子类只能继承一个父类（单继承），一个父类可以有多个子类
子类的构造方法中必须有super()来指定调用父类的构造方法，并且位于子类构造方法中的第一行
子类中如果有与父类相同的方法和属性，将会优先使用子类的（覆盖）
super() 调用父类构造器，必须存在，且位于子类构造器第一行的位置
class Person {
constructor(arg) {
this.life = 1
}
}
class Student extends Person {
constructor(arg) {
super() //让Student类创建的对象有Person类的功能 写在第一排
this.name = arg
}
}
var s1 = new Student("lili")
console.log(s1) //Student {life: 1, name: 'lili'} 拥有父类的life属性
'
运行运行
示例：
class People {
//父类构造方法
constructor() {
this.a = 100; //父类中定义的变量
console.log("People constructor");
}
//原型方法
eat() {
console.log("eat...")
}
//静态方法
static play() {
console.log("play...")
}
}
class Student extends People {
//子类构造方法
constructor() {
super(); //调用父类构造器，必须存在，且位于子类构造器第一行的位置
this.b = 200; //子类定义的变量
console.log("Student constructor");
}
study() {
console.log("study...");
}
}
let s = new Student();
console.log(s.a,s.b); //100,200
s.eat();
s.study();
Student.play();
'
运行运行
模块化
一、概念
模块化的设计思想是：在编译时就能确定模块的依赖关系以及输入和输出的变量
模块化分为导出（export） 与导入（import）两个模块
js代码写入页面的3种方式：
1.行内式:js引擎要去执行的标签的某些(事件)属性中
2.嵌入式
3.导入 src的地址是一个js的路径 会加载js编码(jsonp)
二、模块化的特点
ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等
每个模块都有自己的上下文(作用域)，每个模块内声明的变量都是局部变量，不会污染全局作用域
每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取
三、模块的导入与导出
export导出：
与default关联使用 并且一个js模块中只能有一个export default语句
var a=20;
export default a; //导出一个变量
export var fn=function(){}; //导出一个函数
单独（按需）导出 必须用导出的标识符来按需导入,可以有多个单独导出
model.js中：
export var num=100 //可以写多次
export function tool () {return obj}
export default {a:1,b:2} //只能写一次
html文件中：
import {num,tool} from "model.js" //按需导入
import {a} from "model.js" //按需导入
import all from "model.js" //全部导入
import导入：
与from关联使用，此时script标签的type必须设置为module
单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次。
import 同一模块，声明不同接口引用，会声明对应变量，但只执行一次 import
