作用域、作用域链、执行上下文、执行上下文栈

最新推荐文章于 2022-07-12 23:07:56 发布

不另外加糖

最新推荐文章于 2022-07-12 23:07:56 发布

阅读量199

点赞数

分类专栏： JS学习笔记

本文链接：https://blog.csdn.net/weixin_49343253/article/details/117626000

版权

JS学习笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一、作用域与作用域链

1.1 作用域

作用域是指函数或者变量可使用范围的区域，分为全局作用域、函数作用域和块作用域（ES6才有）。作用是隔离变量，让在不同作用域下的相同变量不会有冲突。

作用域规定了如何查找变量，当前执行代码块对变量的访问权限

它是静态的，在编写代码时就已经确定了。

1.2 作用域链

多个上下文变量对象组成的链表成为作用链，它的方向是从内到外的

查找变量就是通过这条作用域链来查找的

查找变量规则：

在当前上下文的变量对象中查找对应的属性，如果有，则直接返回，若没有进入下一步

在上一级上下文的变量对象中查找对应的属性，如果有，则直接返回，若没有进入下一步

直到查找到全局执行上下文，若还没有，则抛出错误

注意：沿作用域链查找对象属性找不到时，会抛出ReferenceError,作用域链是针对变量的，沿着原型链查找找不到时会返回undefined，原型链是针对原型对象查找属性的。

小栗子：

解决啦~

所有没有声明直接赋值的变量都是全局变量

var a = 100;
function fn(){
	a = 1000;        //a是全局变量，没有声明
	console.log('a1-',a);
}
console.log('a2-',a);
fn();
console.log('a3-',a);
// a2- 100 // 在当前作用域下查找变量a => 100
// a1- 1000 // 函数执行时，全局变量a已经被重新赋值
// a3- 1000 // 全局变量a => 1000

//---------------例子1
var fn = funnction(){            //var定义变量，变量提前声明
    console.log(fn)              //首先在自身作用域寻找fn，找不到，到全局作用域，有fn，输出
}
fn()                             //输出function(){ console.log(fn) }


//---------------例子2
var obj = {
    fn2: function(){
        console.log(fn2)                //当前作用域寻找，没找到，到上一级仍然没有，报错
        console.log(this.fn2)           //this指向obj,输出function(){ console.log(fn2) console.log(this.fn2) }                                       
    }
}
obj.fn2()


//----------------例子3
var x = 10
function fn(){
    console.log(x)
}
function show(f){
    var x = 20
    f()
}
show(fn)                           //输出10

二、执行上下文与执行上下文栈

2.1 执行上下文

在函数代码执行前都会创建一个执行上下文对象，一个上下文对象代表一个函数的执行环境。

在函数编写时，会添加一个[[scope]]属性，里面保存着该函数的作用域链，代码执行时会将创建的执行上下文对象添加到[[scope]]里作用域链的最顶端，这个对象里面保存了函数体内所有声明的变量、参数、方法。

分为全局执行上下文和局部执行上下文，都是在代码执行准备之前创建，注意是代码执行，不是编写，编写不代表执行，得调用才能执行。

2.1.1 全局执行上下文

a. 在执行全局代码之前，将window确定为全局执行上下文

b. 对全局数据进行预处理

将var定义的全局变量进行变量提升，但不赋值,为undefined,添加为window的属性

将用function定义的全局函数进行函数提升，并进行赋值，添加为window的方法

this指向window

c. 执行函数代码

console.log(a1,window.a1)      //undefined undefined
a2()                           //a2()
console.log(this)              //window

var a1 = 3                        //var定义全局变量，变量提升，但不赋值
function a2(){
   console.log('a2()')            //function定义函数，函数提升且赋值
}
console.log(a1)                //3

2.1.2 函数执行上下文

a. 在函数调用执行代码之前，确定相应的函数执行上下文对象（虚拟的，存在于栈之中）

b. 对局部数据进行预处理

将形参变量赋值，添加为执行上下文的属性

将arguments赋值，添加为执行上下的属性

将var定义的局部变量进行变量提升，但不赋值，为undefined，添加为执行上下文的属性

将function定义的函数进行函数提升，并赋值，添加为执行上下的方法

this赋值为调用函数的对象

c. 开始执行函数代码

function fn(a1){
    console.log(a1)                    //2
    console.log(a2)                    //undefined
    a3()                               //a3()
    console.log(this)                  //window，fn一般调用
    console.log(arguments)             //(2,3)伪数组

    var a2 = 3                        //变量提升但不赋值
    function a3(){                    //函数提升且赋值
        console.log('a3()')
    }
}
fn(2,3)            //函数必须调用，不然不会创建函数执行上下文