ES6中的箭头函数

1.箭头函数的介绍

1.1什么是箭头函数

ES6中允许使用 => 来定义函数。箭头函数相当于匿名函数，并简化了函数定义。

1.2 基本语法

箭头函数在语法上比普通函数简洁多。箭头函数就是采用箭头 => 来定义函数，省去关键字function。函数的参数放在=>前面的括号中，函数体跟在=>后的花括号中

// 箭头函数
let fn = (name) => {
    // 函数体
    return "Hello"+name;
};

// 等同于

let fn = function (name) {
    // 函数体
    return "Hello"+name;
};

1.3 箭头函数的参数

①如果箭头函数没有参数，写空括号, 注意空括号不能省略

//没有参数，写空括号
let fn = () => {
    console.log('hello');
};

②如果箭头函数有一个参数，则可以省去包裹参数的括号

//只有一个参数，可以省去参数括号
let fn = name => {
    console.log("Hello"+name)
};

③如果箭头函数有多个参数，将参数依次用逗号(,)分隔，包裹在括号中。

let fn = (val1, val2, val3, val4) => {
    return "val1+val2+val3+val4";
}

1.4 箭头函数的函数体

①如果箭头函数的函数体只有一句执行代码，并且返回某个变量或者js表达式，可以省去函数体花括号{ }

//返回一个简单的js表达式num1+num2
let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
  return num1 + num2;
};

②如果箭头函数的函数体只有一句代码，并且返回的是一个对象，函数体的花括号必须不能省略

//错误写法—花括号会被解释为函数体
let getStudent = id => {
    id: id,
    name: 'gaby'
};
//正确写法
let getStudent = id => ({
    id: id,
    name: 'gaby'
});

③如果箭头函数的函数体只有一条语句且不需要返回值（最常用于回调函数），加上void关键字

let fn = () => void doesNotReturn();

2.箭头函数中this指向规则

2.1 箭头函数没有原型prototype

let fn = () => {
    console.log('Hello World !')
};
console.log(fn.prototype); // undefined

上面例子输出undefined,说明箭头函数没有原型prototype，因此箭头函数没有this指向

2.2 箭头函数不会创建自己的this

var id = 'Global';
var obj = {
    id: 'Obj',
    //方法a普通函数定义
    a: function() {
        console.log(this.id)
    },
    
    //方法b用箭头函数定义
    b: () = >{
        console.log(this.id)
    } 
};
obj.a(); //Obj
obj.b(); //Global

解析：普通函数作为对象的方法调用，this指向所属的对象（谁调用它就指向谁），this.id 就是obj.id；箭头函数继承定义它的执行环境的this，指向window对象，指向全局变量，输出Global。花括号{}无法形成一个单独的执行环境，所有它依然在全局中。

所以箭头函数不会创建自己的this，箭头函数的this是通过继承过来的。

 

3.axios中this指向问题

3.1使用箭头函数来解决

methods:{
    loginAction(formName){
        this.$axios.post('http://124.0.0.1/u.subLogin',{
            username:this.username,
            password:this.password,
        }).then((response)=>{
            console.log(this.list);
           //this.list =response.data
        }).catch((err)=>{
            console.log(this);
        })
    }
}

3.3使用.bind(this)在回调函数后面解决

getRequest:function(){
    axios.get('http:/124.0.0.1/u/subBOf',{
        username:this.username,
        password:this.password
    }).then(function(resp){
        console.log(this.list)
    //this.list = resp.data
    }).bind(this)
    .catch(function(err){
        console.log(err)
    })
}

3.2使用that传递this变量

getRequest:function(){
    var that =this;
    axios.get('http:/124.0.0.1/s/shus',{
        username:this.username,
        passoword:this.password
    }).then(function(resq){
        console.log(that.list)
        //that.list = resq.data
    }).catch(function(err){
        console.log(err)
    })
}

综上所述：所以说我们要尽量要保证this是vue，也就是尽量都写箭头函数而不是function函数