ES6函数扩展

function扩展

ES6在原有ES5基础上对function的扩展

1.默认值

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function Point(x = 0, y = 0) {
  this.x = x;
  this.y = y;
}
const p = new Point();
p // { x: 0, y: 0 }

• 参数变量是默认声明的，所以不能用let或const再次声明。

function foo(x = 5) {
  let x = 1; // error
  const x = 2; // error
}

使用默认值的参数相当于使用let申明在块级作用域中，所有不允许重复。

• 默认值的参数是惰性求值

//参数p的默认值是x + 1。这时，每次调用函数foo，都会重新计算x + 1，而不是默认p等于 100。
let x = 99
function foo(p = x + 1) {
  console.log(p);
}
foo() // 100
x = 100
foo() // 101

2.rest参数

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

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
add(2, 5, 3) // 10

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

// 报错
function f(a, ...b, c) {
  // ...
}

3.name属性

函数的name属性，返回该函数的函数名。

function foo() {}
foo.name // "foo"

4.箭头函数

箭头函数细节

• 无大括号,相当于给函数体加上return

let getNum = num => num*2
console.log(getNum(4))//8

• 无大括号,返回对象字面量需要加上小括号

let getNum = () => ({a:2,c:3})
console.log(getNum())//{a:2,c:3}

• 有大括号,相当于给函数体一个块级作用域，不会自动加上return

let getNum = num => {num*2}
console.log(getNum(4))//undefined

• 有多个入参，使用小括号

let getNum = (num,times=2) => num*times
console.log(getNum(4))//8
console.log(getNum(4,5))//20

• 箭头函数可以与结构赋值结合使用

const full = ({first,last}) => first + ' ' + last
console.log(full({first:1,last:2,thirld:3}))

箭头函数注意点

• this指向：箭头函数的this指向是定义时的this指向而不是向传统函数一样指向调用者

function test(){
  console.log(this)//{a:1}
  let arr = [1, 2, 3, 4];
  // ES5中回调函数指向window
  arr.forEach(function(){
    console.log(this)//window
  })
  // ES6中箭头函数回调函数指向定义时的this指向{a:1}
  arr.forEach(()=>{
    console.log(this)//{a:1}
  })
}
test.call({a:1});

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

5.双冒号运算符

双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。

foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);