JavaScript函数的存储机制(堆)和执行原理(栈)

JavaScript函数

为什么JavaScript中要设计函数的概念？

function add(a,b){
    return a + b;
}
add(1,2);
add(2,2);

函数的基本概念

函数的定义

1. 函数式声明

function add(a,b){	// a 和 b 都是 add 函数的形参
	return a + b;	// return 的值就是函数的执行结果，没有 return 时函数的执行结果为 undefined
}

2. 函数表达式

var add = function(a,b){
    return a + b;
}

3. 函数生成器声明

function * add(a,b){
    yield a + b;
}

4. 箭头函数

add = (a,b) => {
    return a + b;
}

5. Function构造函数

add = new Function(a,b){
    return a + b;
}

函数的参数

• arguments对象

• 剩余运算符

add = (...args) => {	// ... 剩余运算符将参数收集到 args 中，并以数组的形式存储
    return args.reduce((total,item)=>{	// reduce 遍历数组，并接收一个函数作为累加器
        return total + item;
    })
}

函数的返回值

function add(a,b,c){
	return a + b;	// 函数执行到这一步时，会直接将 a+b 的结果返回，并立即结束当前函数的执行
	return b + c;	// 该语句不会被执行
}
add(1,1,1)

函数体中没有return的时候，会将函数体中的所有代码都执行一遍，并返回undefined

JS函数浏览器中的存储（堆）

JS函数的运行机制（栈）

JavaScript的运行环境

• 浏览器（不同厂家对应不同的引擎）
• node（V8引擎）
• webview（V8引擎）

JS代码的执行环境--ECStack

• ECStack(Execution Context Stack)

• EC(Execution Context)

• GO(Global Object)

• AO & VO (Active Object & Variable Object)

函数的创建和执行

创建函数

1. 开辟堆内存（16进制得到内存地址）
2. 声明当前函数的作用域（函数创建的上下文才是他的作用域，和在那执行的无关）
3. 把函数的代码以字符串的形式存储在堆内存中（函数再不执行的情况下，只是存储在堆内存中的字符串）
4. 将函数堆的地址，放在栈中供变量调用（函数名）

执行函数

1. 会形成一个全新的执行上下文EC(xx)（目的是供函数体中的代码执行），然后进栈（ECStack执行环境栈）执行
2. 在私有上下文中有一个存放变量的变量对象AO(xx)
3. 代码执行之前需要做的事
   • 初始化作用域链<自己的上下文，函数的作用域>
   • 初始化this（箭头函数没有this）
   • 初始化arguments实参集合（箭头函数没有arguments）
   • 形参赋值（形参变量是函数的私有变量，需要存储在AO中）
   • 变量提升（在私有上下文中声明的变量都是私有变量）
4. 代码执行（把之前在函数堆中存储的字符串拿过来在当前上下文中执行）
5. 根据实际情况判断当前上下文是否出栈释放

var x = [1,2]
function fn(y){
    y[0] = 100;
    y = [100];
    y[1] = 200;
    console.log(y);
}
fn(x);
console.log(x);