【阮一峰ES6入门教程学习笔记】函数的扩展

函数扩展

• 函数参数默认值

  • 基本用法

    • ES6 之前，不能直接为函数的参数指定默认值，常用变通方法：y = y || ‘World’;
    • ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。log(x, y = ‘World’)
    • 参数变量是默认声明的，所以不能用let或const再次声明。
    • 使用参数默认值时，函数不能有同名参数。
    • 参数默认值是惰性求值的。

  • 与解构赋值默认值结合使用

    • 只使用了对象的解构赋值默认值，没有使用函数参数的默认值。function foo({x, y = 5})
    • 注意区别：m1({x = 0, y = 0} = {}) 和m2({x, y} = { x: 0, y: 0 })，一个只设置了解构赋值默认值，一个只设置了函数参数的默认值
    • fetch(url, { body = ‘’, method = ‘GET’, headers = {} }) 这种写法不能省略第二个参数，至少必须给个{}

  • 参数默认值的位置

    • 通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的，除非显式输入undefined,输入null是没有这个效果的。

  • 函数的length属性

    • 指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。rest 参数也不会计入length属性。
    • 如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了：(function (a = 0, b, c) {}).length // 0

  • 作用域

    • 一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。
    • 等到初始化结束，这个作用域就会消失。这种行为在不设置参数默认值时，是不会出现的。
    • 如果参数的默认值是一个函数，该函数的作用域也遵守这个规则。
    • 注意区分下面两个的区别：
      

  • 应用

    • 利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。
    • 可以将参数默认值设为undefined，表明这个参数是可以省略的。
• rest参数
  • ES6 引入 rest 参数（形式为 …变量名 ），用于获取函数的多余参数，这样就不需要使用arguments对象了。
  • rest 参数就是一个真正的数组(arguments是伪数组)，数组特有的方法都可以使用。
  • 注意，rest 参数之后不能再有其他参数（即只能是最后一个参数）
• 严格模式
  • ES5中函数内部可以设定为严格模式
  • ES2016规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。
    • 原因：函数内部的严格模式，同时适用于函数体和函数参数。但是，函数执行的时候，先执行函数参数，然后再执行函数体。这样就有一个不合理的地方，只有从函数体之中，才能知道参数是否应该以严格模式执行，但是参数却应该先于函数体执行。
    • 解决方法：
      • 设定全局性的严格模式
      • 把函数包在一个无参数的立即执行函数里面
• name属性
  • 返回该函数的函数名。
  • ES6做了一点修改，如果将一个匿名函数赋值给一个变量，ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。比如 5：f.name // “” 6： f.name // “f”
  • Function构造函数返回的函数实例，name属性的值为anonymous。
  • bind返回的函数，name属性值会加上bound前缀。foo.bind({}).name // “bound foo”
• 箭头函数

  • 基本用法

    • 允许使用“箭头”（=>）定义函数。
    • 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
    • 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
    • 由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
    • 箭头函数可以与变量解构结合使用

  • 用处

    • 简化回调函数
    • rest 参数与箭头函数结合使用

  • 注意点

    • 函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
      • 箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域
      • 箭头函数可以让this指向固定化，这种特性很有利于封装回调函数
    • 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
    • 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。
    • 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。因为没有自己的this,也无法调用call apply,bind方法来指定this。

  • 不适用场合

    • 定义对象的方法，且该方法内部包括this。
    • 需要动态this的时候，也不应使用箭头函数。

  • 嵌套的箭头函数

    • 箭头函数内部，还可以再使用箭头函数。
    • 部署管道机制（pipeline）：即前一个函数的输出是后一个函数的输入。

    const pipeline = (…funcs) =>
    val => funcs.reduce((a, b) => b(a), val);

    • 很方便地改写 λ 演算。
• 尾调用
  • 啥是尾调用？
    • 是指某个函数的最后一步是调用另一个函数，必须是函数，其他任何情况都不算。尾调用不一定出现在函数尾部，只要是最后一步操作即可。
  • 尾调用优化
    • 原理
      • 函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。
      • 尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。
    • 意义
      • 即只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。
    • 注意
      • 只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。
      • ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。
  • 尾调用优化的应用—尾递归
    • 啥是尾递归
      • 函数调用自身，称为递归。如果尾调用自身，就称为尾递归。
    • 尾递归好处
      • 递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。
    • 递归函数的改写
      • 尾递归的实现，往往需要改写递归函数，确保最后一步只调用自身。做到这一点的方法，就是把所有用到的内部变量改写成函数的参数。
        • 方法一是在尾递归函数之外，再提供一个正常形式的函数。
          • 这其中可以尝试柯里化，将多参数的函数转换成单参数的形式
        • 方法二就是采用 ES6 的函数默认值。
      • 小结
        • 重要性：递归本质上是一种循环操作。纯粹的函数式编程语言没有循环操作命令，所有的循环都用递归实现
        • 对于其他支持“尾调用优化”的语言（比如 Lua，ES6），只需要知道循环可以用递归代替，而一旦使用递归，就最好使用尾递归。
    • 尾递归优化的实现
      • 尾递归局限
        • 尾递归优化只在严格模式下生效，那么正常模式下，或者那些不支持该功能的环境中，有没有办法也使用尾递归优化呢？
        • 采用“循环”换掉“递归”。要做的就是将原来的递归函数，改写为每一步返回另一个函数。
• 其他扩展
  • ES2017允许函数的最后一个参数有尾逗号
  • ES2019对toString()做了修改，明确要求返回一模一样的原始代码。比如返回函数代码本身，以前会省略注释和空格，修改后不会省略。
  • ES2019 允许catch命令的参数省略：以前明确要求catch命令后面必须跟参数err