ES6允许使用"箭头"(=>)定义函数,箭头函数引入是为了简化函数的书写。并且没有自己的thisargumentssupernew.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。
如下代码

    let foo = v => v;
    // 等同于
    let foo = function(v){
    return v;
    };

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分

    // 无参
    let foo = () => 5;
    // 等同于
    let function(){return 5};
    // 多个参数
    let sum = (num1, num2) => num1 + num2;
    // 等同于
    let sum = function(num1, num2){
    return num1 + num2;
    }

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回

    let sum = (num1, num2) => {return num1 + num2;};

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错

    // 错误写法
    let getTempObject = id => {id: id, name: "Tom"};
    // 正确写法
    let getTempObject = id => ({id: id, name: "Tom"});

下面是一种特殊情况 虽然可以运行 但会得到错误的结果

    leet foo = () => {a: 1};
    foo(); // 返回值undefined

如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了

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

箭头函数使得表达更加简洁

    const isEven = n => n % 2 === 0;
    const square = n => n * n;

上面代码只用了两行 就定义了两个简单的工具函数 如果不用箭头函数,可能就要占用多行,而且还不如现在写的醒目
箭头函数的一个用处是简化回调函数

    //正常函数写法
    let res = [1,4,3].filter(function (item){
    return item > 2;
    });
    // 箭头函数写法
    let res = [1,4,3].filter(item => item>2);

在箭头函数出现之前,每个新定义的函数都有它自己的 this值(在构造函数的情况下是一个新对象,在严格模式的函数调用中为 undefined,如果该函数被作为“对象方法”调用则为基础对象等)。this被证明是令人厌烦的面向对象风格的编程。

    function HeadAnd() {
      // HeadAnd() 构造函数定义 `this`作为它自己的实例.
      this.age = 0;

      setInterval(function foo() {
        // 在非严格模式, foo()函数定义 `this`作为全局对象, 
        // 与在 HeadAnd()构造函数中定义的 `this`并不相同.
        this.a++;
      }, 500);
    }

    let num = new Person();

在ECMAScript 3/5中,通过将this值分配给封闭的变量,可以解决this问题。

    function HeadAnd() {
      var head= this;
      head.a= 0;
      setInterval(function foo() {
        //  回调引用的是`that`变量, 其值是预期的对象. 
        head.a++;
      }, 500);
    }

箭头函数不能用作构造器,和new一起用会抛出错误。

    let Foo = () => {};
    let foo = new Foo();

箭头函数没有prototype属性。

    let Foo = () => {};
    console.log(Foo.prototype); // undefined
最后修改:2020 年 07 月 06 日 12 : 30 AM
如果觉得我的文章对你有用,请随意赞赏