箭头功能是否比v8中的普通独立功能声明更快(更高性能,更轻)？

Question

我问这个问题是因为我和我的同事对编码风格有争议,因为他更喜欢箭头功能声明:

const sum = (a, b) => a + b;

而且我更喜欢旧式的独立功能声明:

function sum(a, b) {
    return a + b;
}

我的观点是旧式代码更具可读性,您可以更清楚地区分函数和变量声明.他的观点是带箭头功能的代码运行得更快.

当您使用旧式独立函数声明而不是箭头函数时,您是否了解实际性能惩罚(在第8版中)？这种处罚真的存在吗？

Answer 1

V8开发人员在这里.箭头函数(大多数)只是常规函数声明的"语法糖".它们并不快.

Answer 2

我认为类属性中的箭头函数可能会导致一些性能问题。这是一个例子：

class Car {
  setColor = (color) => { this.color = color; }

  constructor() {
     this.color = '';
     this.getColor = () => { return this.color; };
  }

  printCarColor() {
     console.log(this.color);
  }
}
var c = new Car();
console.log(c);

如果我们看一下变量 c，您会注意到函数setColor和getColor是为每个实例全新创建的，并且每个新副本都放置在每个实例上，而函数 printCarColor 驻留在原型上。

如果您希望一千个实例中的每个实例都能够进行固定上下文方法引用，那么您将需要一千个单独的方法（不是共享的），当然，您将必须存储这一千个方法中的每一个实例本身的单独方法，从而破坏了单个共享原型的全部意义。

Answer 3

以下显示:

1. 先行(传统或肥胖)会受到处罚
2. Chrome中没有明显的区别

function goFat() {
    for (var i = 0; i < 1000000; i++) {
        var v = ()=>{};
        v();
    }
}

function goTraditional() {
    for (var i = 0; i < 1000000; i++) {
        var v = function() {};
        v();
    }

}

function race() {
  var start = performance.now();
  goTraditional();
  console.log('Traditional elapsed: ' + (performance.now() - start));
  start = performance.now();
  goFat()
  console.log('Fat elapsed: ' + (performance.now() - start));
  start = performance.now();
  goTraditional();
  console.log('Traditional elapsed: ' + (performance.now() - start));
  start = performance.now();
  goFat()
  console.log('Fat elapsed: ' + (performance.now() - start));
  console.log('------');
}

<button onclick="race()">RACE!</button>

Answer 4

我在 jsben.ch 做了一个简短的基准测试。我运行了很多次，似乎箭头函数在大多数情况下只比普通函数快一点点。即使一次或两次正常功能更快......看起来差异微不足道。简而言之 - 如果您不需要介意上下文或这个，只需使用任何看起来更适合您的东西即可；）

https://jsben.ch/kJxPT

const a = (b, c) => b+c;

a(1,2);

VS

function a(b,c){
    return b+c;
}

a(1,2);