ES6箭頭函式解析，跟普通函式的區別

2022-07-08 21:42:13 字數 4482 閱讀 1548

// 箭頭函式


let func = (name) => `;


};// 等同於


let func = function (name) `;


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

如果箭頭函式沒有引數，直接寫乙個空括號即可。

如果箭頭函式的引數只有乙個，可以省略包裹引數的括號。

如果箭頭函式有多個引數，將引數依次用逗號分隔，引數必須被包裹在括號中。

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

let func = val => val;


// 等同於


let func = function (val) ;


let sum = (num1, num2) => num1 + num2;


// 等同於


let sum = function(num1, num2) ;


let mulfunction = (num1, num2 ,num3) => num1 * num2 * num3;


// 等同於


let mulfunction = function(num1, num2 ,num3)
如果箭頭函式的函式體只有一句**且返回乙個物件（物件字面量）時，直接寫乙個表示式是不行的。

let func = () => ; 


console.log(func()); // 執行後返回undefined


// 如果是這樣還會直接報錯


let func = () => ;
原因是花括號被解釋為函式體的大括號，解決辦法：用圓括號把物件字面量包起來

let func = () => ();


console.log(func()); // 


// 不過上面那樣解決的缺點是可讀性變差了，所以更推薦直接當成多條語句的形式來寫，可讀性高 


let func = () => 


}
這是箭頭函式比較常見的用法

// 普通函式寫法


[1, 2, 3, 4].map(function (x) );


let result = [5, 4, 1, 3, 2].sort(function (a, b) );


// 箭頭函式寫法


[1, 2, 3, 4].map(x => x * x);


let result = [5, 4, 1, 3, 2].sort((a, b) => a - b);
廣州vi設計公司

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

const obj =     


}obj.a(); // 列印結果：obj物件


const obj = 


}obj.a(); // 列印結果： window物件
上述**中，箭頭函式與外層的this保持一致，最外層的this就是window物件。

function func1(a, b) 


let func2 = (a, b) => 


func1(1, 2); // arguments(2) [1, 2, callee: ƒ, symbol(symbol.iterator): ƒ]


func2(1, 2); // uncaught referenceerror: arguments is not defined
如果非要列印函式引數，可以在箭頭函式中使用rest引數代替arguments物件

let func2 = (...rest) =>
在建構函式中，this指向新建立的物件例項

而箭頭函式沒有 [[construct]]方法，箭頭函式不可以當作建構函式，如果這樣做會丟擲異常

var person = (name) => 


// uncaught typeerror: person is not a constructor


var person = new person('jacky');
箭頭函式在建立時this物件就繫結了，故不會指向物件例項。

new.target是es6新引入的屬性，普通函式如果通過new呼叫，new.target會返回該函式的引用。

function cat() 


let cat = new cat(); // ƒ cat()
此屬性主要：用於確定建構函式是否為new呼叫的。

箭頭函式的this指向全域性物件，在箭頭函式中使用箭頭函式會報錯。

// 普通函式


let a = function() 


a(); // undefined


// 箭頭函式


let b = () => ;


b();
由於不能通過 new 關鍵字呼叫，不能作為建構函式，所以箭頭函式不存在 prototype 這個屬性。

let func = () => {};


console.log(func.prototype) // undefined
箭頭函式沒有原型，故也不能通過 super 來訪問原型的屬性，所以箭頭函式也是沒有 super 的。同this、arguments、new.target 一樣，這些值由外圍最近一層非箭頭函式決定。

var name = 'global name';


var obj = 


// 箭頭函式定義在全域性作用域


let func = () => ;


func(); // global name


// this的指向不會改變，永遠指向window物件,放到到window下的全域性變數


func.call(obj); // global name


func.bind(obj)(); // global name
雖然箭頭函式中的箭頭不是運算子，但箭頭函式具有與常規函式不同的特殊運算子優先順序解析規則。

let callback;


callback = callback || function() {}; // ok


callback = callback || () => {}; 


// syntaxerror:非法箭頭函式屬性


callback = callback || (() => {}); // ok


function foo(a, a) 


var boo = (a, a) => ;


foo(1, 2);


boo(1, 2);
yield 關鍵字通常不能在箭頭函式中使用（除非是巢狀在允許使用的函式內）。因此，箭頭函式不能用作生成器（ generator ）。

1.不應被用在定義物件的方法上

var obj = ,


c: () => console.log(this.x, this)


}obj.b(); // 10 


obj.c(); // undefined window
因為它內部this的指向原因，當使用obj.c()的時候，我們希望c方法裡面的this指向obj，但是它卻指向了obj所在上下文中的this（即window），違背了我們的需求，所以箭頭函式不適合作為物件的方法。

2.具有動態上下文的**函式，也不應使用箭頭函式

var btn = document.getelementbyid('btn');


btn.addeventlistener('click', () => );


為btn的監聽函式是乙個箭頭函式，導致裡面的this就是全域性物件,而不符合我們想操作按鈕本身的需求。如果改成普通函式，this就會動態指向被點選的按鈕物件
除了前面兩點，剩下的跟上面講的與普通函式的區別重複了，故只作總結不貼**了:

不應被用在定義物件的方法上

具有動態上下文的**函式，也不應使用箭頭函式

不能應用在建構函式中

避免在 prototype 上使用

避免在需要 arguments 上使用

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

箭頭函式 1.由於大括號被解釋為 塊，所以如果箭頭函式直接返回乙個物件，必須在物件外面加上括號。var get id 2.箭頭函式可以與變數解構結合使用 const full first last 等於function full person 3.箭頭函式使得表示式更加簡潔。使用箭頭函式需要注意幾點...

es6箭頭函式

本例是在了解es6知識後在原來定義函式的基礎上進行理解var searchvalue 查詢匹配物件 var button var input var select button if searchvalue.input undefined button.click else 重新整理 tableli...

es6 箭頭函式

1.單引數 function cheng a 3 let cheng a 3 a a console.log cheng 9 2.多引數 function add a,b let add a,b a b 預設返回值 console.log add 3,9 3.無返回值 function add a,...