• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

《ES6标准入门》函数的拓展

开发技术 开发技术 1天前 4次浏览

函数的拓展

5. 箭头函数

5.1 基本用法

  • ES6 允许使用“箭头”(=>)定义函数。
    var f = () => 5
    // 等同于
    var f = function () { return 5 }

    var sum = (num1, num2) => num1 + num2
    // 等同于
    var sum = function(num1, num2) {
        return num1 + num2
    }
  • 如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
  • 由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
  • 函数只有一行语句,且不需要返回值,可以不用写大括号了。
  • 箭头函数的一个用处是简化回调函数。
// 普通函数写法
    [1,2,3].map(function (x) {
        return x * x
    })

    // 箭头函数写法
    [1,2,3].map(x => x * x)

5.2 使用注意点

  1. 箭头函数没有自己的this对象。
    • 它没有自己的this对象,内部的this就是定义时上层作用域中的this。
    • 由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。
  2. 不可以当作构造函数,也就是说,不可以对箭头函数使用new命令,否则会抛出一个错误。
    • 正是因为它没有this,所以也就不能用作构造函数。
  3. 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
  4. 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

5.3 不适用场合

  • 第一个场合是定义对象的方法,且该方法内部包括this。
    const cat = {
        lives: 9,
        jumps: () => {
            this.lives--;
        }
    }

如果是普通函数,该方法内部的this指向cat;如果写成上面那样的箭头函数,使得this指向全局对象,因此不会得到预期结果。这是因为对象不构成单独的作用域,导致jumps箭头函数定义时的作用域就是全局作用。
对象的属性建议使用传统的写法定义,不要用箭头函数定义。

  • 第二个场合是需要动态this的时候,也不应使用箭头函数。

学识浅薄,如有错误,恳请斧正,在下不胜感激。


程序员灯塔
转载请注明原文链接:《ES6标准入门》函数的拓展
喜欢 (0)