首页 > 建站教程 > JS、jQ、TS >  js函数执行调用内存过程分析(转)正文

js函数执行调用内存过程分析(转)

函数(方法)——如何理解
如何理解函数这个概念,给大家举个通俗的示例:

拉灯同志给特工小组下达命令:去炸XXX,特工小组返回结果
程序员调用方法:给方法必要的输入,方法返回结果

函数和方法的不同:
函数是大家的函数,方法是类的方法。
对象是对客观事物的抽象,类是对对象的抽象。类是一种抽象的数据类型,其定义为:class 类名{}它们的关系是,对象是类的实例,类是对象的模板

函数——在内存中执行


函数——调用过程
为了让大家更好的理解函数调用过程,给大家画一个示意图,这里可以简单介绍一下递归。

递归,下面的js代码会输出什么
function abc(num1){
    if(num1 > 3){
        abc(--num1);
    }
    document.writeln(num1);
}
abc(5);
先复习下:++和--
b=++a;先自加,然后再赋值;
b=a++;先赋值,然后再自加;

当开始执行abc(5);

js函数的调用过程,内存分析:

js引擎也有堆栈概念,也有代码区。

分析图:


★★★★★具体分析:★★★★★

步骤1、在主栈区,存放着程序代码,当执行到函数abc(5);的时候,一旦执行函数abc(5);,就开辟了新栈:新栈(1)

步骤2、在新栈(1),函数abc(5);给num1传了一个值,即num1=5;①,然后执行②if(num1)>3成立,接着执行 ③abc(--num1);,--num1,则先自减再赋值,原先num1=5,现在num1=4,因为执行函数③abc(--num1);,又开辟了新 栈:新栈(2)

注:函数调用规范,开辟新栈,是操作系统定的,不要太纠结细节,知道一旦执行函数,就要开辟新栈即可。

步骤3、在新栈(2),num1传值4,即num1=4;⑤,然后执行⑥if(num1)>3成立,接着执行 ⑦abc(--num1);,--num1,则先自减再赋值,原先num1=4,现在num1=3,因为执行函数⑦abc(--num1);,又开辟了新 栈:新栈(3)

步骤4、在新栈(3),num1传值3,即num1=3;⑨,然后执行①〇if(num1)>3,不成立,跳出if语句,然后执行 ①②document.writeln(num1);,打印输出当前的num1的值,3。document.writeln(num1);执行完毕后,这 个栈:新栈(3)就被销毁了被系统回收了。没的去了,只能原路返回,退回到新栈(2)

步骤5、在新栈(2),函数⑦abc(--num1);已经被执行完毕,然后执行⑧document.writeln(num1);此时的 num1,因为--num1,这num1的值为3了(虽然新栈(2)刚开始的时候num1的值为4,但是经过了--num1,别搞乱了),所以输出3。 document.writeln(num1);执行完毕后,这个栈:新栈(2)就被销毁了被系统回收了。没的去了,只能原路返回,退回到新栈(1)

步骤6、、在新栈(1),函数③abc(--num1);已经被执行完毕,然后执行④document.writeln(num1);此时的num1,因 为--num1,这num1的值为4了(虽然新栈(1)刚开始的时候num1的值为5,但是经过了--num1,别搞乱了),所以输出4。 document.writeln(num1);执行完毕后,这个栈:新栈(2)就被销毁了被系统回收了。没的去了,只能原路返回,退回到主栈。
至此:函数abc(5);就执行完毕,然后系统接着执行abc(5);下面的代码……

程序依次打印输出:3 3 4。上面的分析,虽然啰嗦,但是尽可能的讲明白了。自己画图走一遍,就理解的更深了。对执行函数时,就要开辟新栈,新栈执行完毕后,就要被销毁,然后退回。