一、作用域:
1.变量的作用域
作用域是变量的可作用范围,变量只有在自己的作用域下才会生效。
函数会产生作用域,在函数内定义的变量只能在函数内使用。
1.2 作用域分类
局部作用域: 函数内定义的变量和形参的作用域就是局部作用域;这样的变量称之为局部变量。
全局作用域: 在函数外面定义的变量的作用域是全局作用域;这样的变量称之为全局变量。
块级作用域: 在代码块中定义的变量的作用域是块级作用域;这样的变量称之为块级变量。 ES6才支持
局部变量 只能在定义变量的函数内使用; 全局变量 在任意地方都可以使用。
注意:
函数内的形参也是局部变量,作用域范围就是所在函数。
了解:
函数内不使用关键字 var 声明的变量会被当做全局变量,但不建议这么做,在严格模式下,不使用关键字 var 就声明变量,会报错!
a、b 都是在全局下定义的,所以他们的作用域就是全局,n是在fn中定义的,它的作用域就是fn;
var a=3;
var b=6;
function fn(){
var n=3;
console.log(n)
};
console.log(a,b);
在全局下定义的变量,在哪都可以访问到,在私有作用域中定义的变量,在外面是访问不到的
var a=3;
function fn(){
var b=6;
console.log(a);
}
fn();
console.log(b);
作用:隔离变量,不同作用域下同名变量不会有冲突
var a = 10,
b = 20;
function fn(x) {
var a = 100,
c = 300;
console.log('fn()', a, b, c, x)
function bar(x) {
var a = 1000,
d = 400
console.log('bar()', a, b, c, d, x)
}
bar(100)
bar(200)
}
fn(10)
全局变量和私有变量
- 全局变量:在全局作用域中定义的变量就是全局变量
- 私有变量:
-
- 形参
- 在函数私有作用域中定义的变量
1.3 作用域链
① 什么是作用域链
1) 函数会限制变量的作用域范围,而函数内是可以再嵌套函数的,函数的层层嵌套,就形成了一个作用域链。
2)作用域链描述的是程序在执行过程当中寻找变量的过程。
② 作用域链寻找变量的过程
当函数内使用某个变量的时候,会按照如下过程找到该变量:
1) 先从自身所在作用域去查找,如果没有再从上级作用域当中去查找,直到找到全局作用域当中。
2)如果其中有找到,就不会再往上查找,直接使用。
3)如果都没有找到,那么就会报引用错误提示变量没有定义。
③ 注意:
一个变量的作用域只与函数声明的位置有关,与函数调用的位置无关!
function fn(){
console.log(n);// 自己私有作用域没有这个变量,向上级进行查找,上级window 也没有,就报错
}
fn();
function fn(){
n=3; // 自己私有作用域中没有,向上级进行查找,上级作用域也没有,就相当于给window.n=3;
}
fn();
console.log(n);
function fn(){
n=3; // 自己私有作用域中没有,向上级进行查找,上级作用域中有,就是上级作用域的n的值重新改了3
}
var n=2;
fn();
console.log(n);
function fn(){
console.log(n);// 2
}
var n=2;
fn();
console.log(n);
二、浏览器底层运行机制
var x=12;
let y=13;
z=14;
console.log(window.x);
console.log(window.y);
console.log(window.z);
console.log(x);
console.log(y);
console.log(z);
- ECStack(Execution context Stack) 执行环境栈(栈内存,从内存中分配出来的一块内存)
- EC(Execution Context)执行上下文(在编程语言中,代码执行,为了区分全局作用域和函数执行所处不同的作用域,目的是为了区分每个词法作用域下代码的独立性)EC 就是代码执行所处的范围
-
- EC(g):全局执行上下文
- EC(function):函数执行的上下文
- VO 和AO:在每一个执行上下文中,代码执行的时候,都会存贮一些变量:
-
- 全局上下文中的变量存储在VO
- 私有上下文中的变量存储在AO
- GO:浏览器把一些内置的属性和方法放到了GO中,并且在全局执行上下文(EC(g))中创建了一个window变量对象,并且让其指向GO
三、变量提升
1、什么是变量提升?
当浏览器开辟出供js执行的栈内存之后,代码并不是立即自上而下执行,而是需要先做一些事情:把当前作用域中带var 和function 的关键字进行提前的声明和定义,这叫做变量提升机制。
var 和function 在变量提升阶段区别:
- var 在变量提升阶段,是只声明,未定义(不赋值)
- function 在此阶段是声明和定义都完成。
var a=2;
var b=a;
b=3;
console.log(b)
虽然函数还没有声明定义,但是调用也不受影响
2、变量提升(条件判断)
①不论判断条件是否成立,都会进行变量提升
在当前作用域下,不管判断条件是否成功,都会进行变量提升:
var :还是只声明
function:
- 新版本浏览器中的function 只是声明,不定义
- 在老版本中还是声明和定义(仅限判断语句)
console.log(a);
if(1=="1"){
console.log(a);
var a=2;
console.log(a);
}
console.log(a);
undefined undefined 2 2
console.log(a);
if(1=="2"){
console.log(a);
var a=2;
console.log(a);
}
console.log(a);
undefined undefined
console.log(fn);
if(1=="2"){
console.log(fn);
function fn(){};
console.log(fn);
}
console.log(fn);
undefined undefined
console.log(fn);
if(1=="1"){
console.log(fn);
function fn(){};
fn=3;
console.log(fn);
}
console.log(fn);
undefined 函数 3 函数
函数是个渣男,以函数为分界线,函数以上的内容会给全局一份
console.log(a);
if("a" in window){
var a=100;
}
console.log(a);
undefined 100
f=function(){
return true;
};
g=function(){
return false;
};
~function(){
if(g()&&[]==![]){
f=function(){return false;};
function g(){
return true;
}
}
}();
console.log(f());
console.log(g());
报错
console.log(fn);
if(1==1){
console.log(fn);
function fn(){
console.log("ok");
}
}
console.log(fn)
undefined 函数 函数
var a=0;
if(true){
a=1;
function a(){}
a=21;
console.log(a);
}
console.log(a);
21 1
console.log(num);
console.log(fn);
if([]){
// 只要进到当前if条件中,会立即对fn进行赋值;
fn()
var num=100;
function fn(){console.log("a")}
}
console.log(fn);
undefined undefined a 函数
②只对等号左边的做变量提升
console.log(fn);
console.log(fn(1,2));
var fn=function (n,m){
return n+m;
}
console.log(fn(3,4));
sum();
fn();
var fn=function(){
console.log(1);
};
function sum(){
console.log(2);
}
fn();
sum();
console.log(obj.f1);
var obj={
f1:function(){
console.log(1)
}
}
③return 下面的代码进行变量提升,return 后面的代码不进行变量提升
function fn(){
console.log(a);
return function f1(){
}
var a=3;
}
fn();
function fn(){
console.log(f2);
return function f1(){
}
function f2(){
console.log("f2")
}
}
fn();
④如果变量名字重复
对于var的不会进行重复声明,但是会重新赋值
在变量提升阶段,看到第一行var num ,会声明一个变量num,此时看到第二行还有一个就不用再声明了
var num=2;
var num=3;
console.log(num);
对于function的在变量提升阶段是声明和定义一起完成的,如果遇到重复声明定义的,会进行重新赋值
console.log(fn)
function fn(){
console.log(1);
}
function fn(){
console.log(2);
}
function fn(){
console.log(3);
}
console.log(fn)
function fn(){
console.log(1)
}
var fn=2;
console.log(fn)
console.log(num);
var num = 1;
console.log(num);
var num = 2;
console.log(num);
fn();// 4
function fn(){
console.log(1);
}
function fn(){
console.log(2);
}
fn();// 4
function fn(){
console.log(3);
}
fn=100;
function fn(){
console.log(4);
}
fn();
⑤自执行函数在当前所在的作用域中不进行变量提升
自执行函数自己所形成的私有作用域照常进行
function f2(){
console.log("f2");
}
// 自执行函数在此处不进行变量提升
(function (){
console.log(a);// undefined, 照常进行变量提升
var a=3;
})();