开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么getter和action是箭头函数？

在Vue.js中，getter和action通常被定义为箭头函数的原因有以下几点：

箭头函数没有自己的this绑定：箭头函数的this绑定是词法上的，它会捕获定义时所在的上下文的this值。这意味着在箭头函数内部，无论在哪里调用，this都指向箭头函数定义时的上下文。而在Vue.js中，getter和action需要访问Vue实例的属性和方法，使用箭头函数可以确保它们内部的this指向Vue实例，而不会受到调用位置的影响。
箭头函数更简洁：箭头函数的语法更加简洁，可以减少代码的书写量，提高代码的可读性和维护性。
箭头函数避免了this指向的困扰：在传统的函数中，this的指向是动态的，取决于函数的调用方式。在Vue.js中，getter和action通常需要在模板中绑定，而模板中的绑定方式可能是动态的，如果使用传统的函数定义方式，需要通过bind()、call()或apply()等方法来绑定this，而使用箭头函数可以避免这种困扰。

总之，使用箭头函数作为getter和action的定义方式，可以简化代码，避免this指向的困扰，并确保它们内部的this指向Vue实例，从而更好地实现Vue.js的响应式机制。

推荐的腾讯云相关产品和产品介绍链接地址：

云函数（Serverless）：云函数是一种无需管理服务器即可运行代码的计算服务，可以用于编写和执行后端逻辑，支持多种编程语言。详情请参考：https://cloud.tencent.com/product/scf
云数据库 MySQL 版（CDB）：云数据库 MySQL 版是一种高性能、可扩展的关系型数据库服务，适用于各种规模的应用程序。详情请参考：https://cloud.tencent.com/product/cdb_mysql
云服务器（CVM）：云服务器是一种弹性计算服务，提供可靠、安全、灵活的云端计算能力，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm

请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。

相关搜索:为什么使用Nuxt和Vuex找不到我的getter和action 找不到action是为什么箭头函数和onChange 为什么getter和setter是从不同的“基”调用的？箭头函数为什么不能new typescript getter函数和visual studio 使用getter和setter函数是否可行？关于箭头函数的描述,错误的是这算得上是“箭头函数”实现吗？构建时没有替换箭头函数为什么？为什么在action call inn组件中出现“action必须是纯对象。”- error？如何重置构造函数的getter和setter 为什么这个getter函数只返回初始值为什么在react-redux的action-creator函数中没有定义action？结构键和getter函数的散列映射结合状态和(箭头)函数的React函数组件 es2015箭头函数、fetch和这为什么箭头函数必须声明在调用者函数之上为什么使用before_action :authenticate_admin是安全的？为什么调用箭头函数的方法不起作用？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

箭头函数和对象

有一个函数很短，比如这样： function getData() { return { data: 1 } } console.log(getData()) // { data: 1 } 想用...ES6箭头函数语法简化一下，于是写成这样： const getData = () => { data: 1 } console.log(getData()) // undefined 怎么会是呢？...解析根本原因在于这一段： const getData = () => { data: 1 } 如果用传统function来写，和下面是等价的： function getData() { data...: 1 } 那么还有一个问题，第二行这个玩意居然是合法语句？...j++) { if (j == 2) { break outer } } } console.log(i, j) // 0 2 果然和Java

8552 0

箭头函数和this指向

箭头函数基本使用 // 箭头函数: 也是一种定义函数的方式 // 1.定义函数的方式: function const aaa = function () { } // 2.对象字面量中定义函数...const obj = { bbb() { } } // 3.ES6中的箭头函数 // const ccc = (参数列表) => { // // }...const ccc = () => { } 带返回值的箭头函数 // 1.参数问题: // 1.1.放入两个参数 const sum = (num1, num2) => { return...this是window }, 1000) //setTimeout(function () //{这种结构其实默认第一个参数是window,所以函数体内向外找到的第一个作用域是window...obj.aaa() 箭头函数中的this是如何查找的?

1.3K1 0

普通函数和箭头函数的区别

详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景箭头函数是ES6的API，相信很多人都知道，因为其语法上相对于普通函数更简洁，深受大家的喜爱。...就是这种我们日常开发中一直在使用的API，大部分同学却对它的了解程度还是不够深… 普通函数和箭头函数的区别：箭头函数的this指向规则：箭头函数没有prototype(原型)，所以箭头函数本身没有this...(全局对象) 唔，这个问题实际上是面试官提出来的，当时我认为的箭头函数规则就是：箭头函数的this指向继承自外层第一个普通函数的this，现在看来真是不严谨(少说一个定义的时候)，要是面试官问我：定义和执行不在同一个普通函数中...：围绕两点：箭头函数的this意外指向和代码的可读性。...箭头函数的解析顺序相对||靠前不适用场景：箭头函数的this意外指向和代码的可读性。

