Home > Article > Web Front-end > Where can es6 arrow functions not be used?
In es6, the arrow function cannot be used in computed; because the this point in the arrow function is based on the context, and the this point of the arrow function in computed will point to the window, the data cannot appear, so it cannot be used in computed Use arrow functions here.
The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.
This in the arrow function is based on the context. Use the arrow function in computed. Since the corresponding content cannot be found, this will point to the window and data. Unable to appear.
Examples are as follows:
<!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>
Expand knowledge:
The arrow function has its convenience and its advantages, but it also has shortcomings and its advantages The code is concise, and this is defined in advance, but its shortcomings are also the same. For example, the code is too concise, making it difficult to read, and this is defined in advance, making it impossible to use js to perform some operations that appear to be very normal in es5. In view of these shortcomings, let me summarize below the circumstances under which arrow functions should not be used.
Define function on object
Define function on prototype
Dynamic Callback function in context
In constructor
javascript video tutorial, web front-end】
The above is the detailed content of Where can es6 arrow functions not be used?. For more information, please follow other related articles on the PHP Chinese website!