ES6基础教程（第七节）——函数的扩展

es6对于函数也进行了一定的优化，主要包括：参数的默认值、rest参数、扩展运算符（...）、箭头函数以及this。

它们有一个共同的有点就是：使得代码更加简洁，结合需求灵活使用，可以大大地提高开发效率。

参数的默认值：

function func(a,b,c="100"){

console.log(a,b,c)

}

由实例可看出需要有几点注意的：

1.默认参数需要放在最后一位；

2.如果在启动函数时候，没有传对应参数，或者传为undefined，那么就会启用默认值；

3.传入的值不能再函数内部声明，会报错，因为已经声明了。

rest参数：

rest在中文中的意思是剩余的意思，如果在函数中，就代表剩余的参数，例如：

function func(val,...vals){

console.log(vals)

}

let _this;

func(_this ,1,2,3,4,5,6)

//[1, 2, 3, 4, 5, 6]

从实例中可看出vals把除了第一位参数排除外，剩余的参数都打包成了一个数组，在函数体内运行，这样不管传入多少函数，都可以通过数组的方法进行操作。

与此同时我们引入了一个“...”三个点号的模式，这就称之为扩展运算符，它有什么用呢，一般都是结合参数来使用，就是在有多个参数之后，我们不想写这么多，只想引用时候。

function func(a,b,c) {

console.log(a,b,c)

}

let arr = [1,2,3];

func(...arr);

即：传入值的时候会将数组转化为参数序列。

箭头函数：

var func1=a=>a;

var func2=(a,b)=>a;

var func3=(a,b)=>{return a+b};

上面是三个函数实例，所谓的箭头函数就是用“=>”来进行定义函数，

1.如果入参一个返回值是一个，就直接用“=>”连接，

2.如果入参超过一个，那入参就需要用小括号包裹起来，

3.如果函数运行代码大于一行，就需要用大括号包裹函数体。

this：

this是一个比较复杂的事，在es6之前的版本中，定义的this和运行的this是不一致的，

而如果是用箭头函数定义的this，永远都是定义时候的this，不管在何种环境执行。

look例子：

var obj = {

name:"我是name", //属性name

show(){

//延迟500毫秒，输出x的值

    setTimeout(

       //匿名函数

       function(){console.log(this.name);},

       500

   );

}

};

obj.show();//打印结果：undefined

没错，name的值确实是“我是name”，但问题出在了this上，

当代码执行到了setTimeout()的时候，此时的this已经变成了window对象（setTimeout()是window对象的方法），

已经不再是obj对象了，所以我们用this.name获取的时候，获取的不是obj.name的值，而是window.name的值，

再加上window上没有定义属性name，所以得到的结果就是：undefined

如果我们用箭头函数进行定义那就完全不同了。

var obj = {

name:"我是name", //属性name

show(){

//延迟500毫秒，输出x的值

    setTimeout(

       //匿名函数

       ()=>{console.log(this.name);},

       500

   );

}

};

obj.show();//打印结果：我是name

因为箭头函数中的this指向的是定义时的this，定义时候show的方法是挂载在obj上的，所以执行时候可以找到obj.name。

关于函数方面的知识就是这些，都是一些实用的方法，期待与你一起进步。

公众号