ES6---＞箭头函数、类、模块化

箭头函数：

  一、定义

• 只有定义式  用于解决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

 <script type="module">   
    //type="module"  module: es6解释器 babel 是浏览器内置的软件
    //因为js读取外部文件然后编码 需要babel软件来解码
   import a from 'js文件路径'
</script>