ECMAScript 箭頭函式

一、ecmascript-箭頭函式

es5中的函式定義

// es5中定義函式

// 方式一
function
sum(x, y)
// 方式二
varsum
=function
sum(x, y)
console.
log(
sum(4,
5))// 這兩種定義方式的區別
// 1. 方式一：定義的函式，無論你在函式前呼叫，還是函式後呼叫，都不會存在問題，因為存在函式預編譯
// 2. 方式二：定義的函式，只是把函式賦值乙個變數，在js中存在變數提公升，如果在定義之前呼叫，會提示未定義，只能在函式後呼叫。

// 箭頭函式

let sum =
(x, y)
=>
console.
log(
sum(4,
5))// 簡寫
let sum =
(x, y)
=> x + y
console.
log(
sum(4,
5))let x = x =
> x
// 等同於
let x =
function
(x)

let obtn = document.

queryselector
('#btn'
)obtn.
addeventlistener
('click'
,function()
呼叫的window物件},
1000
)settimeout
(function()
.bind
(this),
1000
)// 箭頭函式
// 箭頭函式裡沒有this，是繼承外層函式的this，這邊父層函式this指向是確定
settimeout((
)=>
,1000)}
)

// es5中定義乙個類

function
people
(name, age)
this
.name = name
this
.age = age
}var p1 =
newpeople
('zhangsan'
,'18'
)console.
log(p1)
// people 
// 箭頭函式定義不可以當作建構函式
letpeople
=(name, age)
=>
let p2 =
newpeople
('zhangsan'
,'18'
)// 編譯報錯：people is not a constructor
console.
log(p2)

// 正常函式

letfoo
=function()
foo(1,
2,3)
// 箭頭函式
letfoo=(
)=>
foo(1,
2,3)
// 編譯報錯：arguments is not defined
// rest方式
letfoo=(
...args)
=>
foo(1,
2,3)

// es5中自動執行函式

(function()
)()// 或者
(function()
())// 箭頭函式((
)=>)(
)// 報錯((
)=>()
)// 編譯報錯：unexpected token, expected ","

EcmaScript 6 箭頭函式

es5 var total values.reduce function a,b 0 es6 var total values.reduce a,b a b,0 箭頭即乙個函式的簡化 es5 confetti btn click function event es6 confetti btn cli...

ECMAScript中的箭頭函式

ecmascript中的箭頭函式 ecmascript6中允許使用箭頭 表示函式，使用箭頭函式使得 更加簡潔，使用箭頭函式時，函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。使得es程式設計時擺脫this作用域問題的困擾，避免多次使用bind this 繫結this的作用域。箭...

ECMAScript6中的箭頭函式

在2015年新出的ecmascript6中，其中的函式部分，有了乙個這樣的東西 箭頭函式 大概對它解釋一下，其中，左邊的括號是函式的形式引數，右邊的花括號是函式體。接下來，我們聊一聊如何使用這個箭頭函式 1.一般情況 var func1 var func2 function 其中，func1和fun...