箭頭函式的坑

2021-10-05 12:09:36 字數 1347 閱讀 6778

es6裡面的箭頭函式很好用,不過也有些坑,如果你覺得它完全取代了function關鍵字,那就是大錯特錯了。

建構函式

箭頭函式無法跟function一樣使用new:

var foo = ()=>

var foo2 = function()

console.log(foo.prototype)//undefined

console.log(foo.constructor)//[function: function]

console.log(foo2.prototype)//foo2{}

console.log(foo2.constructor)//[function: function]

var f2 = new foo2()

console.log(f2.__proto__)//foo2 {}

var f = new foo()//報錯,因為沒有prototype

我們再來回顧下new的執行過程:

1、建立乙個空物件

2、將該物件的__proto__指向到建構函式(比如fn)的原型prototype

3、修改建構函式fn的上下文到空物件

4、返回空物件(其實就是this)

//new的執行過程

function mynew(fn) //定義乙個空的object

mythis.__proto__ = fn.prototype

let args = .slice.call(arguments,1)

return mythis //其實這個就是this

}function person(name)

let o = mynew(person,'jack')

console.log(o)

箭頭函式不滿足第二步,也就是沒有原型prototype,因此無法使用new關鍵字。

this

雖然箭頭函式可以幫我們繫結this上下文作用域,但如果不清楚內部原理濫用的話,仍然會遇到大坑。

window.color = 'blue'

let color = 'green'

let obj =

}obj.getcolor()//blue

window.color = 'blue'

let color = 'green'

let obj =

let getcolor = () =>

getcolor.call(obj)//blue

這個就不需解釋了吧~~

map中使用箭頭函式遇到的坑

箭頭函式提供了更簡潔和更短的語法,其中乙個可用功能是可以將函式編寫為具有隱式返回值的lambda表示式。這對於功能樣式 很方便,比如使用函式對映陣列 const numbers 1,2,3,4 numbers.map n n n 這個箭頭函式將按照預期的方式工作,它將值自身相乘並返回到包含的新陣列 ...

箭頭箭頭函式

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

箭頭函式寫法 箭頭函式

1 箭頭函式介紹 es6 let fn v v console.log fn 好酷的箭頭函式!好酷的箭頭函式!es5 let fn function v 和return省略掉 v v v 相當於 function v 和return v 和return時,如果返回的內容是乙個物件,物件需要用括號 括...