时间戳

首页 > 解决方案 > JavaScript 对象中的不同函数声明之间有什么区别（如果有的话）？

javascript - JavaScript 对象中的不同函数声明之间有什么区别（如果有的话）？

问题描述

我有一个 JavaScript 对象：

var methods = {

  classStyle() {
    console.log('Class style function');
  },

  traditionalStyle: function() {
    console.log('Traditional style function');
  },

  arrowStyle: () => {
    console.log('Arrow style function');
  }

};

methods.classStyle();
methods.traditionalStyle();
methods.arrowStyle();

输出如预期：

(index):70 Class style function
(index):74 Traditional style function
(index):78 Arrow style function

我的问题是：

  1. 这些不同的声明方法之间有什么区别吗？
  2. 是看个人喜好吗？还是内部运作方式发生变化？
  3. 使用不同的样式时有什么注意事项吗？

标签： javascriptecmascript-6

解决方案

“类风格函数”（速记方法）与常规函数非常相似。唯一的区别是它不能用作构造函数（即用 调用new），因此它没有prototype属性。至于箭头函数，请参阅箭头函数与函数声明/表达式：它们是否等效/可交换？. 简而言之，箭头函数不绑定自己的thisand arguments，也不能与 . 一起使用new。

是看个人喜好吗？还是内部运作方式发生变化？

在 ES6+ 中，没有理由在对象中使用传统的函数语法，因为速记方法语法更简单、更安全，因为如果你不小心尝试将方法用作构造函数，就会出错。至于箭头函数，只有在不需要使用this.

推荐阅读