美文网首页
ES6解读1:Arrows箭头函数

ES6解读1:Arrows箭头函数

作者: 蚊小文 | 来源:发表于2017-10-01 22:30 被阅读0次

    箭头函数使用类似于=>这样的语法定义函数,支持表达式模式和语句模式;
    var f = (a) => {return a;}
    如果箭头函数不需要参数或需要多个参数,就可以将参数放入一对圆括号中,如果只有一个参数可以不使用圆括号。

    var f = () => 5;
    var sum = (num1, num2) => num1 + num2;
    

    如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
    var sum = (num1, num2) => { return num1 + num2; }

    看完以上介绍,想必大家应该能大概了解箭头函数了,我也总结了他和普通函数之间的区别,以下:

    • 箭头函数不能被直接命名,不过允许它们赋值给一个变量;
    • 箭头函数不能用做构造函数,你不能对箭头函数使用new关键字;
    • 箭头函数也没有prototype属性;
    • 箭头函数绑定了词法作用域,不会修改this的指向。
      最后一点是箭头函数最大的特点,我们来仔细看看。

    词法作用域

    箭头函数最大特点在于和父作用域具有一样的this。我们知道普通函数的this在函数定义的时候就确定了,使用箭头函数时再也不用担心this跳来跳去了。
    此外如果箭头函数定义在另一个函数里面,箭头函数会共享它父函数的arguments变量。

    // 和父作用域具有相同的this
    var bob = {
      _name: "Bob",
      _friends: [],
      printFriends() {
        this._friends.forEach(f =>
          console.log(this._name + " knows " + f));
      }
    }
    function square() {
      let example = () => {
        let numbers = [];
        for (let number of arguments) {
          numbers.push(number * number);
        }
        return numbers;
      };
      return example();
    }
    
    square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]
    

    相关文章

      网友评论

          本文标题:ES6解读1:Arrows箭头函数

          本文链接:https://www.haomeiwen.com/subject/kanaextx.html