ES6之箭頭函式

2021-08-21 18:06:24 字數 1824 閱讀 9077

一、基本用法

es6 允許使用「箭頭」（=>）定義函式。

var f = () => 5;


// 等同於


var f = function () ;


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


// 等同於


var sum = function(num1, num2) ;
如果箭頭函式的**塊部分多於一條語句，就要使用大括號將它們括起來，並且使用return語句返回。由於大括號被解釋為**塊，所以如果箭頭函式直接返回乙個物件，必須在物件外面加上括號，否則會報錯。

二、三個特點

1.不需要function關鍵字來建立函式

2.省略return關鍵字

3.繼承當前上下文的 this 關鍵字

function(i) //es5


(i) => i + 1 //es6
三、幾個注意點

（1）函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。

（2）不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲乙個錯誤。

（3）不可以使用arguments物件，該物件在函式體內不存在。如果要用，可以用 rest 引數代替。

（4）不可以使用yield命令，因此箭頭函式不能用作 generator 函式。

關於this的指向：

function foo() , 100);


} 


var id = 21; 


foo.call();


// id: 42
上面**中，settimeout的引數是乙個箭頭函式，這個箭頭函式的定義生效是在foo函式生成時，而它的真正執行要等到 100 毫秒後。如果是普通函式，執行時this應該指向全域性物件window，這時應該輸出21。但是，箭頭函式導致this總是指向函式定義生效時所在的物件（本例是），所以輸出的是42。

箭頭函式可以讓settimeout裡面的this繫結定義所在的作用域，而不是指向執行所在作用域。

function timer() , 1000);


} 


var timer = new timer(); 


settimeout(() => console.log('s1: ', timer.s1), 3100);


settimeout(() => console.log('s2: ', timer.s2), 3100);


// s1: 3


// s2: 0
上面**中，timer函式內部設定了兩個定時器，分別使用了箭頭函式和普通函式。前者的this繫結定義時所在的作用域（即timer函式），後者的this指向執行時所在的作用域（即全域性物件）。所以，3100 毫秒之後，timer.s1被更新了 3 次，而timer.s2一次都沒更新。

看下面的**：

function foo() ;


};};


} 


var f = foo.call();


var t1 = f.call()()(); // id: 1


var t2 = f().call()(); // id: 1


var t3 = f()().call(); // id: 1
(function() )()


];}).call();


// ['outer']
上面**中，箭頭函式沒有自己的this，所以bind方法無效，內部的this指向外部的this。

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,...

ES6 箭頭函式

es6 中，箭頭函式就是函式的一種簡寫形式，使用括號包裹數，跟隨乙個 緊接著是函式體 var getprice function 箭頭函式 var getprice 9.15 箭頭函式不僅僅是讓 變得簡潔，函式中 this 總是繫結總shi 指向物件自身 function person 1000 使...