鸦杀's Blog

函数默认参数

2018-08-29

注:以下内容是我在阅读了《深入理解es6》《es6标准入门》《你不知道的JavaScript(下)》后所汇总整理,如有雷同存属笔记。


默认参数是es6函数里一个非常便利的特性。它解决了我们在不传参数或传参undefined时,函数使用默认值的问题。
在es5时代,经常能见到这样的代码:

1
2
3
4
var fn = function(timer) {
timer = timer || 1000
...
}

一些时候还需要处理参数为假值的问题。比如timer传0。
es6时代你可以这样来写

1
2
3
var fn = function(timer = 1000) {
...
}

我们来总结一下默认参数的好处

  • 简洁
  • 可读性强
    不用看具体代码就知道哪些参数是可省略的

    1
    function foo(optional = undefined) { ··· }
  • 更健壮
    调用接口拿掉这个参数,不会导致代码无法运行。

默认参数使用注意点
  • 1、参数变量是默认声明的,所以不能用let或const再次声明。
1
2
3
4
5
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
foo() // 调用时才报错

上面代码中,参数变量x是默认声明的,在函数体中,不能用let或const再次声明,否则会报错。

  • 2、使用参数默认值时,不能有同名参数。
1
2
3
4
5
6
7
8
9
10
/* 不报错 */
function foo(x, x, y) {
// ...
}

/* 报错 */
function foo(x, x, y = 1) {
// ...
}
// SyntaxError: Duplicate parameter name not allowed in this context
  • 3、当你指定了默认参数之后,会影响函数的length属性。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var fn= function(a, b, c){}
    fn.length
    // 3
    var fn= function(a = 1, b, c){}
    fn.length
    // 0
    var fn= function(a, b = 1, c){}
    fn.length
    // 1
    var fn= function(a, b, c = 1){}
    fn.length
    // 2

默认值的参数及它之后的参数都是不计入length长度的。

  • 4、默认参数如果是表达式,它是在函数调用时求值
    具体看下面默认参数表达式的内容

    默认参数表达式

    默认参数可以传表达式,如下面的例子:
    1
    2
    3
    4
    5
    6
    7
    8
    function getValue(value) {
    return value + 1
    }
    function add(first, second = getValue(first)) {
    return first + second
    }
    add(1)
    // 3

初次解析函数声明时不会调用getValue()方法,只有当调用add()函数且不传入第二个参数时才会调用。

因为默认参数是在函数调用时求值(惰性求值),所以可以使用先定义的参数作为后定义参数的默认值。但反过来是不可以的,引用参数默认值时,只允许引用前面参数的值,即先定义的参数不能访问后定义的参数。这里涉及到默认参数的临时死区(TDZ)的问题

与let声明类似,定义参数时会为每个参数创建一个新的标识符绑定,该绑定在初始化之前不可被引用,如果试图访问会导致程序抛出错误。当调用函数时,会通过传入的值或参数的默认值初始化该参数。

1
2
3
4
5
function add(first = second, second) {
return first + second
}
add(undefined, 1)
// Uncaught ReferenceError: second is not defined at add (<anonymous>:1:22) at <anonymous>:4:1

上面这个例子报错,因为first初始化时,second尚未初始化,此时second尚处于临时死区中。

函数参数有自己的作用域和临时死区,其余函数体的作用域是各自独立的,也就是说参数的默认值不可访问函数体内声明的变量。

默认参数与arguments

在es5的非严格模式下,函数命名参数变化会导致arguments的值也变化,然而在es5的严格模式下,取消了arguments这个令人感到困惑的行为,无论参数如何变化,arguments的值都不随之改变。

在es6中,如果一个函数使用了默认参数值,则无论是否显示定义了严格模式,arguments的行为都将与es5严格模式下保持一致。默认参数值的存在使得arguments保持与命名参数分离
如下面的例子:使用了默认参数值

1
2
3
4
5
6
7
8
9
10
11
12
function mixArgs(first, second = 'b') {
console.log(arguments.length) // 1
console.log(first === arguments[0]) // true
console.log(second === arguments[1]) // false
first = 'c'
second = 'd'
console.log(first === arguments[0]) // false
console.log(second === arguments[1]) // false
console.log(arguments)
// ["a", callee: (...), Symbol(Symbol.iterator): function]]
}
mixArgs('a')

第二个例子:没有使用默认参数,这里first的值改变同步到arguments中了,但second的值改变,arguments并没有新增一个元素,它的长度还是1。

1
2
3
4
5
6
7
8
9
10
11
12
function mixArgs(first, second) {
console.log(arguments.length) // 1
console.log(first === arguments[0]) // true
console.log(second === arguments[1]) // true
first = 'c'
second = 'd'
console.log(first === arguments[0]) // true
console.log(second === arguments[1])// false
console.log(arguments)
// ["c", callee: function, Symbol(Symbol.iterator): function]
}
mixArgs('a')

默认参数与解构赋值结合

这是比较令人迷惑的一个知识点。看完下面的例子基本能了解它们的区别。

写法一函数参数的默认值是空对象,但是设置了对象解构赋值的默认值;
写法二函数参数的默认值是一个有具体属性的对象,但是没有设置对象解构赋值的默认值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 写法一
function m1({x = 0, y = 0} = {}) {
return [x, y];
}
// 写法二
function m2({x, y} = { x: 0, y: 0 }) {
return [x, y];
}
// 函数没有参数的情况
m1() // [0, 0]
m2() // [0, 0]

// x 和 y 都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// x 有值,y 无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

// x 和 y 都无值的情况
m1({}) // [0, 0];
m2({}) // [undefined, undefined]
m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

默认参数是在未传参数或传参为undefind时才会生效。
而解构赋值中的默认值,是在该值为undefined时,取默认值。比如例子中的m1({x: 3}),因为传了参数,默认参数是不生效的。解构赋值时发现x值为3,但y值为undefined,因此取y值为0

函数的参数作用域

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

1
2
3
4
5
6
7
var x = 1;

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

f(2) // 2

上面代码中,参数y的默认值等于变量x。调用函数f时,在参数形成的这个作用域里面,默认值变量x指向第一个参数x,而不是全局变量x,所以输出是2。

再看下面的例子。

1
2
3
4
5
6
7
8
let x = 1;

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

f() // 1

上面代码中,函数f调用时,在参数形成的这个作用域里面,变量x本身没有定义,所以指向外层的全局变量x。函数调用时,函数体内部的局部变量x影响不到默认值变量x。

如果此时,全局变量x不存在,就会报错。

1
2
3
4
5
6
function f(y = x) {
let x = 2;
console.log(y);
}

f() // ReferenceError: x is not defined

下面这样写,也会报错。

1
2
3
4
5
6
7
var x = 1;

function foo(x = x) {
// ...
}

foo() // ReferenceError: x is not defined

上面代码中,参数x = x形成一个单独作用域。实际执行的是let x = x,由于临时死区的原因,这行代码会报错”x 未定义“。

下面这个稍微复杂点的例子,也是临时死区的问题,因为z+1中的z还是一个未初始化的变量

1
2
3
4
5
6
var w = 1, z = 2
function foo(x = w + 1, y = x + 1, z = z + 1) {
console.log(x, y, z)
}
foo()
// Uncaught ReferenceError: z is not defined

如果参数的默认值是一个函数,该函数的作用域也遵守这个规则。下面这个例子来自知乎(解释可参考知乎的答案):https://www.zhihu.com/question/60394151/answer/202591491

1
2
3
4
5
6
7
8
let foo = 'outer';

function bar(func = () => foo) {
let foo = 'inner';
console.log(func());
}

bar(); // outer

上面代码中,函数bar的参数func的默认值是一个匿名函数,返回值为变量foo。函数参数形成的单独作用域里面,并没有定义变量foo,所以foo指向外层的全局变量foo,因此输出outer。

如果写成下面这样,就会报错。

1
2
3
4
5
6
function bar(func = () => foo) {
let foo = 'inner';
console.log(func());
}

bar() // ReferenceError: foo is not defined

上面代码中,匿名函数里面的foo指向函数外层,但是函数外层并没有声明变量foo,所以就报错了。

重点就是当参数带有默认值时,参数会形成一个单独的作用域,且这个作用域是在函数体外定义的。

下面是一个更复杂的例子。

1
2
3
4
5
6
7
8
9
var x = 1;
function foo(x, y = function() { x = 2; }) {
var x = 3;
y();
console.log(x);
}

foo() // 3
x // 1

上面代码中,函数foo的参数形成一个单独作用域。这个作用域里面,首先声明了变量x,然后声明了变量y,y的默认值是一个匿名函数。这个匿名函数内部的变量x,指向同一个作用域的第一个参数x。函数foo内部又声明了一个内部变量x,该变量与第一个参数x由于不是同一个作用域,所以不是同一个变量,因此执行y后,内部变量x和外部全局变量x的值都没变。

如果将var x = 3的var去除,函数foo的内部变量x就指向第一个参数x,与匿名函数内部的x是一致的,所以最后输出的就是2,而外层的全局变量x依然不受影响。

1
2
3
4
5
6
7
8
9
var x = 1;
function foo(x, y = function() { x = 2; }) {
x = 3;
y();
console.log(x);
}

foo() // 2
x // 1

最后,一个综合了作用域链、闭包、参数作用域的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var x = 1;
var a = 999;
function foo(
x,
y = function() {
// 参数作用域的x
console.log(x) // 12
x = 22;
console.log(a) // 999
a = 8;
onsole.log(a) // 8
z = 123;
return function(){ return x }
}
) {
// 函数体
var x = 3;
var a = 0;
// 闭包函数,可返回y函数作用域内x的值
var f = y();
console.log(f()); // 22
console.log(x); // 3
}

foo(12)
console.log(x) // 1
console.log(a) // 8
console.log(window.z) // 123

Tags: es6

扫描二维码,分享此文章