ES6中的箭头函数

秒速五厘米 2023-10-13 19:56 40阅读 0赞

## 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 ###

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

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

![79007a9e58404269bb423ecc9e118900.png][]

## 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函数

[79007a9e58404269bb423ecc9e118900.png]: https://img-blog.csdnimg.cn/79007a9e58404269bb423ecc9e118900.png