Javascript中的箭頭函數

• 箭頭函數
• • 參數
  • • 不傳參數
    • 隻傳入一個參數
    • 傳入兩個及兩個以上的參數
    • 支援預設參數、剩餘參數及參數的解構
  • 函數體
  • 箭頭函數中的this
  • 箭頭函數内定義的變量及其作用域
  • 其他

箭頭函數

特點：比函數表達式更簡潔，并且沒有自己的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
};