Javascript中的箭头函数

箭头函数

特点：比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。

适用于:那些本来需要匿名函数的地方，并且它不能用作构造函数

注意：

• 箭头函数不能用作构造器，和 new一起用会抛出错误。
• 箭头函数没有prototype属性。为undefined
• yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。

参数

不传参数

没有参数的函数应该写成一对圆括号，() => { statements }

	//函数普通写法
	funtion foo()
	{
		console.log("函数普通写法");
	} 

	//没有参数的函数应该写成一对圆括号
	let fun =()=>console.log("箭头函数_不传参数");
	fun();

只传入一个参数

当只有一个参数时，圆括号是可选的
(singleParam) => { statements } 或者 singleParam => { statements }

	
	let fun1=(a)=>console.log(`箭头函数传入一个参数,值为:${a}`);
	//可以省略()
	let fun2= a =>console.log(`箭头函数传入一个参数,值为:${a}`);
	fun1("1");
	fun2("2");

传入两个及两个以上的参数

(param1, param2, …, paramN) => { statements }

	let fun3=(a,b)=>console.log(`箭头函数两个及两个以上的形参,值为:${a}和${b}`);
	fun3("a","b");
	

支持默认参数、剩余参数及参数的解构

ES6中默认参数和剩余参数的注意事项 : https://blog.csdn.net/liuli_a/article/details/104679155
默认参数
(param = defaultValue) => { statements }

	let fun4=(param1=100)=>console.log(param1);
	//100
	console.log(fun4());
	

剩余参数
(param1, param2, …rest) => { statements }

	let fun5=(param1,param2,param3,...params)=>{
		console.log(param1);
		console.log(param2);
		console.log(param3);
		console.log(params);
	}
	
	//1
	//2
	//3
	//[4,5,6,7,8,9]
	
	fun5(1,2,3,4,5,6,7,8,9);
	

参数的解构
( [a,b] = [1,2] ) => a+b

	let fun6=([num1,num2]=[1,9],[num3]=[num1+num2])=>num1+num2+num3;
	//20
	console.log(fun6());  
	

函数体

函数体只有一条语句或者是表达式的时候 可以省略 { } ，当省略 { } 时,会自动返回语句执行结果或是表达式结果
箭头函数的简写

	//省略{}
	let fun7=(x,y)=>x+y;
	//3
	console.log(fun7(1,2));

函数体不止一条语句时, { } 不可以省略
箭头函数的常规写法

	//{ } 不可以省略
	let  fun8=(x,y)=>{
			x=x.toString();
			y=y.toString();
			return x+y;
	}
	console.log(fun8(1,5)); //15

在一个简写体中，只需要一个表达式，并自动附加一个隐式的返回值。在常规写法中，必须使用明确的return语句。

箭头函数中的this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this
通过 call() 或 apply() 方法调用一个函数时，只能传递参数

	var adder = {
	  base : 1,
	  
	  add : function(a) {
	    var f = v => v + this.base;
	    return f(a);
	  },
	
	  addThruCall: function(a) {
	 
	    var f = v => v + this.base;
	    var b = {
	      base : 2
	    };
	    
	     //由于箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数    
	    return f.call(b, a);
	  }
	};
	
	console.log(adder.add(1));         // 输出 2
	console.log(adder.addThruCall(1)); // 仍然输出 2

箭头函数内定义的变量及其作用域

• 参数括号内定义的变量是局部变量
• 函数体内 { } 不使用var定义的变量是全局变量
• 函数体内{} 用var定义的变量是局部变量

其他

箭头函数在参数和箭头之间不能换行。

var func = ()
           => 1; 
//SyntaxError: expected expression, got '=>'

但是，可以通过在 ‘=>’ 之后换行，或者用 ‘( )’、’{ }'来实现换行

var func = (a, b, c) =>
  1;

var func = (a, b, c) => (
  1
);

var func = (a, b, c) => {
  return 1
};