在 Javascript 对象上定义方法/函数答案

【问题标题】：Defining methods/functions on Javascript Objects在 Javascript 对象上定义方法/函数
【发布时间】：2019-11-08 23:47:16
【问题描述】：

这是：

saveUpdate() {
   // Some code
}

同：

saveUpdate: function() {
   // Some code
}

是否有最佳实践 (ES6) 方法来定义对象（特别是 Vue.js 组件）上的方法？

更多上下文：我的 Vue.js 应用程序在生产中正确触发方法时遇到问题。我定义的方法似乎在开发中运行良好——但一旦编译用于生产，它们的行为似乎并不相同。我在 Vue.js 文档中读到所有方法都需要定义为新的单独函数，我现在想知道我定义方法的方式；实际上是不正确的。

更广泛的例子：

...,
methods: {
  saveUpdate() {
   // Some code
  }
},
...

我是否应该这样做：

...,
methods: {
  saveUpdate: () => {
   // Some code
  }
},
...

什么是现代的、最佳实践或公认的方法？还是我找错地方了，而我的声明就是这样？

【问题讨论】：

"我应该做类似 " 的事情吗？？？？不。见Use arrow function in vue computed does not work

标签： javascript function object vue.js ecmascript-6

【解决方案1】：

是的，这个：

saveUpdate() {
   // Some code
}

是语法糖：

saveUpdate: function() {
   // Some code
}

两者的语法没有什么不同。如果你想要一个箭头函数，我相信你需要使用第二种形式：

saveUpdate: () => {
   // Some code in a lexical `this` scope (not useful in Vue computed).
}

还要注意-> 语法无效 - 它是一个胖箭头=>。尽管正如 Phil 在 cmets 中指出的那样，您很可能不想在 Vue 项目中使用箭头函数，因为您将失去与 this 的绑定，这是您与组件交互的方式。

【讨论】：

对于任何 Vue 实例函数（计算/方法/等）都不太可能需要箭头函数，因为您会丢失对实例本身的最重要的 this 引用
我看到了@Phil（不熟悉 Vue）——我会补充一下。
不，new 与构造函数一起使用。
@LawrenceCherone 不，它是一个速记函数 - 但具有相同的功能，因此它是纯视觉的。
没有逗号是无效的，因为对象属性总是用逗号分隔，数组元素也是如此 - 它总是在那里。

【解决方案2】：

saveUpdate() {...} 是 saveUpdate: function() {...} 的 ES6 快捷方式，所以是的，它们是相同的。由于 Vue 应用程序通常被转译，因此没有理由不使用第一个选项。

如果一个函数在应用程序中被复用，它可以单独声明：

export function saveUpdate() {...}

...

export default {
  methods: { saveUpdate }
}

不应将箭头用于期望以this 访问 Vue 实例的函数。

正如the documentation 解释的那样：

调用所有生命周期钩子时，其 this 上下文指向调用它的 Vue 实例。

不要在选项属性或回调上使用箭头函数，例如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。由于箭头函数没有 this，所以 this 将被视为任何其他变量并通过词法查找在找到之前的父作用域，通常会导致错误，例如 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function。

【讨论】：