8543 0

普通函数和箭头函数的区别

1、this指向问题（重要） MDN的描述是箭头函数不会创建自己的this他只会从自己的作用域链的上一层继承this，这里我们可以理解为this指向外层第一个普通函数（如果没有，则指向全局对象（可通过...console.log(globalThis) // Window obj.fn() // Window obj.fn2()() // {name: 'zs', fn: ƒ, fn2: ƒ} 1、箭头函数中的.../ 报错：ReferenceError: arguments is not defined console.log(args); // [1, 2, 3] } fn(1, 2, 3) 3、不能和new...一起用，会报错也就是说箭头函数不能被用作构造函数 4、没有prototype const Fn = () => {} console.log(Fn.prototype) // undefined let...f = new Fn(); // Uncaught TypeError: Fn is not a constructor 以上就是关于箭头函数和普通函数的区别，最重要的就是关于this指向问题，有更多的箭头函数的知识大家可以看看

3651 0

面试官：箭头函数和普通函数的区别？箭头函数的this指向哪里？

一、箭头函数更直观、简洁箭头函数为匿名函数 let a = () => {} 有一个参数可省略（），多个的话不能省略（），用，号分开 let a = m => {} let b = (m, n...this 的执行环境') // 当前对象 test } } people.fn() people.fn2() 结果：四、箭头函数没有prototype let a = () => 1 let...arguments，值是有外围非箭头函数所决定的 // 报错 let a = (m) => { console.log(arguments) } a(1,2,3) // arguments is...not defined // 值是有外围非箭头函数所决定的 function fn(){ let f = ()=> { console.log(arguments) } f();...) // 1,2,3 六、箭头函数不能当做Generator函数,不能使用yield关键字箭头函数的this指向为其上下文的this，一级一级往上找，直到找到 window 当然箭头函数与普通函数的区别还有很多

5523 0

Dart 匿名函数和箭头函数的思考

不管什么语言，不管是叫闭包，Block，lambda表达式还是箭头函数。其实都是函数的简单写法，为了更方便的在各种场景使用。学了太多的语言，感觉有点乱，整理一下Dart的函数当参数的写法。...List array = [1,2,3]; array.forEach(printFunc); } - 匿名函数写法 main(List args) { //和第一种方法相似...//箭头函数赋值 var f = (e) => print(e); //以forEach 函数调用为例 List array = [1,2,3]; //赋值传入箭头函数 array.forEach...(f); } 关于匿名函数和箭头函数的赋值，第一反应前面加一个返回值就行，But报错了，没有这种写法。...其实仔细想想函数的语法糖就是匿名函数，匿名函数的简写就是箭头函数。

8171 0

js匿名函数和箭头函数_函数式编程

大家好，又见面了，我是你们的朋友全栈君。...js匿名函数、箭头函数，以及他们的区别匿名函数箭头函数区别 1.匿名函数简单点说就是没有名字的函数，在声明函数时不写函数名称，（将函数赋值给变量）叫匿名函数。...当箭头函数只包含一个表达式时，连{…} 和return都省略了。...')}; var y = ()=>{ console.log('箭头函数')}; x(); y(); 本质上都是函数，箭头函数是匿名函数的简写形式。...普通函数：this指向直接调用者，非严格模式下没有找到直接调用者就指向window（严格模式下this是undefined）。

1.8K1 0

探索 JavaScript 函数：普通函数、箭头函数和生成函数

JavaScript的动态领域中，函数是基本构建块，赋予开发者高效组织和执行代码的能力。理解普通函数、箭头函数以及相对较新的生成器函数之间的微妙差异，对于编写整洁、简明和高效的代码至关重要。...本文将深入探讨每种函数类型，探索它们的语法、行为和使用场景。普通函数：普通函数，也被称为传统函数或函数声明，在 JavaScript 自早期以来就一直是重要组成部分。...普通函数的使用广泛且适用于各种场景，使其成为 JavaScript 开发的重要组成部分。箭头函数：箭头函数是在 ECMAScript 6（ES6）中引入的，与普通函数相比，它们提供了更简洁的语法。...不绑定 this、arguments、super 或 new.target：箭头函数不会为这些值创建自己的绑定。箭头函数在回调函数和函数式编程范式等需要简洁性和词法作用域的场景中特别有用。...生成器函数：生成器函数是 JavaScript 中一种特殊类型的函数，用于创建迭代器。它们允许暂停和恢复函数的执行，实现更灵活的控制流。

1510 0

盘点JavaScript中getter()和setter()函数的使用

它们本质上是用于获取和设置值的函数，但从外部代码来看就像常规属性。二、Getter 和 setter 访问器属性由 “getter” 和 “setter” 方法表示。...在对象字面量中，它们用 get和 set表示： let obj = { get propName() { // 当读取 obj.propName 时，getter 起作用 }, set...不以函数的方式调用 user.fullName，正常读取它：getter 在幕后运行。截至目前，fullName只有一个 getter。...五、兼容性访问器的一大用途是，它们允许随时通过使用 getter 和 setter 替换“正常的”数据属性，来控制和调整这些属性的行为。...六、总结本文基于JavaScript基础，介绍了getter 和 setter函数的使用。对于其中的属性，通过案例的样式，运行效果图的展示，进行详细的讲解。

1.6K1 1

28 - 箭头函数和 this 关键字

原文地址：https://dev.to/bhagatparwinder/arrow-functions-this-keyword-350j 在之前的博文中，我们已经学过了箭头函数和 this 关键字...现在我们将把它俩结合起来并且看看箭头函数与标准的函数表达式行为上有何不同。箭头函数，多数时候像函数表达式的简写语法。最重要的区别是箭头函数没有和 this 关键字绑定。...为何 main、side 和 dessert 的值为 undefined ? 箭头函数内部的 this 指向我们定义对象 myObject 时环境（在这里指向 window）。...，箭头函数中的 this 是根据定义它的位置决定的，而不是它使用的地方。...总结：除了自身直接使用，箭头函数表现的与函数表达式有些不同。虽然箭头函数提供了简明的语法和一些优势，但要知道何时不能使用它直接替换函数表达式。

2211 0

Javascript中普通函数和箭头函数的区别

Javascript中普通函数和箭头函数的区别 1.在es6中运行使用“（=>）”来定义函数，比如： var fn = p=> p;//最精简模式 //等价 var fn = function (p)...var fn2 = (p1,p2)=>{ let p3 = p1+p2; return p3; } 2.箭头函数没有this对象，他会找到上层调用者作为this对象，直至window。...还有，由于箭头函数没有自己的this，所以call，apply，bing等方法都不能改变this指向。...4.箭头函数没有arguments，如果想要获取全部参数，就使用rest参数。...//箭头函数没有arguments,rest参数代替 var add=(...num)=>{ let sum=0; for (let val of num) {

9851 0

箭头函数和常规函数之间的 5 个区别

`; } // 函数表达式 const greet = function(who) { return `Hello, ${who}`; } 代码中的函数声明和函数表达式被称为“常规函数”。...this 词法解析是箭头函数的重要功能之一。...手动绑定 this 需要样板代码，尤其是在你有很多方法的情况下。有一种更好的方法：把箭头函数作为类字段。箭头函数感谢类字段提案（目前在第3阶段），你可以将箭头函数用作类中的方法。...logName() 方法中 this 的值始终是类实例： setTimeout(batman.logName, 1000); // after 1 second logs "Batman" 总结了解常规函数和箭头函数之间的差异有助于为特定需求选择正确的语法...常规函数中的 this 值是动态的，并取决于调用方式。是箭头函数中的 this 在词法上是绑定的，等于外部函数的 this。常规函数中的 arguments 对象包含参数列表。

5713 0

论普通函数和箭头函数的区别以及箭头函数的注意事项、不适用场景

普通函数和箭头函数的区别：箭头函数的this指向规则： 1....箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象) 唔，这个问题实际上是面试官提出来的，当时我认为的箭头函数规则就是：箭头函数的this指向继承自外层第一个普通函数的...：围绕两点：箭头函数的this意外指向和代码的可读性。...,普通函数的函数参数支持重命名箭头函数相对于普通函数语法更简洁优雅箭头函数的注意事项及不适用场景箭头函数的注意事项：箭头函数一条语句返回对象字面量，需要加括号箭头函数在参数和箭头之间不能换行...箭头函数的解析顺序相对||靠前不适用场景：箭头函数的this意外指向和代码的可读性。

1.6K0 0

为什么不需要为Python对象添加 getter 和 setter

Getter 和 setter在java中被广泛使用。一个好的java编程准则为：将所有属性设置为私有的，同时为属性写getter和setter函数以供外部使用。...这样做的好处是属性的具体实现被隐藏，当未来需要修改时，只需要修改getter 和 setter即可，而不用修改代码中所有引用这个属性的地方。...可能做的修改为：在获取或设置属性时打一条日志设置属性时，对值对进检查设置发生时，修改设置的值获取属性时，动态地计算值可谓是好处多多，getter和setter为变量访问提供了灵活的方式。...java中需要为变量写getter和setter的原因为：当我们写这样的表达式 person.name 来获取一个 person 对象的 name 属性时，这个表达式的意义是固定的，它就是获取这个属性，...可见python原生就提供了添加额外getter和setter所带来的好处。因此没有必要一开始就为对象属性编写getter和setter函数，而是在需要时切换到函数调用式属性。

1.3K2 0

为什么要用Getter和Setter方法，而不是公开属性

大多数字段的访问都是通过Getter和Setter方法来间接访问，为什么不直接将字段设置为公开属性Public呢？答案在于前者的未来可能性。...当我在Java语言编程中开始我的职业生涯时，我就对Getter和Setter感到困惑。为什么要这么写呢？为什么不直接用Public呢？这对我来说是个奇怪的语法。 ?...那么，下面属性name和value的区别是什么呢？ ? 慢慢地，我意识到了为什么我们使用Getter和Setter，以及为什么它们是重要的。...设置值的惟一方法是通过Setter，通过Getter获得值，所以现在字段只有一个入口和一个出口点，因为Getter和Setter是允许代码块的方法，所以可以对它们进行验证检查！...我理解，但一般来说，我们不写任何东西在Getter和Setter。我们只返回并设置字段，就像公开字段一样。那你为什么要说这些？

2.2K1 0

箭头函数的意义和函数的二义性

前言说到箭头函数，可能很多人的第一反应就是和普通函数的区别：箭头函数没有 this，普通函数的 this 指向依赖它是如何被调用的箭头函数没有 arguments 对象，而是通过剩余参数（rest parameters...，为什么还要有箭头函数？...答案只有一个：消除函数的二义性。函数的二义性那什么是函数的二义性呢？...this和原型？...this 来自于面向对象里面的概念，箭头函数里面没有原型的概念是一样的。

1491 0

js this问题和es6箭头函数this问题

如果把最后一行代码修改为　　o.m.apply(o); //1 ES6中箭头函数与普通函数this的区别普通函数中的this: 1. this总是代表它的直接调用者, 例如 obj.func ,那么...undefined 4.使用call,apply,bind(ES5新增)绑定的,this指的是绑定的对象箭头函数中的this 默认指向在定义它时,它所处的对象,而不是执行时的对象, 定义它的时候,可能环境是...} } obj.fn();//window 这次this指向了最外层的window对象，为什么呢，还是那个道理，这次this出现在全局函数setTImeout()中的匿名函数里，并没有某个对象进行显示调用...); }); } } obj.fn();//object this又指向函数的宿主对象了为了更加清楚的对比一般函数和箭头函数this指向的区别，我们给对象添加变量 var obj=...就绑定的window上 }); } f(); } } obj1.fn(); 总结： 1.箭头函数的this绑定看的是this所在的函数定义在哪个对象下，绑定到哪个对象则this

1.3K3 0

js中的箭头函数和普通函数有什么区别

js中箭头函数和普通函数区别如下： 1、样式不同，箭头函数是 =>，普通函数是 function； 2、箭头函数不能作为构造函数使用，也就不能使用 new 关键字； 3、箭头函数不绑定 arguments...，可以考虑用剩余参数代替； 4、箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，定义的时候就确定了； 5、call、apply、bind 并不会影响 this 的指向； 6、箭头函数没有原型属性...； 7、箭头函数不能当作 Generator 函数，不能使用 yield 关键字；

2.2K4 0

箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？

基本不同 1.写法不同，箭头函数使用箭头定义，普通函数中没有 .箭头函数都是匿名函数，普通函数可以有匿名函数，也可以有具体名函数，但是箭头函数都是匿名函数。...在普通函数中，this总是指向调用它的对象，如果用作构造函数，this指向创建的对象实例。箭头函数中没有this,声明时捕获其所在上下文的this供自己使用。...所以箭头函数结合call(),apply()方法调用一个函数时，只传入一个参数对this没有影响。...，不能使用new 关键字，因为new关键字是调用函数对象的constructor属性，箭头函数中没有该属性，所以不能new function fn1(){ console.log...arguments，取而代之用rest参数…解决 6.箭头函数不可做Generator函数

1.9K1 0

ES6系列_7之箭头函数和扩展

throw new Error('This is error') } return a+b; } console.log(add(0)); 在控制台可看到异常为： 3.函数中的严谨模式...在ES6中我们可以写在函数体中，相当于针对函数来使用。...总结：它得到的是必须传入的参数。...5.箭头函数在箭头函数中，方法体内如果是两句话，那就需要在方法体外边加上{}括号 var add =(a,b=1) => { console.log('hello world') return

2642 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