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

Question

我有一个 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. 在使用不同的样式时有什么注意事项吗？

Answer 1

“类风格函数”（速记方法）与常规函数非常相似。唯一的区别是它不能用作构造函数（即用new 调用），因此它没有prototype 属性。箭头函数见Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?。简而言之，箭头函数不会绑定自己的this 和arguments，也不能与new 一起使用。

这取决于个人喜好吗？还是内部运作方式发生变化？

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

Answer 2

正如前面提到的，作为补充，first 和 second 并不相同。一个主要区别是它们的可用位置和方式。看到这个 sn-p，你会看到创建对象时方法定义可用，但函数声明不可用。

这意味着当您使用传统样式定义时，您不能在对象的其他地方使用它，它将是未定义的。类风格将可用，这是一个巨大的差异。

methods = {
  classStyle() {

    //console.log('class this is', this);
    return 'class';
  },

  traditionalStyle: function() {
    //console.log('traditional this is', this);
    return 'tradition';

  },

  arrowStyle: () => {
    console.log('arrow this is', this);
  },

  testFn() {
    console.log('class is', this.classStyle);
    console.log('traditionnal is', this.traditionnalStyle);
  },

  get classProp() {
    return this.classStyle();
  },

  get traditionnalProp() {
    return this.traditionnalStyle();
  }

};



methods.testFn();
console.log(methods.classProp);
console.log(methods.traditionnalProp);

Answer 3

arrowStyle由于箭头函数的不同而不同。有关this 的差异，请参见下文：

var methods = {

  classStyle() {
    console.log('class this is', this);
  },

  traditionalStyle: function() {
    console.log('traditional this is', this);
  },

  arrowStyle: () => {
    console.log('arrow this is', this);
  }

};

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