Discussion on ES6 tail tune optimization

Preface

I met this problem during the written examination two days ago , After reading many blog posts, I finally understand , Record it here ~

What is a tail call

Simply speaking , The return value of a function is a call to another function , This situation is called tail call .

function f1(n) {
    
    return n * 2
}

function f2(n) {
    
    return f1(n + 1) //line A
}
const res=f2(2))//line B

In the above code ,f2 The return value of is right f1 Call to , This is it. Tail call .

Optimization of tail call

First of all, we need to know that tail tuning optimization is the work that the browser helps us complete , As long as certain conditions are met , This optimization is triggered .

We all know ： At code execution time , A call stack will be generated , When a function is called, it is pushed onto the stack , When it return It will be out of the stack after .
Taking the above code as an example, we are right ES5 and ES6 Different treatment schemes are analyzed .

stay ES5 in ：

1. Call function f2,f2 Push , And record where it is called , In order to know the return value .
2. The function called at the end f1 Will be pushed into a new stack frame to represent the call , Record where it is called on the stack . When you get the return value of this function ,f1 end of execution , Bomb stack .
3. f2 Got it f1 The return value of ,f2 The execution of is over , Bomb stack .

You can see that in this call , Every stack frame that is not used up is kept in memory .

Observation can be seen ,f1 The execution result of does not have to reach lineA, But you can go directly to lineB. Why? ？ because f2 The return value of f1 The return value of , No operation has been done on this basis .

stay ES6 in , Optimized for this situation .

stay ES6 in ：

Reduce the size of tail call stack frame in strict mode , If the following conditions are met , No more new stack frames are created , Instead, empty and reuse the stack frame of the current function ：

1. The tail call no longer accesses the variable of the current stack frame （ Functions are not closures ）
2. The last call statement is on the last line of the function
3. Result of tail call direct As the return value of the function

How to understand direct Well ？ For example, tail tune optimization will not be done in the following cases

function f1(n) {
    
    return n * 2
}

function f2(n) {
    
    // stay f2 Return... Not directly f1 Result , But to add one 
    return 1+f1(n + 1) //line A
}
const res=f2(2))//line B

The reason is well understood , because f1 The return value of cannot be reached directly lineB, But to arrive first lineA add 1.

Tail recursion

What is tail recursion ？ In fact, it is a special form of tail call ： When the tail call is a call to itself , Tail recursion .

const sum = (n) => {
    
  if (n <= 1) return n;
  return n + sum(n-1)
}
sum(5)

The purpose of this code is to calculate 1 To 5 And , But it is clear that this situation will not do tail tune optimization , Because the tail tone function is not direct return, But first n. When n When the number increases , Because the previous call stack cannot be released , Will cause stack overflow problem .

We can use ES6 The tail tone optimization feature of rewrites the above code ：

const sum = (n, preSum = 0) => {
    
    if (n <= 1) return n + preSum
    else {
    
        //  current sum yes preSum+n, Recursion 1~n-1 Of sum
        return sum(n - 1, preSum + n)
    }
}
sum(5)

In this way, theoretically, there is no problem of maximum stack limit , But I'm actually testing （ use chrome） Is there a stack overflow problem found , After checking, it is said that some browsers do not support this optimization .fine~TAT