箭头函数和this

箭头函数

　　ES6新增了一个使用箭头符号（=>）定义函数的语法特性

• 如果不需要传参数，可以直接用 () 返回。

　　函数代码：

let f=function(){
    return "li";
}

　　箭头函数语法：

let f=()=>"li";

　　　

• 箭头也可传递两个及两个以上的参数，并实现运算后返回：

let f=function(name){
　　return　name;
}

　　箭头函数语法：

　　　　let f=参数=>返回值 ;

let f=(name)=>name;

　

• 如果需要有较复杂的运算，箭头右边也可使用传统函数体：

　　　　let f=()=>{}

let f=(x,y)=>{
    return x+y;
}
console.log(f(10,20));  //30

 

• 如果箭头右边是对象，就是返回是对象，则需用()包含

let f=function(name){
    return {
        name:name,
        age:100
    }
}
console.log(f("li").name); //li
console.log(f().age); //100

　　箭头函数：

　　　　let f=参数=>(对象==>return)

let f=name=>({name:name,age:18})

 

• 如果箭头左边是对象，即参数是对象的形式，而右边为对象属性运算，也是用 () 包含：

let f=({name,age})=>name+","+age;
console.log(f({name:"li",age:100}));  //li,100

 

• 自我执行函数也是可以使用箭头函数

(function(name){
    console.log(name);
})("li")

　　箭头函数：

((name)=>{
    console.log(name);
})("li")

 

扩展

　　1) 箭头支持一些内置函数的使用，比如 sort() 排序

let arr=[3,2,1].sort((a,b)=>a-b);
console.log(arr); // [1, 2, 3]

　　

　　2) 不确定参数时，不支持 arguments ，支持使用 ...other 模式

　　　　arguments 对应函数传递（实参）的所有参数 ，通过索引下标引用，第一个参数在索引0处

let f=function(x){
    console.log(arguments);
    return arguments[0]+arguments[1]
}
console.log(f(1,2)); //3

　　　　

 　　　不过在箭头函数中是不支持该绑定的，

　　　

 　　　箭头函数使用 ...other 

let f=(...other)=>{
    console.log(...other); //10 20
    return other[0]+other[1];
}
console.log(f(10,20)); //30

 

 　　3) 箭头函数也可以被 typeof 和 instanceof

let f=()=>{}
console.log(typeof f);  //function
console.log(f instanceof Function); //true

 

this指向

　　在ES6之前this的指向一直是一个比较头疼的问题

let obj={
    name:"li",
    age:100,
    f:function(){
        console.log(this);
        setTimeout(function(){
            console.log(this);
            console.log(this.name+","+this.age);
        },500)
    }
}
obj.f();

　　

 

 　this全局指向window，在某个对象内部指向当前对象。而上面的例子可以看到当obj对象下包含了类似setTimeout函数内部，此时this指向就会出现问题。web环境下会指向windeow，node环境下指向setTimeout。我这里this指向了window，因为window是有一个名为name的内置属性，返回就是默认值 空，而age不属于window内置属性的，返回就是undefined。这显然不是想要获得的内容。

　在之前处理这种情况的常用的方法，就是将this在setTimeout外部进行赋值保存：

let obj={
    name:"li",
    age:100,
    f:function(){
        let that=this;
        console.log(this);
        setTimeout(function(){
            console.log(that);
            console.log(that.name+","+that.age);
        },500)
    }
}
obj.f();

　　

 

 　箭头函数的出现，彻底解决了this在内部指向问题，指向所需的函数体本身。箭头函数中this是最外层定义的函数绑定，不受内部影响。

let obj={
    name:"li",
    age:100,
    f:function(){
        setTimeout(()=>{
            console.log(this.name+","+this.age);
        },500)
    }
}
obj.f();