ES6中的箭头函数和扩展

ES6

在这里我们先不着急看ES6中的函数，而是先回顾一下ES5中的函数写法

回顾ES5 编写一个函数

function add(a, b){
    return a + b;
}
console.log(add(1, 2));     // 3

以上就是ES5编写函数的最基本写法

ES6中增加默认值

在ES6中给我们增加了默认值的操作，现在我们修改上边的代码，可以看到现在只需要传递一个参数也是可以正常运行的。

function add1(a, b = 1){
    return a + b;
}
console.log(add1(1));     // 2

主动抛出错误

在使用Vue的框架中，可以经常看到框架主动抛出一些错误，比如v-for必须有:key值。那尤大神是如何做到的那？其实很简单，ES6中我们直接用throw new Error( xxxx ),就可以抛出错误。

function add2(a, b = 1){
    if (a == 0){
        throw new Error('A is error');
    }
    return a + b;
}
console.log(add2(0));     // Uncaught Error: A is error

函数中的严谨模式

ES5 中的严谨模式

'user strict'
function add3(a, b = 1){
    return a + b;
}
console.log(add3(1));     // 2

我们在ES5中就经常使用严谨模式来进行编程，但是必须写在代码最上边，相当于全局使用。在ES6中我们可以写在函数体中，相当于针对函数来使用。

ES6 函数中的严谨模式

function add4(a, b = 1){
    'user strict'
    return a + b;
}
console.log(add4(1));     // 2

上边的代码如果运行的话，你会发现浏览器控制台报错，这是ES6中的一个坑，如果没人指导的话，可能你会陷进去一会。

这个错误的原因就是如果你使用了默认值，再使用严谨模式的话，就会有冲突，所以我们要取消默认值的操作，这时候你在运行就正常了。

function add5(a, b){
    'user strict'
    return a + b;
}
console.log(add5(1, 2));     // 3

获得需要传递的参数个数 xxx.length 【得到的是必须传入的参数】

如果你在使用别人的框架时，不知道别人的函数需要传递几个参数怎么办？ES6为我们提供了得到参数的方法(xxx.length)。

我们用代码看一下需要传递的参数个数。

function add6(a, b){
    'user strict'
    return a + b;
}
console.log(add6.length);     // 2

注意：如果我们去掉严谨模式，并给第二个参数加上默认值的话，这时候add.length的值就变成了1， 也就是说它得到的是必须传入的参数。

function add7(a, b = 1){
    return a + b;
}
console.log(add7.length);     // 1

箭头函数

注意： 箭头函数中不可加new，也就是说箭头函数不能当构造函数进行使用。

1、方法体内语句一条和多条

当函数体只有一条语句，且为 return 语句时，则 return可以省略

function fun (a, b = 1){
    return a + b;
}
console.log(fun(1));         // 2
// 箭头函数
var fun1 = (a, b = 1) => a + b;
console.log(fun1(1));       // 2
// var fun2 = (a, b = 1) => return a + b;     // 编译报错，相当于是2条语句（return  和  a + b）

如果一定要加上return，则可以修改成如下

var fun2 = (a, b = 1) => {
    return a + b;
}
console.log(fun2(1));       // 2

当函数体具有多条语句，则使用{}

function fun3 (a, b = 1){
    console.log('www');
    return a + b;
}
console.log(fun3(1));       // 2
// 箭头函数
var fun4 = (a, b = 1) => {
    console.log('www');
    return a + b;
}
console.log(fun4(1));       // 2

2、参数不同的箭头函数

多个参数

function fun5 (a, b = 1){
    return a + b;
}
console.log(fun5(1));       // 2
// 箭头函数
var fun6 = (a, b = 1) => a + b;
console.log(fun6(1));       // 2

单个参数

function fun7 (a){
    console.log(a);
}
fun7(3);        // 3
// 箭头函数
var fun8 = a => console.log(a);
fun8(4);        // 4

3、函数内this指向

var num = 100;
var obj = {
    num: 200,
    getNum: function (){
        console.log(this.num);
    }
}
obj.getNum();  // 200，this指向obj(本对象)
// 箭头函数
var number = 100;
var obj1 = {
    number: 200,
    getNum: () => {
        console.log(this.number);
    }
}
obj1.getNum();  // 100，注意 箭头函数的 this指向变成window