es6箭頭函數在哪裡不能用
- WBOY原創
- 2022-03-31 19:02:471824瀏覽
在es6中，箭頭函數在computed裡面不能使用；因為箭頭函數中的this指向是根據上下文的，而在computed中箭頭函數的this會指向window，資料無法出現，因此不能在computed裡使用箭頭函數。
本教學操作環境：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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn