ES6特性

Babel：Es6 -> Es5转换器

一、let/const

1. let定义变量，const定义常量
2. 不能重复定义
3. 块级作用域
4. 不存在变量提升

二、箭头函数

1. 参数 -> 表达式/语句
2. 继承外层作用域

//没有独立作用域
var obj = {
    commonFn: function(){console.log(this)}, //obj
    arrowFn: () => {console.log(this)} //指向obj所在作用域：window
}

"use strict";

var _this = void 0;

var obj = {
  commonFn: function commonFn() {
    console.log(this);
  },
  //obj
  arrowFn: function arrowFn() {
    console.log(_this);
  } //指向obj所在作用域：window

};

1. 不能用作构造函数
2. 没有prototype属性

let commonFn = function(){};
let arrowFn = () => {};

console.log(commonFn.prototype)
console.log(arrowFn.prototype) //undefined

三、模板字符串

1. 反引号标识``
2. 支持多行字符串
3. 支持变量和函数表达式

四、Promise

4.1 promise 结构

new Promise((resolve, reject)=>{
    $.ajax({
        url : 'http://happymmall.com/user/get_user_info.do',
        type: 'post',
        success(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    });
}).then((res)=>{
    console.log('success:', res);
},(err) => {
    console.log('error:', err);
});

4.2 链式promise

var promiseFn1 = new Promise((resolve, reject)=>{
    $.ajax({
        url : 'http://happymmall.com/user/get_user_info.do',
        type: 'post',
        success(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    });
});

var promiseFn2 = new Promise((resolve, reject)=>{
    $.ajax({
        url : 'http://happymmall.com/cart/get_cart_product_count.do',
        type: 'post',
        success(res){
            resolve(res);
        },
        error(err){
            reject(err);
        }
    });
});


promiseFn1.then(()=>{
    console.log('promiseFn1 success');
    return promiseFn2;
}).then(()=>{
    console.log('promiseFn2 success');
});

五、Class：面向对象

5.1 面向对象-类的继承

1. 关键词Class，function的语法糖
2. 构造函数，constructor，初始化类的对象
3. extends：类的继承
4. super：调用父类的构造函数，子类没有this对象，将父类的this对象继承过来

5.2 面向对象-对象

1. 对象里属性的简写
2. 对象里方法的简写
3. 属性名可以为表达式
4. 其他扩展

5.2.1 class constuctor

//ES6
class Animal{
    constructor(name){
        this.name = name;
    }
    getName(){
        return this.name
    }
}

let animal = new Animal('animal test');

//ES5 
"use strict";
var Animal = /*#__PURE__*/function () {
  function Animal(name) {
    this.name = name;
  }

  var _proto = Animal.prototype;
  
  _proto.getName = function getName() {
    return this.name;
  };

  return Animal;
}();

var animal = new Animal('animal test');

5.2.2 类的继承

class Animal{
    constructor(){
        this.name = 'animal';
    }
    getName(){
        return this.name
    }
}

class Cat extends Animal{
    constructor(){
        super() //调用父类的this
        this.name = 'cat';
    }
}

let animal  = new Animal();
let cat     = new Cat();
console.log(animal.getName())
console.log(cat.getName())

5.2.3 对象的用法

var name    = 'Rosen',
    age     = 18;
var obj = {
    name: name,
    age: age,
    getName: function(){
        return this.name;
    },
    getAge: function(){
        return this.age;
    }
}

let name    = 'Rosen',
    age     = 18;

let obj = {
    // 变量名可以直接用作对象的属性名称
    name,
    age,
    // 对象里的方法可以简写
    getName(){
        return this.name;
    },
    // 表达式作为属性名或方法名
    ['get' + 'Age'](){
        return this.age;
    }
}


// Object对象的扩展
Object.keys(obj);
Object.assign({a:1},{b:1}); //{a:1, b:1}

六、ES6模块化

1. 解决一个复杂问题时自顶向下逐层把系统划分成若干个模块的过程
2. CommonJs，AMD,CMD
3. 关键词：export、import