ES5与ES6之间区别

1.箭头函数

箭头函数ES6中新的函数定义形式，function name(arg1,arg2){…}可以写成 (arg1,arg2)=>{…}；
意义在于：1.函数写法更加简洁；2.可以解决ES6之前函数执行中this是全局变量的问题。
例如：

function fn(){
    console.log('real',this); //'real',{a:100}
    var arr = [1,2,3];
    //普通JS
    arr.map(function(item){
        console.log('js',this); //'js',window
        return item+1;
    })
    /ES6
    arr.map(item=>{
        console.log('es6',this);  // 'es6',{a：100}
        return item+1;
    })
}

fn.call({a:100})

例子中ES6之前版本，this并没有指向应该指向的“{a:100}”,而是指向了window，这很让人费解；但是ES6箭头函数解决了这个问题，this指向了正确的调用对象。
如果想了解关于this的详细解析，可以访问我的另一篇文章《this详解》https://blog.csdn.net/kf_qyl/article/details/81300787

2.ES6模块化使用

ES6中的模块化实现更加简洁，例如：
如果只是输出一个唯一对象，使用export default即可，代码如下：

//创建util.js文件
export default {
    a:100;
} 
//创建index.js文件
import obj from './util.js'
console.log(obj);

如果想输出多个对象，就不能用default了，且import的时候需要加上{…}，代码如下：

//创建util.js文件
export function fn1(){
    alert('fn1')
}
export function fn2(){
    alert('fn2')
}

//创建index.js文件
import {fn1,fn2} from 'util.js'
fn1();
fn2();

3.ES6 class 和普通构造函数的区别

普通JS的构造函数

function MathHandle(x,y){
    this.x=x;
    this.y=y;
}
MathHandle.prototype.add = function(){
    return this.x + this.y
}

var m = new MathHandle(2,3);
console.log(m.add()); //5

ES6的构造函数

class MathHandle {
    constructor (x,y) {
        this.x = x;
        this.y = y;
    }
    add() {
        return this.x + this.y;
    }
}
const m = new MathHandle(1,2);
console.log(m.add()) //3

需要注意以下几点：

1.class是一种新的语法形式，是class name{…}这种形式和函数的写法完全不同；
2.class创建的构造函数，函数体要放在class中的constructor函数中，constructor即构造器，初始化实例的默认行为；
3.class中函数的写法是add(){…}这种形式，并没有function关键字。

4.ES6继承的实现

普通JS实现继承

function Animal(){
    this.eat = function(){
        console.log('animal eat')
    }
}
function Dog(){
    this.bark = function(){
        console.log('dog bark')
    }
}
Dog.prototype = new Animal();
var hsp = new Dog();
hsp.eat(); //animal eat
hsp.bark(); //dog bark

ES6的继承

class Animal {
    constructor(name) {
        this.name = name;
    }
    eat() {
        console.log(this.name, 'eat')
    }
}
class Dog extends Animal {
    constructor(name) {
        super(name);
        this.name = name;
    }
    say() { 
        console.log(this.name} ,'say')
    }
}
const dog = new Dog('哈士奇');
dog.say()

注意：
1.使用extend即可实现继承，这样更加符合经典面向对象语言的写法；
2.子类的constructor一定要执行super(),以调用父类的constructor；

其中ES6还增加了一种基本类型：symbol，两个数据结构：set，map；promise也被正式纳入规范。