Where can es6 arrow functions not be used?-Front-end Q&A-php.cn

Where can es6 arrow functions not be used?

WBOY

Release： 2022-03-31 19:02:47

Original

1831 people have browsed it

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.

Where can es6 arrow functions not be used?

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

es6 Where can’t the arrow function be used?

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>

Copy after login

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
##Too short (unreadable) function

There is no doubt that arrow functions bring a lot of convenience. Proper use of arrow functions allows us to avoid using the early .bind() function or where fixed context is required and makes the code more concise.

Arrow functions also have some inconveniences. We cannot use arrow functions where dynamic context is required: defining functions that require dynamic context, constructors, callback functions that require this object as a target, and statements that are difficult to understand with arrow functions. In other cases, feel free to use arrow functions.

【Related recommendations:

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!