# 函数

# 函数参数的默认值

  • 参数变量是默认声明的,所以不能用letconst再次声明
function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}
1
2
3
4
  • 参数默认值是惰性求值的
let x = 99;
function foo(p = x + 1) {
  console.log(p);
}

foo() // 100

x = 100;
foo() // 101
1
2
3
4
5
6
7
8
9
  • 参数默认值可以与解构赋值的默认值,结合起来使用
function foo({x, y = 5}) {
  console.log(x, y);
}

foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined
1
2
3
4
5
6
7
8

上面代码只使用了对象的解构赋值默认值,没有使用函数参数的默认值。只有当函数foo的参数是一个对象时,变量xy才会通过解构赋值生成。如果函数foo调用时没提供参数,变量xy就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。

function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5
1
2
3
4
5
  • 参数默认值的位置
// 例一
function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 报错
f(undefined, 1) // [1, 1]

// 例二
function f(x, y = 5, z) {
  return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

如果传入undefined,将触发该参数等于默认值,null则没有这个效果。

  • 函数的length属性

指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真。

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

这是因为length属性的含义是,该函数预期传入的参数个数。某个参数指定默认值以后,预期传入的参数个数就不包括这个参数了。同理,后文的rest参数也不会计入length属性。

(function(...args) {}).length // 0
1

如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1
1
2
  • 设置参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域
var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2) // 2
1
2
3
4
5
6
7
let x = 1;

function f(y = x) {
  let x = 2;
  console.log(y);
}

f() // 1
1
2
3
4
5
6
7
8
function f(y = x) {
  let x = 2;
  console.log(y);
}
f() // ReferenceError: x is not defined

var x = 1;
function foo(x = x) {
  // ...
}
foo() // ReferenceError: x is not defined
1
2
3
4
5
6
7
8
9
10
11

简单概括就是,如果函数的参数存在默认值,则参数区域将形成一个新的作用域,这个作用域处于外部作用域和函数作用域之间。

# rest参数

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

注意,rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。

// 报错
function f(a, ...b, c) {
  // ...
}
1
2
3
4

函数的length属性,不包括rest参数。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1
1
2
3

# 严格模式

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

# name属性

函数的name属性,返回该函数的函数名。这个属性早就被浏览器广泛支持,但是直到 ES6,才将其写入了标准。

需要注意的是,ES6 对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量,ES5 的name属性,会返回空字符串,而 ES6 的name属性会返回实际的函数名。

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"
1
2
3
4
5
6
7
// 具名函数
const bar = function baz() {};

// ES5
bar.name // "baz"

// ES6
bar.name // "baz"
1
2
3
4
5
6
7
8
(new Function).name // "anonymous"
1

Function构造函数返回的函数实例,name属性的值为anonymous

function foo() {};
foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "
(function f(){}).bind({}).name // "bound f"
1
2
3
4
5

bind返回的函数,name属性值会加上bound前缀。

# 箭头函数

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

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
1
2
3
4
5

箭头函数有几个使用注意点。

  • 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
  • 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
  • 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用rest参数代替。
  • 不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
  • 不可以使用supernew.target

# 尾调用优化

“尾调用优化”(Tail call optimization),即只保留内层函数的调用帧。

function f() {
  let m = 1;
  let n = 2;
  return g(m + n);
}
f();

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

// 等同于
g(3);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

注意,只有不再用到外层函数的内部变量,内层函数的调用帧才会取代外层函数的调用帧,否则就无法进行“尾调用优化”。

function addOne(a){
  var one = 1;
  function inner(b){
    return b + one;
  }
  return inner(a);
}
1
2
3
4
5
6
7

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

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

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

本站总访问量    次