ES6語法學習筆記之箭頭函式、剩餘引數

梭梭醬加油鴨發表於2019-01-30
筆記函式

箭頭函式

無引數寫法示例：

                function show(){
			return 1;
		}
		console.log(show());//舊寫法

		let show = () => 1;
		console.log(show());
複製程式碼

此處箭頭前面是函式名show及引數()（雖然這裡沒傳），後面是返回值。

有引數寫法示例：

		/*function show(a,b){
			return a+b;
		}
		console.log(show(12,5));*/

		let showab = (a,b) => a+b;
		console.log(showab(12,5));
複製程式碼

此處箭頭前面是函式名和引數(a,b)，後面是返回值（可以是表示式）。

有複雜語句的寫法示例：

		let showcd = (c=12,d=5) =>{
			console.log(c,d);
			return c+d;
		};
		showcd();
複製程式碼

次數箭頭前面是函式名和引數，並直接對引數賦了值。箭頭後面則是語句，包括返回值。注意，語句需要用{}包起來。

注意一：箭頭函式也會影響this物件

這裡的結果是1，this指的就是呼叫其的函式的物件

		let json={
			id:1,
			show:function(){
				alert(this.id);
			}
		}

		json.show();//結果是1
複製程式碼

這裡的結果是未定義，因為this是被setTimeout呼叫的，setTimeout所指的是window物件，而這裡window物件沒有定義id。當var一個id等於10時，結果變成10，儘管setTimeout所指的是window物件，由於var在json2外面，id2屬於全域性變數，setTimeout呼叫時就能訪問到了。

		// var id=10;//如果加上這一行，下面的結果就變成10，因為這裡屬於全域性，而setTimeout的物件正好是window，其引數函式的this物件也就是window的id。

		let json2={
			id2:1,
			show2:function(){
				setTimeout(function(){
					alert(this.id);
				},2000);
			}
		}
		json2.show2();//undefined
複製程式碼

但是！！！用箭頭函式後作用域又變了！！！箭頭函式讓呼叫函式訪問的物件固定為該函式所處的物件。

		let json3={
			id3:1,
			show3:function(){
				setTimeout(()=>{
					alert(this.id3);
				},2000);
			}
		}

		json3.show3();//1
複製程式碼

注意二：箭頭函式裡沒有auguments，用...

		let show5=function(){
		console.log(arguments);
		}

		show5(1,2,3,4,5);
複製程式碼

這裡輸出的是陣列[1,2,3,4,5]，但如果用箭頭函式，那就報錯：

		let show4=()=>{
			console.log(arguments);
		}

		show4(1,2,3,4,5);
複製程式碼

但是，用...也可以達到同樣效果：

                let show6=(...args)=>{
			console.log(args);
		};
		show6(1,2,3,4,5);
複製程式碼

注意三：箭頭函式不能當建構函式：

		// function show7(){
		// 	this.name='abc';
		// };

		let show7 = ()=>{
			this.name='abc';
		}

		let ss= new show7();
		alert(ss.name);
複製程式碼

如果是註釋中的寫法，結果會正常顯示為abc，如果是箭頭函式，則會報錯。

相關文章