JS中关于堆栈，作用域，声明提升的介绍

//写在前面的话

//web页面是在浏览器端运行，浏览器又分为两大引擎，HTML引擎和JS引擎，HTML引擎用来解析和渲染html和css，

//js引擎用来解析js代码。当js代码载入页面时，js中的变量和函数等都会进入内存当中，并且存在声明的提升。

//其中基本类型的值会在栈区中保存，引用类型会在堆区中保存。而js中的变量或者函数根据所处的作用域不同，又分为全局变量和局部变量。

//全局变量会在页面关闭时，从内存中销毁，而局部变量会在函数执行完毕后，从内存中销毁。

//很多前端开发人员涉及到堆栈，作用域，及声明提升方面的取值问题一直比较模糊，下面就通过具体的代码，帮助大家整理一下思路：

//其实，声明提升虽和常规思维不同，但比较容易掌握，其实只是js引擎内部的一个运行机制而已

//js引擎在解析js时分为两个过程，预编译和执行。预编译时，会将当前环境中的所有声明提升到环境的顶部，全局变量会提升到全局环境的顶部，

//局部变量会提升到函数内的顶部。而代码执行，如赋值，运算等等，在原来的代码所处位置进行

console.log(a);//undefined

var a = 10;

console.log(a);//10

console.log(a);//error a未定义

function foo(){

console.log(a);//undefined

var a = 10;

}

//下面来看一下全局变量和局部变量的情况

var a = 10;

var b = 20;

function foo(){

console.log(a,b);//访问的是全局变量

}

foo();

var a = 10;

var b = 20;

function foo(){

console.log(a,b);//这里的a，b和实参a,b无关，因为没有形参

}

foo(a,b);

var a = 10;

var b = 20;

function foo(x,y){

console.log(a,b);//在函数内没有用到x,y

}

foo(a,b);//实参a,b传给了x,y*/

var a = 10;

var b = 20;

function foo(x,y){

console.log(a,b);//访问全局变量a，b

}

foo();//10，20

var a = 10;

var b = 20;

function foo(a,b){

//形参是局部变量，按照变量的取值顺序（局部变量>形参>全局变量 及 就近原则）

console.log(a,b);//取形参a，b值,

}

foo();//undefined undefined

var a = 10;

var b = 20;

function foo(a,b){

//形参是局部变量，按照变量的取值顺序（局部变量>形参>全局变量 及 就近原则）

//a,b形参

var a = 20;//局部变量a

console.log(a,b);//20,undefined

}

foo(a,b);

var a = 10;

var b = 20;

function foo(){

console.log(a);

var a = 30;

}

foo();//undefined 有局部变量a的存在 不考虑全局变量

var a = 10;

function foo(){

a = 20;//全局变量

}

foo();

console.log(a);//20 在函数内部发生改变

var a = 10;

function foo(){

var a = 20; //在函数调用完成销毁

}

foo();

console.log(a);//10

//下面看下堆栈及参数传递

var a = 10;// a为基本类型，存在栈区

var b = a;

a = 20;

console.log(b);//10

var a1 = [10];//a1为引用类型

var b1 = a1;//将a1的地址给到了b1

a1.push(20);//a1和b1指向了内存中堆区的同一位置

console.log(a1,b1);//[10,20] [10,20]

var a = [10];

function foo(b){

b.push(20);

b = [];//b的地址发生了改变，已经和a不是一个地址

b.push(30);

console.log(b);//[30]

}

foo(a);//传的地址

console.log(a);//[10,20]