ES6 箭頭函式及this指向詳解

2021-09-25 08:02:11 字數 1324 閱讀 8129

箭頭函式相當於匿名函式,箭頭函式簡化了函式的定義,比函式表示式更簡潔,並且沒有自己的this,arguments。。。

基礎語法

(引數1, 引數2, …) =>

高階語法

箭頭函式的 this

箭頭函式沒有自己的 this,箭頭函式的 this 在定義函式的時候繫結,而不是在執行函式的時候繫結。

html:

"btn1"

>

普通函式 thisbutton

>

"btn2"

>

箭頭函式 thisbutton

>

js:

// 通過id 獲取 元素

let btn1 = document.

getelementbyid

('btn1'

)let btn2 = document.

getelementbyid

('btn2'

)// 普通函式

btn1.

onclick

=function()

// 箭頭函式

btn2.

onclick=(

)=> console.

log(

this

)// 當前函式的 this 指向 window

執行結果:

"btn1"

>普通函式 this

window

箭頭函式的 this 看外層是否有普通函式,如果有,外層函式的 this 就是箭頭函式的 this ,如果沒有則 this 是 window。

外層為普通函式

let obj =

}// 執行結果:箭頭函式 this

obj.

getname()

// 普通函式中的 this 指向呼叫該函式的 obj 物件

// 執行結果也是:箭頭函式 this

obj.

getname()

()// 由此可見當前的箭頭函式中的 this 也指向 obj 物件

外層為箭頭函式

let obj =

}obj.

getname()

obj.

getname()

()

執行結果:

#指向 window

window

window

window

ES6箭頭函式this指向

普通函式中的this 1.this總是代表它的直接呼叫者 js的this是執行上下文 例如 obj.func 那麼func中的this就是obj 2.在預設情況 非嚴格模式下,未使用 use strict 沒找到直接呼叫者,則this指的是 window 約定俗成 3.在嚴格模式下,沒有直接呼叫者的...

ES6 箭頭函式this指向問題

1.箭頭函式語法var a b c2.箭頭函式this 通過乙個例子 var obj test function settimeout this.func 1 obj.test 上面的 輸出結果為undefined。自上而下三次console.log this 的返回值 以此是 window obj...

es6箭頭函式

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