ES6 箭頭函式以及箭頭函式和普通函式的區別

箭頭函式的基本語法

es6中允許使用箭頭=>來定義箭頭函式，具體語法，可以通過乙個例子說明

// 箭頭函式
let fun = (name) =>  !`;
};// 等同於
let fun = function (name)  !`;
};

從上面的例子可以看出，定義箭頭函在數語法上要比普通函式簡潔得多。箭頭函式省去了function關鍵字，採用箭頭=>來定義函式。函式的引數放在=>前面的括號中，函式體跟在=>後的花括號中。

關於箭頭函式中的引數問題：

// 沒有引數，直接寫乙個空括號即可。
let fun1 = () => ;
// 只有乙個引數，括號可寫可不寫
let fun2 = name =>  !`)
};// 有多個引數，將引數依次用逗號(,)分隔，包裹在括號中即可。
let fun3 = (val1, val2, val3) => ;

關於箭頭函式中的函式體：

① 如果函式體中只有一句**，返回某個變數或者返回乙個簡單的js表示式，可以省去函式體的大括號。

let fun1 = val => val;
// 等同於
let fun1 = function (val) ;
let fun2 = (num1, num2) => num1 + num2;
// 等同於
let fun2 = function(num1, num2) ;

② 如果箭頭函式的函式體只有一句**，返回乙個物件，可以像下面這樣寫：

// 用小括號包裹要返回的物件，不報錯
let gettempitem = id => ();
// 但絕不能這樣寫，會報錯。
// 因為物件的大括號會被解釋為函式體的大括號
let gettempitem = id => ;

③ 如果箭頭函式的函式體只有一條語句並且不需要返回值（最常見是呼叫乙個函式），可以給這條語句前面加乙個void關鍵字

let fn = () => void doesnotreturn();

箭頭函式與普通函式的區別

首先就是語法更加簡潔、清晰。下面通過箭頭函式和普通函式的乙個小對比，突出一下箭頭函式的優勢:

// 例子一
// 正常函式寫法
[1,2,3].map(function (x) );
// 箭頭函式寫法
[1,2,3].map(x => x * x);
// 例子二
// 正常函式寫法
var result = [2, 5, 1, 4, 3].sort(function (a, b) );
// 箭頭函式寫法
var result = [2, 5, 1, 4, 3].sort((a, b) => a - b);

箭頭函式不會建立自己的this（這點很重要，也更加可以突出箭頭函式的優勢）

箭頭函式沒有自己的this，它會捕獲自己在定義時（注意，是定義時，不是呼叫時）所處的外層執行環境的this，並繼承這個this值。所以，箭頭函式中this的指向在它被定義的時候就已經確定了，之後永遠不會改變。

下面用個例子說明:

var id = 'global';
function fun1() , 2000);
}function fun2() , 2000)
}// 這時函式其實是在全域性作用域執行的，所以this指向window物件，this.id就指向全域性變數id，所以輸出'global'
fun1.call();     // 'global'
// 這個箭頭函式的this在定義時就確定了，它繼承了它外層fun2的執行環境中的this，而fun2呼叫時this被call方法改變到了物件中，所以輸出'obj'
fun2.call();     // 'obj'

再來看另乙個例子：

var id = 'global';
var obj = ,
b: () => 
};// 普通函式作為物件的方法呼叫時，this指向它所屬的物件。所以，this.id就是obj.id，所以輸出'obj'
obj.a();    // 'obj'
// 箭頭函式中的this實際是繼承的它定義時所處的全域性執行環境中的this，所以指向window物件，所以輸出'global'
obj.b();    // 'global'

注意注意!!!在這裡定義物件的大括號{}是無法形成乙個單獨的執行環境的，它依舊是處於全域性執行環境中！！

箭頭函式繼承而來的this指向永遠不變(很重要)

通過上面的例子，就完全可以說明箭頭函式繼承而來的this指向永遠不變。物件obj 的方法b是使用箭頭函式定義的，這個函式中的this就永遠指向它定義時所處的全域性執行環境中的this，即便這個函式是作為物件obj的方法呼叫，this依舊指向window物件。

var id = 'global';
// 箭頭函式定義在全域性作用域
let fun1 = () => ;
fun1();     // 'global'
// this的指向不會改變，永遠指向window物件
fun1.call();     // 'global'
fun1.bind()();   // 'global'

箭頭函式沒有原型prototype

let sayhi = () => ;
console.log(sayhi.prototype); // undefined

箭頭函式不能作為建構函式使用

首先介紹一下建構函式，分為四步：

① js內部首先會先生成乙個物件；

② 再把函式中的this指向該物件；

③ 然後執行建構函式中的語句；

④ 最終返回該物件例項。

但是！！因為箭頭函式沒有自己的this，它的this其實是繼承了外層執行環境中的this，且this指向永遠不會隨在**呼叫、被誰呼叫而改變，所以箭頭函式不能作為建構函式使用，或者說建構函式不能定義成箭頭函式，否則用new呼叫時會報錯！

let fun = (name, age) => ;
// 報錯
let p = new fun('xhh', 24);

ES6 箭頭函式以及箭頭函式和普通函式的區別

es6箭頭函式

es6 箭頭函式

ES6 箭頭函式

ES6 箭頭函式 以及箭頭函式和普通函式的區別

es6箭頭函式

es6 箭頭函式

ES6 箭頭函式

相關推薦

ES6 箭頭函式以及箭頭函式和普通函式的區別