【ES6】之箭头函数

ES6之箭头函数

1.函数声明方式

箭头函数是一个匿名函数 function() —— ()=>

    let fun = () => {
        console.log("have fun");
    }
    fun();

    var obj = {
        fun: () => {
            console.log("have fun either");
        }
    }
    obj.fun();

2.匿名函数的参数

没有参数时 var fun = () => {函数体}

有参数时 var fun = (参数1, 参数2,…) => {函数体}

 // 有两个或者两个以上参数时
 let fun1 = (x, y, z) => {
     console.log(x + y + z);
 }
 fun1(1, 2, 4);

 // 有且仅有一个参数时, 小括号可以省略
 let fun2 = x => {
     console.log(x);
 }
 fun2(5);

当只有一条语句时,{函数体}的{}可以省略

 let fun3 = (x) => console.log(x);
 fun3(10);

如果这仅有的语句是return语句, 那么return必须去掉

 let fun4 = (x) => x;
 console.log(fun4(15));

 let fun5 = () => 123;
 let fun6 = () => "123";
 let fun7 = () => [1, 2, 3, 4];
 let fun8 = () => ({ name: "zs", age: 20, sex: "female" });
 // 人家不知道这个花括号是对象的花括号还是函数体的花括号,需要加一个小扩号
 console.log(fun5());
 console.log(fun6());
 console.log(fun7());
 console.log(fun8());

箭头函数的this指向

普通函数里的this, 谁调用就指向谁

箭头函数没有自己的this, 会根据定义时的上下文环境决定, 即定义时, 他的父级this指向哪里,他就指向哪里

1.在全局中定义

console.log(this);//window
let fun1=()=>{
    console.log(this);//Window 
}
fun1()

2.在事件处理函数中定义

console.log(this);
btn1.onclick=()=>{
    console.log(this);//Window 
}

3.在对象方法中定义

 let obj1={
        name:"zs",
        fun:function(){
            setTimeout(function(){
                console.log(this);//因为定时器是window调用的，所以this是window
            },1000)
            console.log(this);//obj1
            setTimeout(()=>{
                console.log(this);//{name: "zs", fun: ƒ}  父级环境this是obj1,所以定时器里的箭头函数里的this指向 obj1
            },1000)

        }
    }
    obj1.fun()