es6 简介 简化的object 箭头函数

对象的简化写法

ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁

let foo = "bar"
let baz ={foo}
等同于
const baz = {foo:foo}

//除了属性简写，方法也可以简写。
const fun = {
  method() {
    return "Hello!";
  }
};
// 等同于

const fun = {
  method: function() {
    return "Hello!";
  }
};

箭头函数

es6允许用箭头（=>）声明函数，更加快捷方便。()=>{}等价于function (){}。
箭头函数与简单函数的区别
没有参数时

语法：变量名 = ()=>{函数体}
//1.没有参数的情况  ()=>{}
var f =()=>{
    console.log("10"); //"10"
}
f();

有参数时
语法：变量名=(参数1，参数2)=>{函数体}，如果只有一个参数，可以将（）省略，两个或两个以上参数不能省略(),每个参数之间用’,’隔开。

一个参数的情况
var f = n =>{
    var sum = 0;
     for(let i = 0;i <= n;i++){
        sum += i;
    }
    console.log(sum); //5050
}
f(100);
//多个参数的情况，不能省略(),多个参数之间用,隔开
var f4 = (n,m)=>{
    console.log(n*m);
}
f4(10,20);

注：es5写的函数，都可以用es6的箭头函数表示出来。

有返回值时
语法：变量名 = (参数)=>{return 返回值}

//普通函数返回值
function fun5(n,m) {
    return n*m;
}
console.log(fun5(2,3)); //6

//箭头函数返回值
var fu = (n,m)=>{
    return n*m;
}
console.log(fu(10,20)); //200

如果函数体中就一条语句，可以省略大括号｛｝，如果这一条语句是返回值，还可以省略return关键字。

//1.如果函数体中就一条语句，可以省略{}
let f=n=>console.log(n);//10
f(10)

//2.如果这一条语句是返回值，则还可以省略return关键字
var f1 =(n,m)=> n*m; //省略return
console.log(f1(10,20)); //200

箭头函数中的this
在全局函数的中的this

//1.在window中定义，this指向window
function fun(){
    console.log(this); //window
}
fun();
var fun1 = n =>{
    console.log(this); //window
}
fun1();

Window中声明的函数,es5和es6中的this都指向window。

在事件处理函数中的this

var oDiv = document.getElementById("box");
oDiv.onclick = function () {
    console.log(this); //div
}
oDiv.onclick = ()=>{
    console.log(this); //window
}

在事件处理函数中的this

var oDiv = document.getElementById("box");
oDiv.onclick = function () {
    console.log(this); //div
}
oDiv.onclick = ()=>{
    console.log(this); //window
}

如果是作为事件处理函数，es5中的this指向的是当前触发事件的对象，箭头函数指向的是window

在对象方法中的this

//在构造函数中给对象添加了eat方法，调用这个方法会返回一个函数
function  Person() {
    this.eat = function () {
        return function () {
            console.log(this);
        }
    }
}
var p = new Person();
p.eat()(); //函数返回到外面，全局调用，this-->window

//箭头函数里面的this，在那定义就指向谁
function  Dog() {
    this.eat = function () {
        return ()=>{
            console.log(this);
        }
    }
}
var d = new Dog();
d.eat();  //在Dog构造函数里面调用，this--->Dog

函数声明在对象方法中，es5中因为函数传出到全局所以指向的是window，es6中函数在那定义的就指向谁，所以this指向Dog。

注：箭头函数注意点

1. 箭头函数内的this对象，就是定义时所在的对象，而不是使用时所在的对象
2. 不可以当做构造函数，不能使用new 命令 否则会抛出错误
3. 不可以使用arguments对象,该对象在函数体内不存在。如果要用可以使用rest参数