在es6中,箭頭函數在computed裡面不能使用;因為箭頭函數中的this指向是根據上下文的,而在computed中箭頭函數的this會指向window,資料無法出現,因此不能在computed裡使用箭頭函數。
本教學操作環境:windows10系統、ECMAScript 6.0版、Dell G3電腦。
箭頭函數裡面的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中文網其他相關文章!