函数参数的默认值
基本用法
ES6 允许为函数的参数设置默认值(即直接写在参数定义的后面)
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
函数参数变量
- 参数变量是默认声明的,不能用let或const再次声明
- 函数不能有同名参数
- 参数默认值不是传值的,惰性求值
函数的 length 属性
指定了默认值以后,函数的length属性,将返回没有指定默认值的参数个数。也就是说,指定了默认值后,length属性将失真
(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
注意点 :如果设置了默认值的参数不是尾参数,那么length属性也不再计入后面的参数了。
作用域
var x = 8;
function f(x,y = x){
console.log(y)
}
f();//undefined
f(2); //2
f(1,3) //3
解释说明 :参数y的默认值等于变量x。调用函数f时,参数形成一个单独的作用域。在这个作用域里面,默认值变量x指向第一个参数x,而不是全局变量x,所以输出是2
let x = 1;
function f(y = x) {
let x = 2;
console.log(y);
}
f() // 1
解释说明 :函数f调用时,参数y = x形成一个单独的作用域。这个作用域里面,变量x本身没有定义,所以指向外层的全局变量x。函数调用时,函数体内部的局部变量x影响不到默认值变量x。
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的值都没变。
rest 参数
作用 : 引入 rest 参数(形式为“…变量名”),用于获取函数的多余参数。
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10
注意点 :rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错
箭头函数
作用 :允许使用“箭头”(=>)定义函数
var f = v => v;
// 等同于
var f = function (v) {
return v;
};
如果箭头函数不需要参数或多个参数
var f = () => 5;
// 等同于
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回
var sum = (num1, num2) => { return num1 + num2; }
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号
var getTempItem = id => ({ id: id, name: "Temp" });
箭头函数可以与变量解构结合使用。
const full = ({first,last}) => first + ' ' + last;
//等同于
function full(person){
return person.first + ' ' + person.last;
}
箭头函数的一个用处是简化回调函数。
//ES5写法
[1,2,3].map(function(x)){
return x * x;
}
//ES6写法
[1,2,3].map(x => x * x);
rest参数与箭头函数结合
const numbers = (...nums) => nums;
numbers(1,2,3,4) //[1,2,3,4]
const headAndTail = (head, ...tail) => [head, tail];
headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]
注意点 :
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。
箭头函数this指向问题
- 箭头函数里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域。
- this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。