關於箭頭函式

2022-09-02 23:54:25 字數 1529 閱讀 2866

一、為什麼存在

const person =, 1000)

}} person.sayhello()

因為setinterval執行的時候,是在全域性作用域下的,所有this指向的是全域性window,而window上沒有name和age,所以輸出的是undefined。

通常的寫法是快取this,然後在setinterval中用快取的this進行操作,如下:

const person =, 1000)

}} const sayhellofun =person.sayhello

sayhellofun()

二、和普通函式的區別

從上面的例子中,我們已經可以看出箭頭函式的優勢。

和普通函式相比,箭頭函式主要就是以下兩個方面的特點(不繫結this,arguments;更簡化的**語法)

1、不繫結this

什麼叫不繫結this,我個人的理解為箭頭函式的this其實就是在定義的時候就確定好的,以後不管怎麼呼叫這個箭頭函式,箭頭函式的this始終為定義時的this

我們還是以前面的那個setinterval**為例:

const person =, 1000)

}person.sayhello()

當person.sayhello()去執行setinterval的時候,是在全域性作用下執行的所有setinterval**函式的this就為全域性物件。es3-5中的函式this的值和呼叫這個函式的上下文有關。(注意是呼叫)

我們用箭頭函式重寫上訴函式:

const person =, 1000)

}person.sayhello()

輸出的還是undefined。為什麼呢??

因為我把方法寫在了物件裡,而物件的括號是不能封閉作用域的。所以此時的this還是指向全域性物件。

所以,通過以上的錯誤可以提醒我們,最好不要用箭頭函式作為物件的方法。

我們需要重新舉乙個例子,如下:

function

person () , 1000)

}let p = new person()

2、不繫結arguments

箭頭函式還有乙個比較有特點的地方就是其不繫結arguments,即如果你在箭頭函式中使用arguments引數不能得到想要的內容。

let arrowfunc = () =>console.log(arguments.length)

arrowfunc()

//output

arguments is not defined

所以在箭頭函式中我們是不能直接使用arguments物件的,但是如果我們又想獲得函式的引數怎麼辦呢?

我們可以使用剩餘引數來取代arguments剩餘引數詳情

關於JavaScript的箭頭函式

箭頭函式是乙個簡寫形式的函式表示式,並且它擁有詞法形式的this值 基本用法 var f v v 這個函式等同於 var f function v var sum num1,num2 num1 num2 等同於 var sum function num1,num2 first last 等同於 fu...

關於箭頭函式的思考

自從有了es6箭頭函式這個靈活的功能,現在寫函式都習慣寫成箭頭函式格式 然而如果不理解箭頭函式的原理,濫用它也會造成很大的影響。思考下面這個問題 let func value console.log value let func function value 我們到平台上測試一下,顯然兩者不等。le...

箭頭箭頭函式

var fn function a 一樣 jineng function 箭頭函式外面指向誰就指向誰 有function.console.log fn3 1 像函式表示式 this指向不變.不能作為建構函式 不能使用new 返回物件的話.外部用括號 var fn7 name asdfnasd age...