说说你对js作用域的理解 相关题

说说你对js作用域的理解
什么是作用域:
用法: 一个变量的可用范围
本质: 保存多个变量的内存空间
为什么: 为了保护不同范围的变量间不互相干扰

1. 全局作用域: window对象
   凡是不在函数内创建的变量和函数都自动加载全局作用域(window)中保存
2. 函数作用域
   函数作用域仅在调用函数时临时创建
   所有函数内定义的变量和内层函数，都自动保存在临时的函数作用域中
   一旦函数调用后，临时的函数作用域及其内部的局部变量一起释放！
   作用域链: scope chain
   什么是: 由多级作用域组成的链式内存结构
   原理:
   每个函数都有一个隐藏的属性scopes
   不调用函数时scopes只包含window的引用，指向全局作用域。
   调用函数时，创建临时作用域对象，并将临时函数作用域对象的引用地址添加到scopes中，window之前。
   调用时优先使用临时函数作用域中的变量，如果函数作用域中没有，才去全局window中找。如果都找不到，才会报错。
   调用后: 函数作用域会被释放，函数作用域中的局部变量也就释放！

作用域和变量

var a="apple";  //全局变量 
function fun(){
   var a='agee'  //局部变量
};
console.log(a);  //apple
//作用域就是限制某个变量只能在某个区域内有效
//全局作用域
//局部作用域
1
2
3
4
5
6
7
8

块级作用域 （下面的代码 var 改成 let 就可以了，在es6中用let有了块级作用域）

var a="apple";
if(true){
  var a="ii"
}
console.log(a);  //li

for(var i=0;i<3;i++){
  break;
}
console.log(i);  //0
//var 变量提升了  终止循环了
//所以是0

k=5;
while(k>1){
   k--;
   var d=10;
}

console.log(k);  1
console.log(d);  10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

作用域链

var a='apple';
var b='boy';
function fun(){
   var a="age";
   console.log(a);
   console.log(b);
}
fun();  //age boy
console.log(a); //apple
//先看函数内有没有，再去找外围的
//从里到外找
1
2
3
4
5
6
7
8
9
10
11

var a='apple';
function fun(){
   console.log(a);
   var a="age";   局部变量
   console.log(a);
}
fun();  //undefinde   age

js会把代码变成这样
var a="apple";
function fun(){
   var a;
   console.log(a);
   a="age";   局部变量
   console.log(a);
}
fun();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

函数提升，函数的提升会比变量更优先
var a='apple';
function fun(){
   console.log(a);
   var a="age";   局部变量
   console.log(ss());
   function ss(){
      return a;
   }
}
fun();
js会把代码变成这样
var a='apple';
funciton fun(){
   function ss(){return a};
   var a;
   console.log(a);  //undefined
   a="age";
   console.log(ss());  //age
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//函数的声明提前
//在程序开始执行前，会自动将所有var声明的变量和所有function声明的函数
//都提前到当前作用域的顶部，集中创建，赋值留在原地
//先是function fun(){console.log(1);}
//然后function fun(){console.log(2);}
//第二个替换第一个

function fun(){
   console.log(1);
}
fun();  //2
function fun(){
   console.log(2);
}
fun();  //2
var fun=100;
fun();  //报错  fun is not a function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1