JavaScript函数属性，方法，ES6拓展内容总结(箭头函数使用，rest参数)

引言

函数在js中也是一个对象，所以它也是有着自己的属性和方法的，了解它们能更好的使用函数。

// 各种样子的函数
function foo() {}
function foo(a) {}
function foo(a = 1) { return a }
function foo([a,b]) { return a + b }
function foo(a,...args) {return a}
var foo = function() {};
var foo = function f() {};
() => {}

属性及方法

name length属性

// name函数的名称
foo.name //foo
var f = function foo() {} //foo

// length函数的参数长度
// 当参数有默认值是，length会不准确
// 当有默认值的参数是第一时，就不会继续计数了
function foo1(a,b) {}
foo1.length // 2
function foo2(a,b=1) {}
foo2.length // 1
function foo3(a=1,b,c) {}
foo3.length // 0

toString()

参数

arguments对象

arguments是函数的参数对象,是一个类数组对象，可以获取或者修改函数的参数，获取的是传入的参数的信息，不是定义的参数，当在‘严格模式’下不能修改。

function foo(a) {
  arguments[0] = 1;
  return a;
}

foo(5) // 1
foo(2,3,5) // argumetns.length == 3

指定默认值

函数的参数也是可以指定默认的

function foo(a = 1, b = 2) {}

// 默认值也可以是表达式
// 表达式是惰性求值的，也就是用到了才会求
let x = 2;
function foo(a = x + 1) { return a }
foo() // 3
x = 4
foo() // 5

参数解构赋值

rest参数

如函数的参数的个数是不确定的可以使用...变量名参数

function foo(...args) { return args }
foo(1,23,4) // [1,23,4]

//可配合使用
function foo(a,...args) {}

//不用rest参数实现rest效果
function foo() {
  return [].slice.call(arguments).sort();
}

注：rest参数只能是最后一个参数，否则报错

箭头函数

箭头函数让函数写起来更加的高效，优雅，但是也是有些要注意的地方。

// 没有参数需要小括号()
() => {}

// 一个参数可以省略小括号()
a => { retrun a }

// 函数语句只有一条是可以省略大括号，也是会自动的return
a => a
// 如果加了大括号，需要返回就应手动return,否则会return一undefined
// 原因，大括号被解释为代码块，而不是函数的语句,函数就没有return
a => { return a }
a => { a } // undefined
a => { id:1, age:12 } //报错SyntaxError
a => ({ id:1, age:12 }) //{ id:1, age:12 }
a => { return { id:1, age:12 } } //{ id:1, age:12 }
// 不return可以写
a => void doesNotReturn()

注：

1. 箭头函数的this指向的是定义所在的对象，而不是使用所在的对象，所以需要使用this需要慎重。this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
2. 箭头函数没有arguments对象。
3. 箭头函数不能用作当构造函数，所以new箭头函数会报错。
4. 不能使用yield命令。

尾调用优化

函数在调用是会生成调用记录（调用帧），在有尾调用时，会为当前函数之前添加尾调用函数的调用帧。如果函数嵌套调用且都是尾调用，就会有连续的调用帧，由于尾调中的用不依赖外层的内容，所以，尾调用优化就会在调用时保留内层调用帧。如此将能节省调用时间和内存。

function foo() {
  let a = 2;
  let b = 4;
  return g(a + b);
}
f();

// 等同于
function f() {
  return g(6);
}
f();

// 等同于
g(6);