Home

Appearance

函数拓展 ​

严格模式 ​

从 ES5 开始，函数内部可以设定为严格模式。

javascript
function fn(a, b) {
  'use strict';
  // code
}
function fn(a, b) {
  'use strict';
  // code
}

ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。

javascript
function doSomething(a, b = a) {
  'use strict';
  // code
}
function doSomething(a, b = a) {
  'use strict';
  // code
}

函数参数的默认值 ​

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。 简洁许多，而且非常自然。

基本设置默认值方式

javascript
function Fn(x = 1, y = 2) {
  this.x = x;
  this.y = y;
}
const fn = new Fn();
fn // { x: 1, y: 2 }
function Fn(x = 1, y = 2) {
  this.x = x;
  this.y = y;
}
const fn = new Fn();
fn // { x: 1, y: 2 }

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。

解构赋值设置默认值方式

javascript
function foo({x, y = 5} = {}) {
  console.log(x, y);
}
// 当 foo(); 由于 x 没有传入，所以会报错

function bar({x, y = 5} = {}) {
  console.log(x, y);
}
// bar(); x 会从右边对象解构获得，不会报错。
function foo({x, y = 5} = {}) {
  console.log(x, y);
}
// 当 foo(); 由于 x 没有传入，所以会报错

function bar({x, y = 5} = {}) {
  console.log(x, y);
}
// bar(); x 会从右边对象解构获得，不会报错。

利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。

函数设置默认值length变化
指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数（默认值不被包括）。

这是因为length属性的含义是，该函数预期传入的参数个数。

javascript
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2

函数设置默认值作用域变化
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

javascript
var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2) // 2
var x = 1;
function f(x, y = x) {
  console.log(y);
}
f(2) // 2

rest 参数 ​

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

函数的length属性，不包括 rest 参数。
rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

函数的name属性 ​

如果将一个匿名函数赋值给一个变量：

ES5 的name属性，会返回空字符串。 ES6 的name属性会返回实际的函数名。

javascript
let f =  () => {};
f.name // ""  es5
f.name // "f" es6
let f =  () => {};
f.name // ""  es5
f.name // "f" es6

如果将一个具名函数赋值给一个变量：

则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。

javascript
let f =  function fn(){};
f.name // fn  es5
f.name // fn  es6
let f =  function fn(){};
f.name // fn  es5
f.name // fn  es6

箭头函数 ​

ES6 允许使用“箭头”（=>）定义函数。箭头函数使得表达更加简洁，但有写特性特区别于普通函数。

  • 箭头函数不能使用 new；
  • 箭头函数没有独立的 this；
  • 箭头函数不支持绑定 super；
  • 箭头函数其主体不能使用 yield；
  • 箭头函数没有独立的 arguments；
javascript
const obj = {
  count: 10,
  fn() {
    // 该方法语法将“this”与“obj”上下文绑定。
    setTimeout(() => {
      // 由于箭头函数没有自己的绑定，
      // 而 setTimeout（作为函数调用）本身也不创建绑定，
      // 因此使用了外部方法的“obj”上下文。
      this.count++;
      console.log(this.count);
    }, 300);
  },
};
obj.fn(); // 输出 11
const obj = {
  count: 10,
  fn() {
    // 该方法语法将“this”与“obj”上下文绑定。
    setTimeout(() => {
      // 由于箭头函数没有自己的绑定，
      // 而 setTimeout（作为函数调用）本身也不创建绑定，
      // 因此使用了外部方法的“obj”上下文。
      this.count++;
      console.log(this.count);
    }, 300);
  },
};
obj.fn(); // 输出 11

利用箭头函数轻松的将 setTimeout 中的 this 绑定到obj 对象上。

尾调用优化 ​

  • 尾调用（Tail Call）是函数式编程的一个重要概念，是指某个函数的最后一步是调用另一个函数。
  • 尾调用之所以与其他调用不同，就在于它的特殊的调用位置。

尾调用的意义

  1. 函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。所有的调用帧，就形成一个“调用栈”（call stack）。
  2. 尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。
  3. 这就叫做“尾调用优化”（Tail call optimization），即只保留内层函数的调用帧。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用帧只有一项，这将大大节省内存。这就是“尾调用优化”的意义。
javascript
function f() {
  let m = 1;
  let n = 2;
  return g(m + n);
}
f();

// 等同于
function f() {
  return g(3);
}
f();

// 等同于
g(3);
function f() {
  let m = 1;
  let n = 2;
  return g(m + n);
}
f();

// 等同于
function f() {
  return g(3);
}
f();

// 等同于
g(3);

尾递归

  • 函数调用自身，称为递归。尾调用自身，就称为尾递归。

递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。

阶乘函数

依然是一个尾递归，虽然函数与n做了乘法运算。

javascript
function factorial(n){
    if( n === 1) return 1;
    return n * factorial(n-1);
}
function factorial(n){
    if( n === 1) return 1;
    return n * factorial(n-1);
}

斐波那契数列

没有使用尾递归，这种情况是非常糟糕的。很容易就爆栈了。

javascript
function fib(n){
    if( n <= 1) return 1;
    return fib(n-1) + fib(n-2);
}
function fib(n){
    if( n <= 1) return 1;
    return fib(n-1) + fib(n-2);
}

使用了尾递归，永远不会发生“栈溢出”错误。

javascript
function fib(n, ac1=1, ac2=1) {
    if( n <= 1) return ac2;
    let temp = ac2 + ac1;
    return fib(n-1, ac2, temp);
}
function fib(n, ac1=1, ac2=1) {
    if( n <= 1) return ac2;
    let temp = ac2 + ac1;
    return fib(n-1, ac2, temp);
}

TIP

递归本质上是一种循环操作。纯粹的函数式编程语言没有循环操作命令，所有的循环都用递归实现，这就是为什么尾递归对这些语言极其重要。对于其他支持“尾调用优化”的语言（比如 Lua，ES6），只需要知道循环可以用递归代替，而一旦使用递归，就最好使用尾递归。

ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。这是因为在正常模式下，函数内部有两个变量，可以跟踪函数的调用栈。

  • func.arguments：返回调用时函数的参数。
  • func.caller：返回调用当前函数的那个函数。

尾调用优化发生时，函数的调用栈会改写，因此上面两个变量就会失真。严格模式禁用这两个变量，所以尾调用模式仅在严格模式下生效。

尾递归优化

尾递归之所以需要优化，原因是调用栈太多，造成溢出，那么只要减少调用栈，就不会溢出。怎么做可以减少调用栈呢？就是采用“循环”换掉“递归”。

函数参数的尾逗号 ​

ES2017 允许函数的最后一个参数有尾逗号（trailing comma）。

catch 命令的参数省略 ​

javascript
try {
  // ...
} catch (err) {
  // 处理错误
}
try {
  // ...
} catch (err) {
  // 处理错误
}

很多时候，catch代码块可能用不到这个参数。但是，为了保证语法正确，还是必须写。ES2019 做出了改变，允许catch语句省略参数。

javascript
try {
  // ...
} catch {
  // ...
}
try {
  // ...
} catch {
  // ...
}

Function.prototype.toString() ​

ES2019 对函数实例的toString()方法做出了修改。

  • toString()方法返回函数代码本身，以前会省略注释和空格。
javascript
function /* foo comment */ foo () {}
foo.toString() 
// function foo() {} 

function /* foo comment */ foo () {}
foo.toString()
// "function /* foo comment */ foo () {}" es6+
function /* foo comment */ foo () {}
foo.toString() 
// function foo() {} 

function /* foo comment */ foo () {}
foo.toString()
// "function /* foo comment */ foo () {}" es6+