特型介紹:箭頭函數是ES6新增的特性之一,它爲JS這門語言提供了一種全新的書寫函數的語法。程序員
'use strcit'; let arr = [1,2,3]; //ES5 let es5 = arr.map(function(n){ return n*2; }); //ES6 let es6 = arr.map(n => n*2); console.log(es5); //[2,4,6] console.log(es6); //[2,4,6]
箭頭函數簡化了原先的函數語法,不須要再寫 function ,若是函數體只有一行代碼的話連 return 都不用寫,這個特性對於熱衷於簡化流程和工做的程序員來講至關對胃口。es6
箭頭函數支持兩種模式的函數體寫法,咱們姑且叫他簡潔函數體和塊級函數體。app
'use strcit'; // 簡潔函數體 let fn = x => x * x; // 塊級函數體 let fn = (x, y) => {return x + y;};
簡介函數體默認會把表達式的結果返回,塊級函數體須要手動 return 。若是想要返回一個對象又想使用簡潔函數體的話,須要這麼寫:函數
'use strcit'; let fn = () => ({}); fn(); // {}
若是寫成 var fn = () => {} ,那麼執行 fn() 只能返回 undefined 。this
'use strict'; //第一種 let Person = function(){ this.age = 2; let that = this; setTimeout(function(){ that.age++; console.log(that.age); },1000); }; //第二種 let Person = function(){ this.age = 2; setTimeout(function(){ this.age++; console.log(this.age); }.bind(this),1000); }; new Person();
以前咱們想操做setTimeout參數function內部的this可能會用上述兩種方法,看上去不錯了, 可是如今有了箭頭函數就不同了,代碼以下:es5
'use strict'; let Person = function(){ this.age = 2; setTimeout(() => { this.age++; console.log(this.age); },1000); }; new Person();
因爲箭頭函數已經綁定了this 的值,即便使用apply或者call也不能只能起到傳參數的做用,並不能強行改變箭頭函數裏的this。spa
'use strict'; let obj = { x:1, show1:function(y){ let fn = y => y+this.x; return fn(y); }, show2:function(y){ let fn = v => v + this.x; let whatever = { x: 2 }; return fn.call(whatever, y); } }; console.log(obj.show1(1)); //2 console.log(obj.show2(2)); //3
箭頭函數不能與new 關鍵字一塊兒使用,會報錯code
'use strict'; let Fn = () => { this.a = 1; }; let f = new Fn(); // Error