回答es6箭头函数在哪里不能用

 所属分类:web前端开发

 浏览:120次-  评论: 0次-  更新时间:2022-10-30
描述:更多教程资料进入php教程获得。 在es6中,箭头函数在computed里面不能使用;因为箭头函数中的this指向是根据上下文的,而在computed中箭头...
更多教程资料进入php教程获得。

在es6中,箭头函数在computed里面不能使用;因为箭头函数中的this指向是根据上下文的,而在computed中箭头函数的this会指向window,数据无法出现,因此不能在computed里使用箭头函数。

前端(vue)入门到精通课程:进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境: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箭头函数在哪里不能用的详细内容,更多请关注zzsucai.com其它相关文章!

 标签: es6,
积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!