ES6系列教程第八篇--箭头函数详解

绝地灬酷狼 2022-05-21 04:43 202阅读 0赞

# 一、什么是箭头函数 #

箭头函数是ES6新增的一种函数，我们先看看一个简单的ES5匿名函数。

function(x){
      	return x*x;
      }

写成箭头函数就是下面这个样子：

(x)=>x*x;

对于习惯ES5的同学，初次认识箭头函数的感觉，书写简洁，但是有点晦涩。我们来分析下：

入参写在()中，=>指向函数体，对于单行表达式，\{...\}以及return都省略了

如果是多行表达式，如下：

此时，\{...\}于return是不能省略的。

箭头函数能使我们的书签更加简洁。

setTimeout(function(x,y){
        x+y
    },300)
    //等价于
    setTimeout((x,y) => x+y, 300)
    var result = values.sort(function (a, b) {
    return a - b;
    });
    //  等价于
    var result = values.sort((a, b) => a - b);

有没有一些高大上的感觉呢。

# 二、this的用法 #

箭头函数除了对书写的简洁外，对this对象也进行了改造。我们先来看个ES5的this用法：

handle.geEvent()返回的是fn(),此时等价执行window.fn();所以为undefined。

如果要是fn函数中的this直接指向当前的对象handle，我们就需要转换下：

我们在用箭头函数重写handle

var handle = {
        event: 'click',
        getEvent: function () {
            var b = this.event; // 'click'
            var fn=  ()=>console.log(  this.event);//'click'
            return fn();
        }
    };
    handle.getEvent();

此时，fn函数体中的this对象，不需要转换，就是指向当前的handle函数对象。

所以，总结一下，ES5函数中的this指向函数的调用者，ES6的箭头函数中this指向是其函数，是一种词法作用域。

一直以来this对象一直是一个令人头痛的问题，在对象方法中使用this，必须非常小心。箭头函数 ” 绑定 ” this，很大程度上解决了这个困扰。

上一篇：[ES6系列教程第七篇--Module详解][ES6_--Module]

[ES6_--Module]: https://blog.csdn.net/tcy83/article/details/80822561