《深入理解ES6》笔记之函数

发表于 | 更新于 | 分类于

函数形参的默认值

在ES6中可以为函数形参指定默认值，如下：

1
2
3
4
5
function makeRequest(url, timeout = 2000,callback = function() {}) {

    //函数的其余部分

}

还可以使用非原始值传参,如下面这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
let value = 5;

function() {
    return value++;
}

function add(first,second = getValue()){
    return first+second;
}

console.log(add(1,1));     //2
console.log(add(1));       //6
console.log(add(1));       //7

getValue在声明的时候不会调用，只有在调用add且不传入第二个参数时才会调用。

不定参数

在函数的命名参数前添加三个点(…)就表明这是一个不定参数，该参数为一个数组，包含着自它之后传入的所有参数，通过这个数组名即可逐一访问里面的参数。

1
2
3
4
5
6
7
8
9
function checkArgs(normalPara,...args){
    console.log(normalPara);
    console.log(args.length);
    console.log(arguments.length);
    console.log(args[0],arguments[1]);
    console.log(args[1],arguments[2]);
}

checkArgs("a","b","c");

调用checkArgs()，输出以下内容

1
2
3
4
5
a
2
3
b b
c c

箭头函数

箭头函数是一种使用箭头（=>）定义函数的新语法，但是它与传统的JavaScript函数有些许不同，主要集中在以下方面：

  • 没有this、super、arguments和new.target绑定
  • 不能通过new关键字调用
  • 没有原型
  • 不可以改变this的绑定
  • 不支持arguments对象
  • 不支持重复的命名参数

箭头函数语法

语法

箭头函数语法多变，但无论再怎么变化，主要由三部分组成，参数、箭头、函数体。

比如单参数，简单返回

1
value => value

空函数

1
() => {}

多参数，多返回

1
（num1，num2）=> num1 + num2

类传统形式

1
2
3
4
5
（num1，num2）= {
    //do something

    return num1 + num2;
}

没有this绑定

js中函数内的this经常在调用的过程中发生改变，以前我们只能用蹩脚的bind或者call之类的来解决。现在，我们可以直接使用箭头函数。

箭头函数中的this值取决于改函数外部非箭头函数的this值，且不能通过call()、apply()和bind()方法来改变this的值。

1
2
3
4
5
6
7
8
9
10
11
12
var handler = {
  id: '123456',

  init: function() {
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  },

  doSomething: function(type) {
    console.log('Handling ' + type  + ' for ' + this.id);
  }
};

上面的例子中使用了箭头函数，于是导致this.dosomething这一行的this总是指向handler对象，这种行为为我们带来了许多方便。

箭头函数缺少正常函数所拥有的prototype属性，它的设计初衷是“即用即弃”。在日常开发中很适合用于回调函数。