博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js深入(二)函数的执行与上下文
阅读量:5286 次
发布时间:2019-06-14

本文共 2571 字,大约阅读时间需要 8 分钟。

这一篇简单的说一说js的函数执行和js的执行上下文的概念,之前在我的博客里边也提到过

这一篇打算单独的拿出来说一说

是什么是js的执行上下文

一段可以执行的代码在被执行的时候,会创建一个函数的执行上下文

执行上下文里边有三个重要的属性分别是

  • 变量对象

  • 作用域链

  • this指向

执行上下文是跟函数相关的,执行上下文分为两个阶段

创建阶段

执行阶段
首先创建阶段

扫描变量和函数(确定变量环境)

确定this指向
确定词法环境
简单说一下词法环境和变量环境的区别,我个人理解的就是说词法环境是包含变量环境的

在js里边原型链大家都不陌生 ,js在当前的对象里边找不到所使用的属性的话会去他的上一级去找

直到Object,再找不到就会undefined ,这里边 当前对象的作用域就是他的变量环境,而词法环境则是与之关联的的执行上下文中声明的变量

在创建阶段 函数的声明会被储存在当前的变量环境之中,var的变量的话则会被设置成undefined

,所以我们在声明之前就可以访问到var声明的变量 ,but他是一个undfined

然后就是执行阶段了

这个时候已经完成了对所有变量的分配,开始执行代码

变量对象

什么是变量对象,变量对象就是与执行上下文相关得数据得一个作用域,这里边存储了在这个上下文里边定义的而变量和函数声明

函数声明的时候会在创建阶段的时候声明一个函数指针

全局上下文和函数上下文

全局上下文

故名思与函数上下文,在函数被执行的时候创建,那么全局上下文是什么时候被创建的呢,首先我们要知道一个概念就是,全局对象

  • 在一般的函数里边全局对象可以用this引用其属性,客户端的话是window对象

    console.log(this);

可以尝试着去打印一下this,如下图可以看到,window对象里边有很多我们常用或者常见的属性和方法

1606021-20190703132621162-1786735295.jpg

当然也有一些其他的情况this并不是指向的window对象,this指向 这个东西,我们会在下边说

  • 当然js 万物皆对象不只是说说

用 instanceof 输出一下this 会发现也是一个object

console.log(this instanceof Object);

所以说全局对象是一个object的实例化对象

所以说说白了全局上下文就是在一开始就被创建的,全局上下文是由在浏览器关闭或者刷新的时候才会销毁, 然后这个window对象其实就是全局上下文的变量对象

函数上下文

函数上下文和上边所说的意思差不多,但是,啊,但是,在函数上下文中的时候,函数里边的变量对象是活动对象,他的英文名字叫做 actiation object ,大面上看的意思就是说只有进入了这个执行上下文中的时候,也就是说执行到了这个函数的时候,其中的变量对象才会被激活,才会能被访问,在没有执行到这个函数的时候,其属性是不能访问的,这里是和全局上下文不同的。

函数执行过程

function foo(a) {  var b = 2;  function c() {}  var d = function() {};  b = 3;}foo(1);

首先看这段代码,上边也说了,函数执行有两个阶段创建阶段和执行阶段

首先进如执行上下文,进入创建阶段

  • 首先形参,也就是调用的方法的时候传进来的值,如果你传了就是有值得,如果没传就是一个undefined,相应得函数里边会有一个arguments对象,存放着形参得值,

  • 然后函数里边声明得变量,在创建阶段得时候是没有值得,会被赋值一个undefined。

  • 函数声明会由名称和对应值组成一个变量对象的属性被创建,也就是上边说的函数得指针,我是这么理解得,因为这个变量指向了这个函数,如果变量对象已经存在相同名称的属性,则完全替换这个属性

上边这段代码在创建阶段是这样得

{    arguments: {        0: 1,        length: 1    },    a: 1,    b: undefined,    c: reference to function c(){},    d: undefined}

然后函数的而执行阶段,这个时候就该干嘛干嘛了,函数里边声明的变量,赋值等等的会在这里根据代码,修改变量的值

{    arguments: {        0: 1,        length: 1    },    a: 1,    b: 3,    c: reference to function c(){},    d: reference to FunctionExpression "d"}

得出一个结论,函数的执行上下文里边在初始化的时候只包含一个arguments对象,其他的属性是没有值的,为了直观一点 ,举个例子

function foo() {    console.log(a);    a = 1;}foo(); function bar() {    a = 1;    console.log(a);}bar();

比如说这个在foo函数的上下文里边打印a, 但是foo 里边没有用var声明,下边的a就找不到所以会打印一个 a is not defined。

但是第二个的话会打印一个1,因为搭载因之前,全局对象里边已经有了a属性

最后就是,在上文提到

c: reference to function c(){},    d: reference to FunctionExpression "d"

在上下文创建的时候,变量是不会覆盖这种声明的,比如说

console.log(foo);function foo(){    console.log("foo");}var foo = 1;

会打印这个函数,但是, 啊,但是,如果是这样

function foo(){    console.log("foo");}var foo = 1;console.log(foo);

这样的话就变成了刚才所说的赋值了 ,会打印1

以上是我对js函数的执行与上下文的一些认识,有不足的希望指正

转载于:https://www.cnblogs.com/netUserAdd/p/11125861.html

你可能感兴趣的文章
response实现文件下载
查看>>
【WP7】页面之间数据交互
查看>>
C++中的unique函数
查看>>
小白学数据分析----->流失分析设计
查看>>
FontAwesome 奥森图标的学习
查看>>
request response cookie session
查看>>
NMON记录服务器各项性能数据
查看>>
未找到arm-linux-gcc解决办法
查看>>
统计Xcode项目代码行数
查看>>
认识 service worker
查看>>
第五次团队作业:项目展示
查看>>
C#面向对象(二):封装和继承
查看>>
range()函数
查看>>
少量标签下的模型
查看>>
HOJ-1005 Fast Food(动态规划)
查看>>
FasfDFS整合Java实现文件上传下载
查看>>
用Hadoop构建电影推荐系统
查看>>
[读码时间] 弹出层效果
查看>>
UVAL 4728 Squares(旋转卡壳)
查看>>
Ordered Fractions usaco
查看>>