es6箭頭函數在哪裡不能用

WBOY
發布: 2022-03-31 19:02:47
原創
1796 人瀏覽過

在es6中,箭頭函數在computed裡面不能使用;因為箭頭函數中的this指向是根據上下文的,而在computed中箭頭函數的this會指向window,資料無法出現,因此不能在computed裡使用箭頭函數。

es6箭頭函數在哪裡不能用

本教學操作環境:windows10系統、ECMAScript 6.0版、Dell G3電腦。

es6箭頭函數在哪裡不能用

箭頭函數裡面的this是根據上下文的,在computed裡用箭頭函數,由於找不到對應的內容,this會指向window,數據無法出現。

範例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>计算缓存</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{name}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
   firstName:"Zheng",
   lastName:"yifeng"
},
// 计算属性不能用箭头函数,箭头函数的this会指向window
computed:{
name(){
return this.firstName+this.lastName
}
//this => window
// name:()=>console.log(this)
        }
})
</script>
</body>
</html>
登入後複製

拓展知識:

箭頭函數有他的便捷有他的優點,但是他也有缺點,他的優點是程式碼簡潔,this提前定義,但他的缺點也是這些,例如程式碼太過簡潔,導致不好閱讀,this提前定義,導致無法使用js進行一些es5裡面看起來非常正常的操作。針對這些缺點,以下我就總結一下什麼情況下不該使用箭頭函數。

  • 在物件上定義函數

  • 在原型上定義函數

  • 動態上下文中的回調函數

  • 建構函數中

  • 太簡短的(難以理解)函數

毫無疑問,箭頭函數帶來了許多便利。適當的使用箭頭函數可以讓我們避免使用早期的.bind()函數或需要固定上下文的地方並且讓程式碼更加簡潔。

箭頭函數也有一些不便利的地方。我們在需要動態上下文的地方不能使用箭頭函數:定義需要動態上下文的函數,建構函數,需要this物件作為目標的回呼函數以及用箭頭函數難以理解的語句。在其他情況下,請盡情的使用箭頭函數。

【相關推薦:javascript影片教學web前端

以上是es6箭頭函數在哪裡不能用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
es6
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板