es6新特性之函数扩展

es6中对函数的扩展主要是两个地方：

第一个：函数参数可以有默认值

第二个：箭头函数

es6中函数参数的默认值                                                                                    

编写test.html的script部分如下：

  <script>
	 function sum(num1,num2){
		return num1+num2;
	 }
	 var ret=sum(10,20);
	 console.log(ret);
  </script>

打开浏览器，结果：30，这是没问题的，当我使用sum(10)调用时结果却成了NaN,为了避免这种情况，我们需要给num1和num2默认值，

 <script>
	 function sum(num1,num2){
		num1=num1||0;
		num2=num2||0;
		return num1+num2;
	 }
	 var ret=sum(10);
	 console.log(ret);
  </script>

运行结果：10，好了，没问题了，es6中的写法是什么呢？

<script>
	 function sum(num1=0,num2=0){
		return num1+num2;
	 }
	 var ret=sum(20);
	 console.log(ret);
  </script>

运行结果：20，完全没问题，这就是es6中函数参数默认值的写法，直接在参数后边写上你想要的默认值并用“=”连接就可以了。学过php的同学是不是很熟悉呢！

箭头函数                                                                

上面的函数改为es6中的箭头函数就是下面的代码：

var sum=(num1=0,num2=0)=> num1+num2;
	var ret=sum(555);
	 console.log(ret);

什么意思呢？

var sum里面的sum就是函数的名字了，我们以前也有var  fun1=function(){}的写法，这不足为奇。

"=>"左边的()表示函数的参数，参数是什么就写什么，如(num1=0,num2=0)，如果没有参数就是()；

"=>"右边的表示函数返回值，num1+num2就相当于“return num1+num2”，也就是说"=>"右边的内容就是函数体，如果有多行，可以用{}括起来。

实例：写一个箭头函数，计算1-100的值：

  <script>
	var sum=()=>{
		let sum=0;
		for(let i=1;i<=100;i++){
			sum+=i;
		}
		console.log(sum);
	}
	sum();
  </script>

执行结果：5050

箭头函数里面的this                                                       

先看看非箭头函数的this：

var obj={
		name:"zhao",
		info:function(){
			console.log(this);//obj
		},
		info2:function(){
			console.log(this);//obj
			setTimeout(function(){
				console.log(this);//window
			},200);
		}
	}
	obj.info();
	obj.info2();

执行结果：

这里的输出结果是没有问题的，符合我们原有的认识，注意setTimeout的匿名函数里面的this是指的匿名函数的调用者是window，因为this总是遵循“谁调用我，我就指向谁”。

那么es6里箭头函数里面的this又是什么指向呢？

	var obj={
		name:"zhao",
		info:()=>{
			console.log(this);//window
		},
		info2:()=>{
			console.log("info2:"+this.name); //undefined
			setTimeout(()=>{
				console.log("info2:"+this.name); //undefined
			},200);
		},
		info3:function () {
			console.log("info3:"+this.name); //zhao
			setTimeout(()=>{
				console.log("info3:"+this.name); //zhao
			},200);
		}
	}
	obj.info();
	obj.info2();
		obj.info3();

执行结果：

怎么理解es6箭头函数里面的this呢？一句话：es6箭头函数里面的this总是指向箭头函数所在函数的this。

针对info这个箭头函数，因为info所在函数可以看做是window全局对象，所以这里打印window。

info2同理

info3不是箭头函数，this代表obj，而setTimeout的匿名回调函数所在函数为info3，因此其this也是info3里面的this