博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
原型模式故事链(4)--JS执行上下文、变量提升、函数声明
阅读量:6623 次
发布时间:2019-06-25

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

上一章:JS的数据类型 传送门:

好!话不多少,我们就开始吧。对变量提升和函数声明的理解,能让你更清楚容易的理解,为什么你的程序报错了~哈哈哈

我们前端的代码一般就三个部分组成html + css +js,一般呢我们的JS又会放在最后执行。

执行上下文:

所谓的执行上下文,就是JS代码执行的环境。

Javascript中代码的运行环境分为以下三种:

全局上下文 - 这个是默认的代码运行环境,一旦代码被载入,引擎最先进入的就是这个环境。

函数上下文 - 当执行一个函数时,运行函数体中的代码。

Eval上下文 - 在Eval函数内运行的代码。

这个和作用域有点像。

每次调用一个函数将会创建一个新的执行上下文会,被添加到作用域链的顶部。
作用域和执行上下文之间最大的区别是: 执行上下文在运行时确定,随时可能改变;作用域在定义时确定,永远不会改变。

其实上面那些看看就好,直接看代码吧。

JS代码在执行之前会先全局中变量提升、函数声明。在函数中变量提升、函数声明(this、函数参数也会提升,函数中的变量提升的范围是这个函数的内部)

变量提升:变量赋值的过程:声明---初始化---赋值

举例子:函数内部的变量提升(全局的变量提升也是同理)

function fn(){        console.log(x);//undefined        var x = 1;        console.log(x);//1    }    fn();

这里我们从针对变量x来解说:

1.在执行fn时,为fn创建一个执行环境。(fn函数的执行上下文,也就是在fn这个函数范围内)
2.找到fn函数执行上下文中(fn函数范围内),所有用var声明的变量。
3.将这些变量初始化为undefined。
4.开始执行代码。
5.把1赋值给变量x。

相当于如下这样:

function fn(){        //把用var声明的变量,提升到顶部,并初始化为undefined        var x =undefined;                //开始执行代码。        console.log(x);//undefined        //把1赋值给变量x。        var x = 1;        console.log(x);//1    }    fn();

函数声明:

cat();//123    function cat(){        console.log(123);    }    cat();//123

1.找到所有用function声明的变量,并在环境中创建这些变量。

2.将这些变量初始化并赋值为function(){xxx}
3.在环境中从上往下开始执行代码。

相当于如下这样:

//1.找到所有用function声明的变量,并在环境中创建这些变量。    //2.将这些变量初始化并赋值为function(){xxx}    var cat = function (){        console.log(123);    }    //3.在环境中从上往下开始执行代码。    cat();//123    cat();//123

这个就是函数声明,在代码执行前,会把function提到顶部。所以如果不行代码,代码块里即使有错误也不会报出来,只有执行时才会运行代码内部东西。

看到这里应该有个初步了解了,那么来看看下面的。加点难度,加深了解。

    3543541

为什么fn中的globle拿不到呢?而fn2的globle能拿到值呢?

运用上面学习的知识来分析一波。
上面代码在执行前,会经过变量提升、函数声明,所以在准备执行前的代码是这样的:

//函数声明会在最最顶端    var fn = function (){        console.log(g);    }    var fn2 = function (){        console.log(g);    }    //执行函数和变量按照相对位置排列    //执行的相对位置不能变,这3个是在变量g之前执行的就要一直在g之前执行    fn2();    fn();    fn();    var g = undefined;    console.log(g);//undefined    var g = 'global';    console.log(g);//global    //执行的相对位置不能变,这3个是在变量g之后执行的就要一直在g之后执行    fn2();    fn2();    fn();

这里我们可以总结出一点规律:

1.函数声明会在最最顶端
2.变量提升,只是在自己的范围内提升
3.执行的相对位置不能变和变量按照执行上下文之前的相对位置排列。
4.函数执行时,按照执行位置查找变量作用域只会向上查找。

下一回:变量作用域与闭包

转载地址:http://aajpo.baihongyu.com/

你可能感兴趣的文章
matlab下列变量中合法的是,matlab基础练习题(带答案)
查看>>
Linux的镜像服务器,制作Linux镜像源Mirror方法
查看>>
linux 更改 用户 目录权限命令行,Linux命令:改变文件或目录的访问权限
查看>>
linux 命令查询内存,linux查询内存命令
查看>>
linux tty无法输入密码,Linux系统tty无法正常显示汉字的两种解决方案
查看>>
linux连接小米随身wifi密码忘记了,小米wifi管理员密码忘记了怎么办?
查看>>
linux系统防火墙关闭22端口,Linux系统防火墙关闭及端口开放
查看>>
linux挂载nfts分区,linux挂载NTFS分区
查看>>
linux popen获取ip地址,使用popen函数读取命令输出失败
查看>>
跟马哥快速学linux,学习Linux,如快速入门?
查看>>
python 编辑html文件内容,使用Python解析和编辑HTML文件
查看>>
切换 ip 批处理
查看>>
CommandArgument 绑定多个参数
查看>>
dropdownlist可以多选。类似的例子。。。
查看>>
Objective-C 内存管理
查看>>
DEV GridControl绑定的数据,ID相同的行显示相同的颜色(当ID的值不确定时)
查看>>
Linux下rz,sz与ssh的配合使用
查看>>
pku 1054 The Troublesome Frog 暴力+剪枝
查看>>
iOS 文件操作:沙盒(SandBox)、文件操作(FileManager)、程序包(NSBundle)
查看>>
利用Python攻破12306的最后一道防线
查看>>