函数
函数参数的默认值
- 参数变量是默认声明的,所以不能用
let
或const
再次声明
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
2
3
4
- 参数默认值是惰性求值的
let x = 99;
function foo(p = x + 1) {
console.log(p);
}
foo() // 100
x = 100;
foo() // 101
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
2
3
4
5
6
7
8
上面代码只使用了对象的解构赋值默认值,没有使用函数参数的默认值。只有当函数foo
的参数是一个对象时,变量x
和y
才会通过解构赋值生成。如果函数foo
调用时没提供参数,变量x
和y
就不会生成,从而报错。通过提供函数参数的默认值,就可以避免这种情况。
function foo({x, y = 5} = {}) {
console.log(x, y);
}
foo() // undefined 5
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]
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
2
3
这是因为length
属性的含义是,该函数预期传入的参数个数。某个参数指定默认值以后,预期传入的参数个数就不包括这个参数了。同理,后文的rest
参数也不会计入length属性。
(function(...args) {}).length // 0
如果设置了默认值的参数不是尾参数,那么length
属性也不再计入后面的参数了。
(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1
2
- 设置参数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域
var x = 1;
function f(x, y = x) {
console.log(y);
}
f(2) // 2
2
3
4
5
6
7
let x = 1;
function f(y = x) {
let x = 2;
console.log(y);
}
f() // 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
2
3
4
5
6
7
8
9
10
11
简单概括就是,如果函数的参数存在默认值,则参数区域将形成一个新的作用域,这个作用域处于外部作用域和函数作用域之间。
rest
参数
ES6 引入rest
参数(形式为...变量名
),用于获取函数的多余参数,这样就不需要使用arguments
对象了。rest
参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
注意,rest
参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
// 报错
function f(a, ...b, c) {
// ...
}
2
3
4
函数的length
属性,不包括rest
参数。
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, ...b) {}).length // 1
2
3
严格模式
ES2016 规定只要函数参数使用了默认值、解构赋值、或者扩展运算符,那么函数内部就不能显式设定为严格模式,否则会报错。
name
属性
函数的name
属性,返回该函数的函数名。这个属性早就被浏览器广泛支持,但是直到 ES6,才将其写入了标准。
需要注意的是,ES6 对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量,ES5 的name
属性,会返回空字符串,而 ES6 的name
属性会返回实际的函数名。
var f = function () {};
// ES5
f.name // ""
// ES6
f.name // "f"
2
3
4
5
6
7
// 具名函数
const bar = function baz() {};
// ES5
bar.name // "baz"
// ES6
bar.name // "baz"
2
3
4
5
6
7
8
(new Function).name // "anonymous"
Function
构造函数返回的函数实例,name
属性的值为anonymous
。
function foo() {};
foo.bind({}).name // "bound foo"
(function(){}).bind({}).name // "bound "
(function f(){}).bind({}).name // "bound f"
2
3
4
5
bind
返回的函数,name
属性值会加上bound
前缀。
箭头函数
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
2
3
4
5
箭头函数有几个使用注意点。
- 函数体内的
this
对象,就是定义时所在的对象,而不是使用时所在的对象。 - 不可以当作构造函数,也就是说,不可以使用
new
命令,否则会抛出一个错误。 - 不可以使用
arguments
对象,该对象在函数体内不存在。如果要用,可以用rest
参数代替。 - 不可以使用
yield
命令,因此箭头函数不能用作 Generator 函数。 - 不可以使用
super
、new.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);
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);
}
2
3
4
5
6
7
ES6 的尾调用优化只在严格模式下开启,正常模式是无效的。这是因为在正常模式下,函数内部有两个变量,可以跟踪函数的调用栈。
func.arguments
:返回调用时函数的参数。func.caller
:返回调用当前函数的那个函数。
尾调用优化发生时,函数的调用栈会改写,因此上面两个变量就会失真。严格模式禁用这两个变量,所以尾调用模式仅在严格模式下生效。