ES6 Function 箭頭函式

箭頭函式是es6的重要內容，為開發者帶來了很多福利，首先，先來看看箭頭函式的形式。

在此之前，如果要宣告乙個函式，我們需要這樣做：

function
hello()
// 或
lethello
=function()

但是用箭頭函式看起來就優雅了很多：

let
hello=(
)=>

let
hello
=(name)
=>
// 或者
lethello
= name =>

注意：如果只有乙個引數，可以省略括號，如果大於乙個引數一定要記得帶括號

let
pow= x => x * x

let
person
=(name)
=>
()

箭頭函式不僅書寫上比es5的函式宣告方式優雅，對this的處理方式也是截然不同的。

在講this之前，先來簡單看看都有哪些作用域：

物件型別

window/global

全域性作用域

function

函式作用域/區域性作用域

{}塊狀作用域

this

動態作用域

再來看看怎麼確認this指向的物件：

"btn"
>點我<
/button>
let obtn=document.
queryselector
('#btn'
)obtn.
addeventlistener
('click'
,function()
)

{}確定乙個塊級作用域，this指向呼叫的物件，在這裡，this指向塊級作用域{}外的呼叫函式的obtn物件。

再來看乙個例子：

let obtn=document.
queryselector
('#btn'
)obtn.
addeventlistener
('click'
,function()
,1000)}
)

跟上乙個例子是同乙個道理，{}確定乙個塊級作用域，this指向作用域外呼叫函式的物件，而settimeout實質上是window.settimeout，所以，this指向window物件。

下面來看看箭頭函式是怎麼改變this

let obtn=document.
queryselector
('#btn'
)obtn.
addeventlistener
('click'
,function()
,1000)}
)

箭頭函式的執行作用域內沒有this，會沿作用域鏈往上找上乙個執行作用域（{}確定乙個作用域）。

let obtn=document.
queryselector
('#btn'
)obtn.
addeventlistener
('click'
,function()
.bind
(this),
1000)}
)

由之前的例子可以知道，console.log(this)中的this原本指向的是window，這裡用bind改變this的指向，這裡bind的引數即為this的指向，指向obtn。

注意：在物件裡不能使用箭頭函式

let s=
'school'
let name=
'wdl'
let obj=
}obj.
study
()

let
people
=(name,age)
=>
let p1=
newpeople
('wdl',21
)console.
log(p1)
//列印出空物件

let
foo=()
=>
foo(1,
2,3)

但是可以用rest引數代替arguments引數的作用：

let
foo=
(...args)
=>
foo(1,
2,3)
//[1,2,3]

ES6新特性之箭頭函式與function的區別

function的寫法 function fn a,b 箭頭函式的寫法 let foo a,b 在function中，this指向的是呼叫該函式的物件使用function定義的函式 function foo var obj foo window obj.aa obj而在箭頭函式中，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 Function 箭頭函式

ES6新特性之箭頭函式與function的區別

es6箭頭函式

es6 箭頭函式

相關推薦