ES6----入门(二)

接上次:https://blog.csdn.net/qq_38163146/article/details/102538651

三　　函数

1，参数默认值
　　ES6首次添加了参数默认值。我们再也不用在函数内部编写容错代码了。

function add(a=1,b=2){
    return a + b;
 }
 add();//3
 add(2);//4
 add(3,4);//7

和参数默认值一起，ES6还带来了不定参。它的功能和使用arguments差不多。

function add(...num){
     return num.reduce(function(result,value){
         return result + value;
     });
 }
add(1,2,3,4);//10

下面介绍的箭头函数没有arguments属性，如果箭头函数内要实现不定参，上述方式就是一个不错的选择了。
2，箭头函数
　　箭头函数实现了一种更加简洁的书写方式，并且也解决了关键字声明方式的一些麻烦事儿。箭头函数内部没有arguments，也没有prototype属性，所以不能用new关键字调用箭头函数。
　　箭头函数的书写方式：参数 => 函数体

let add = (a,b) => {
     return a+b;
}
 let print = () => {
     console.log('hi');
 }
 let fn = a => a * a;
 //当只有一个参数时，括号可以省略，函数体只有单行return语句时，大括号也可以省略，强烈建议不要省略它们，是真的难以阅读

当函数需要直接返回对象时，建议用变量保存，然后返回变量名，或用小括号把对象包裹起来。否则将抛出错误。

var returnObj = () =>{
  var obj = {name:'ren',age:12};
    retufn obj;
 };
//var returnObj = () => ({name:'ren',age:12});

箭头函数和普通函数最大的区别在于其内部this永远指向其父级AO对象的this。

普通函数在预编译环节会在AO对象上添加this属性，保存一个对象。每个普通函数在执行时都有一个特定的this对象，而箭头函数执行时不会在自己的this属性上添加一个新对象，而是直接引用父级AO对象上this绑定的对象。普通函数的AO对象只有在函数执行时才产生，换言之，普通函数的this是由函数执行时的环境决定。而箭头函数的特别之处在于，当函数被定义时，就引用了其父级AO对象的this，即箭头函数的this由定义时的环境决定。

根据箭头函数的特点，不难推测：如果定义对象的方法直接使用箭头函数，那么函数内的this将直接指向window。
 

var age = 123;
let obj = {
    age:456,
    say:() => {
         console.log(this.age);
     }
};
obj.say();//123
 //对象是没有执行期上下文的（AO对象），定义对象的方法实际上是在全局作用域下，即window

如果你一定要在箭头函数中让this指向当前对象，其实也还是有办法的（但是没必要这么麻烦啊，直接使用普通函数不是更好吗？）：
 

 var age = 123;
 let obj = {
      age:456,
     say:function(){
         var fn = () => {
          console.log(this.age);
         }
          return fn();
     }
  };
 obj.say();//456

       test函数在全局执行时，其this指向window，这时也产生了箭头函数的定义，于是箭头函数内的this也被指向了window，所以最终打印出window对象。
      当我们手动改变test函数执行时this的指向时，箭头函数定义所绑定的this实际上也被我们修改了。所以最终打印出obj。

四　　class（类）　　
　　1，创建类
　　class 作为对象的模板被引入ES6，你可以通过 class 关键字定义类。class 的本质依然是一个函数。

 class Ex {//关键字申明方式
    constructor(name){
         this.name = name;
         this.say = () => {
             console.log(this.name);
         }
     }
     methods(){
         console.log('hello ' + this.name);
     }
     static a = 123;
     static m = () => {
         console.log(this.a);
     };
 }
 //let ex = class{}  字面量方式
 var example = new Ex('ren');
 example.say();//'ren'
 Ex.m();//123
20 example.methods();//'hello ren'

constructor是创建类必须的方法，当使用new调用类创建实例时，将自动执行该方法，该方法和构造函数类似，默认返回this对象。实例的方法和属性都定义在constructor内部.相当于构造函数的this方式。

类保留了prototype属性，类中的方法不需要使用function关键字，并且方法之间不需要逗号隔开。类中定义的方法实际上还是保存在类的prototype属性上。

使用static关键字定义类的静态属性和方法。类中不能定义共有属性，要想定义实例的共有属性还是需要使用prototype属性：     Ex.prototype.属性名 = 属性值。
创建实例依然使用new关键字。

2，类的继承
　　类的继承通过extends关键字实现。

 class Person {
     constructor (name,age){
         this.name = name;
         this.age = age;
     }
     say(){
         console.log(this.name + ':' + this.age);
     }
 }
 class Student extends Person{
     constructor (name,age,sex){
         super(name,age);
         this.sex = sex;
     }
 }
 var student = new Student('ren',12,'male');
 student.name;//'ren'
 student.sex;//'male'
 student.say();//'ren:12'

子类继承自父类，不会隐式的创建自己的this对象，而是通过super()引用父类的this。这个过程和在子构造函数内使用父构造函数call(this)很像，但他们有本质的区别。另外，ES6规定，super()必须在子类的this之前执行。所以一般我们把super()放在子类constructor方法的第一行，这样准没错！

五　　异步机制
ES6新增了两种实现异步的新机制，Promise和Generator。文笔有限，怕讲的不清楚，误人子弟，请有兴趣的同学去下面的链接继续学习，廖老师的教程也是受很多人推崇的，当然MDN更官方。（实际上是需要较大篇幅才能讲明白，这里就偷个懒了）
      1，Promise

　　https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

　　https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544

　　2，Generator

　　https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator

　　https://www.liaoxuefeng.com/wiki/1022910821149312/1023024381818112