箭头函数是否比 v8 中的普通独立函数声明更快（性能更高、更轻）？

Question

我问这个问题是因为我和我的同事在编码风格上存在争议，因为他更喜欢箭头函数声明：

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

而且我更喜欢老式的独立函数声明：

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

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

当您使用旧式独立函数声明而不是箭头函数时，您是否了解实际的性能损失（在 v8 中）？惩罚真的存在吗？

Answer 1

V8 开发人员在这里。箭头函数（大部分）只是常规函数声明的“语法糖”。没有性能差异。

Answer 2

以下说明：

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 3

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

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 4

nodejs有两个例子：

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

let testArrow = (a, b) => a + b;

let t1 = process.hrtime();
let tmp1 = 0;
for (let i = 0; i < 1000000000; ++i) {
    tmp1 = testFat(tmp1, i);
}
var fatTime = process.hrtime(t1);
console.log('fat', fatTime);

let t2 = process.hrtime();
let tmp2 = 0;
for (let i = 0; i < 1000000000; ++i) {
    tmp2 = testArrow(tmp2, i);
}
var arrowTime = process.hrtime(t2);
console.log('arrow', arrowTime);

function testFat() {
    return 0;
}

let testArrow = () => 0;

let t1 = process.hrtime();
for (let i = 0; i < 1000000000; ++i) {
    testFat();
}
var fatTime = process.hrtime(t1);
console.log('fat', fatTime);

let t2 = process.hrtime();
for (let i = 0; i < 1000000000; ++i) {
    testArrow();
}
var arrowTime = process.hrtime(t2);
console.log('arrow', arrowTime);```

结果是：

bash-3.2$ 节点 test_plus_i.js

胖 [0, 931986419]

箭头 [0, 960479009]

bash-3.2$ 节点 test_zero.js

胖 [0, 4795578​​88]

箭头 [0, 478563661]

bash-3.2$ 节点 --version

v12.8.0

bash-3.2$

所以你可以看到函数调用开销没有区别。

Answer 5

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

https://jsben.ch/kJxPT

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

a(1,2);

VS

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

a(1,2);

Answer 6

在我的 exp 中，我发现箭头函数确实比普通的 JS 函数运行得更快。 这是 react 中的一个小 sn-p，它使用箭头和正常功能。我发现使用箭头函数的组件比使用普通js函数的组件运行速度要快一些。

https://codepen.io/lokeshpathrabe/pen/qgzadx

class Fun extends React.Component {

  constructor(props){
    super(props);
    this.state = {start: new Date().getTime(),
                 end: new Date().getTime(),
                 number: 0};
    console.log('Function start: ', this.state.start);
    const fun = function(me){
      let n = me.state.number
      me.setState({
        ...me.state, end: new Date().getTime(), number: ++n
      })
    }
    this.interval = setInterval(fun, 1, this);
  }

  stop(){
    clearInterval(this.interval);
  }

  componentDidUpdate(){
    if((this.state.end - this.state.start) > 5000){
      console.log('Function end: ', this.state.end);
      clearInterval(this.interval)
    }
  }

  render() {
    return (
      <div>
        <h2>Counter with Function {this.state.number}</h2>
      </div>
    )
  }
}

class Arrow extends React.Component {

  constructor(props){
    super(props);
    this.state = {start: new Date().getTime(),
                 end: new Date().getTime(),
                 number: 0};
    console.log('Arrow start: ', this.state.start);
    this.interval = setInterval(()=>{
      let n = this.state.number
      this.setState({
        ...this.state, end: new Date().getTime(), number: ++n
      })
    }, 1);
  }

  stop(){
    clearInterval(this.interval);
  }

  componentDidUpdate(){
    if((this.state.end - this.state.start) > 5000){
      console.log('Arrow end: ', this.state.end);
      clearInterval(this.interval)
    }
  }

  render() {
    return (
      <div>
        <h2>Counter with Arrow {this.state.number}</h2>
      </div>
    )
  }
}

class HOC extends React.Component {

  render() {

    return (<div>
        <h1>The one reaching higher count wins</h1>
        <Arrow/>
        <Fun/>
        </div>);
  }
}

ReactDOM.render(<HOC />, document.getElementById('react-content'))

如果您的意见不同，请告诉我

Answer 7

箭头函数只是一个函数表达式。以下是相等的：

const foo = (a, b) => a + b // foo = an anonymous function
const foo = function(a, b) { return a + b; }
const foo = new Function("a", "b", "return a + b")

可以提升函数声明：

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

箭头函数不能用作生成器函数，例如：

function* foo(a, b) {
  yield a;
  yield b;
}

当您的函数需要 this 关键字时，请考虑使用它们。

---

至少在性能上没有太大差异。