JS递归字符串反转的返回顺序差异及内存存储机制相关问题

1. 返回语句顺序调换后返回原字符串的原因 #

递归的执行逻辑是先逐层深入调用直到触发终止条件，再逐层向外返回结果，字符串拼接的顺序由返回阶段的执行顺序决定，我们以入参word = "abc"为例拆解两种写法的执行流程：

原写法：return reversed(word.substring(1)) + word.charAt(0) #

1. 第一层调用reversed("abc")，先执行reversed("bc")，等待返回结果后再拼接"a"
2. 第二层调用reversed("bc")，先执行reversed("c")，等待返回结果后再拼接"b"
3. 第三层调用reversed("c")，先执行reversed("")，等待返回结果后再拼接"c"
4. 第四层调用reversed("")触发终止条件，返回空字符串""
5. 第三层拿到返回值，拼接得到"" + "c" = "c"，返回给第二层
6. 第二层拿到返回值，拼接得到"c" + "b" = "cb"，返回给第一层
7. 第一层拿到返回值，拼接得到"cb" + "a" = "cba"，最终返回反转后的结果

调换顺序后的写法：return word.charAt(0) + reversed(word.substring(1)) #

1. 第一层调用reversed("abc")，先取当前字符"a"，等待reversed("bc")返回后拼接
2. 第二层调用reversed("bc")，先取当前字符"b"，等待reversed("c")返回后拼接
3. 第三层调用reversed("c")，先取当前字符"c"，等待reversed("")返回后拼接
4. 第四层调用reversed("")触发终止条件，返回空字符串""
5. 第三层拿到返回值，拼接得到"c" + "" = "c"，返回给第二层
6. 第二层拿到返回值，拼接得到"b" + "c" = "bc"，返回给第一层
7. 第一层拿到返回值，拼接得到"a" + "bc" = "abc"，最终返回原字符串

2. 递归调用的内存工作原理 #

字符的存储位置 #

每次调用reversed函数时，JS引擎都会在**调用栈（Call Stack）**中创建一个独立的执行上下文，当前函数的入参word、word.charAt(0)拿到的临时字符、返回值都会存在这个上下文的内存空间里。普通函数的执行逻辑完全相同，只要是函数调用都会生成对应的执行上下文压入调用栈。

字符累加规则与流向 #

字符的拼接发生在函数返回阶段，遵循调用栈「后进先出」的规则：

1. 最内层（最后压入栈）的函数先执行完毕，拿到返回值后弹出栈，返回值传递给上一层调用的函数
2. 上一层函数用当前层的临时字符和下层返回的字符串拼接，生成新的字符串作为当前层的返回值，继续向上传递
3. 直到最外层（最先压入栈）的函数执行完毕，最终拼接完成的字符串就是整个递归调用的返回值
4. 所有调用栈中临时存储的参数、字符，在对应执行上下文弹出栈后，如果没有其他变量引用，会被JS垃圾回收机制自动清理释放内存。

内容的提问来源于stack exchange，提问作者Ohad David