es6箭头函数

最新推荐文章于 2023-05-02 16:33:01 发布

原创最新推荐文章于 2023-05-02 16:33:01 发布 · 169 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#es6

前端同时被 2 个专栏收录

27 篇文章

订阅专栏

27 篇文章

订阅专栏

本文详细介绍了ES6中新增的箭头函数的定义方式及其使用特点，包括简化语法、this关键字绑定特性，并通过具体案例分析了箭头函数在不同上下文中this指向的区别。

es6中新增的定义函数的方式

(arg1,arg2,...) => {函数体};// ()放参数，{}中作为函数体
// 等价于
function (arg1,arg2,...) {
    函数体;
}

箭头函数的调用

采用函数表达式的方式，用变量进行接收

const fn = (n) => {
    return n * 10
};
    console.log(fn(3));

注意：
1. 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
```
const fn = (n) => n * 10;
console.log(fn(3));
```
2. 如果形参只有一个，可以省略小括号
```
const fn2 = n => n + 10;
console.log(fn2(3));
```

与this关键字的关系

与传统的函数不一样，箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

传统的函数

 var obj = { uname: 'zt'};
    function fn() {
        console.log(this);
        return function () {
            console.log(this);
        }
    }

    let resFn = fn.call(obj);// 指向obj
    resFn();// 指向window

关于传统函数this指向问题可以参考：类和对象

箭头函数

var obj = { uname: 'zt'};
function fn() {
    console.log(this);
    return  () => {
        console.log(this);
    }
}

let resFn = fn.call(obj);// 指向obj
resFn();// 指向obj

解释：由于箭头函数不绑定this关键字，其定义区域便为其this的指向，由于箭头函数定义在fn中，且fn指向为obj，因此箭头函数中的this指向也是obj

案例分析
```
var obj = {
        uname: 'zt',
        fn: () => {
            console.log(this.uname);
        }
    }
    obj.fn();// undefined
```
箭头函数不绑定this关键字，其定义区域便为this指向，但是对象没有作用域，因此当前箭头函数中的this指向的是全局作用域，而全局作用域中没有uname属性，因此输出为undefined；