Function

函数

默认参数

对于函数而言,经常会用到参数,关于参数的默认值都写在函数体内

function f(x, y = 7, z = x + y) {
  return z * 0.5;
}

console.log(f(1, 7)); // 4

INFO

如果没有默认值,会被解析成 undefined

参数的个数

ES5 里面可以通过 arguments 的个数来判断,但是 ES6 不行了.他需要借助 Function.length 判断

function foo(a, b = 1, c) {
  console.log(foo.length);
}
foo("a", "b"); // 1

重要

Function.length 是统计第一个默认参数前面的变量数：

rest 参数

可以利用解构,来获取参数的个数

function sum(...nums) {
  let num = 0;
  nums.forEach(function (item) {
    num += item * 1;
  });
  return num;
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4)); // 10

当然 Reset 也可以和其他参数一起使用

function sum(base, ...nums) {
  let num = base;
  nums.forEach(function (item) {
    num += item * 1;
  });
  return num;
}

console.log(sum(30, 1, 2, 3)); // 36
console.log(sum(30, 1, 2, 3, 4)); // 40

注意

arguments 不是数组，所以不能直接使用数组的原生 API 如 forEach，而 Rest Parameter 是数组，可以直接使用数组的原生 API。

解构

function sum(x = 1, y = 2, z = 3) {
  return x + y + z;
}

console.log(sum(...[4])); // 9
console.log(sum(...[4, 5])); // 12
console.log(sum(...[4, 5, 6])); // 15

length 属性

函数指定了默认值以后，函数的 length 属性，将返回没有指定默认值的参数个数。

function foo(x = 1, y = 2, z = 3) {
  console.log(x, y);
}
console.log(foo.length);
// 0

箭头函数

箭头函数可以说是 ES6 很大的福利了，不管你是函数式爱好者还是面向对象开发者，函数是必须要用到的东西。例如:

let hello = () => {
  console.log("say hello");
};

或者

let hello = (name) => {
  console.log("say hello", name);
};

INFO

如果只有一个参数，可以省略括号，如果大于一个参数一定要记得带括号

函数的声明和参数写的很清楚了，那么对于返回值有什么要注意的地方呢？

• 如果返回值是表达式

如果返回值是表达式可以省略 return 和 {}

let pow = (x) => x * x;

• 如果返回值是对象

如果返回值是字面量对象，一定要用小括号包起来

let person = (name) => ({
  age: 20,
  addr: "Beijing City",
});

箭头函数的 this 指针

箭头函数不同于传统函数,传统函数是谁调用找谁,而它的 this 永远找的是父级的 this

• 传统函数

let foo = {
  name: "es",
  say: function () {
    console.log(this.name);
  },
};

console.log(foo.say()); // es

• 箭头函数

let foo = {
  name: "es",
  say: () => {
    console.log(this.name, this);
  },
};
console.log(foo.say()); // undefined

因为箭头函数中对 this 的处理是定义时，this 的指向也就是 foo 外层的所指向的 window，而 window 没有 name 属性，所以结果是 undefined。

总结

1、箭头函数中 this 指向定义时所在的对象，而不是调用时所在的对象

2、箭头函数不可以当作构造函数

3、箭头函数不可以使用 arguments 对象

推荐阅读

• 箭头函数

• 默认参数