上一章：JS的数据类型 传送门：https://segmentfault.com/a/11...

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

我们前端的代码一般就三个部分组成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提到顶部。所以如果不行代码，代码块里即使有错误也不会报出来，只有执行时才会运行代码内部东西。

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

<!DOCTYPE html>

<html>

<head>

    <title>3543541</title>

</head>

<body>

<script type="text/javascript">

    fn2();//undefined

    fn();//undefined

    function fn(){

        console.log(g);

    }

    fn();//undefined

    console.log(g);//undefined

    var g = 'global';

    console.log(g);//global

    fn2()//global

    function fn2(){

        console.log(g);

    }

    fn2()//global

    fn();//global

</script>

</body>

</html>

为什么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.函数执行时，按照执行位置查找变量作用域只会向上查找。

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

原型模式故事链(4)--JS执行上下文、变量提升、函数声明的更多相关文章

  1. 原型模式故事链(5)--JS变量作用域、作用域链、闭包

    上一章 JS执行上下文.变量提升.函数声明 传送门:https://segmentfault.com/a/11... 本次我们主要讲讲变量作用域和闭包变量作用域:顾名思义:变量起作用的范围.变量分为全 ...

  2. 原型模式故事链(3)--JS的数据类型、以及区别、区分、转化

    上一章--原型链讲解:传送门:https://segmentfault.com/a/11... 在上一章讲解原型链时提到了:所有的引用类型都有一个_proto_属性,称之为隐式原型.那么引用类型是什么 ...

  3. 执行上下文--变量、函数、this

    原文地址:https://www.xingkongbj.com/blog/js/execution-context.html JavaScript 中的执行上下文和调用栈 ES6 变量作用域与提升:变 ...

  4. 前端知识体系：JavaScript基础-原型和原型链-理解JavaScript的执行上下文栈，可以应用堆栈信息快速定位问题

    理解JavaScript的执行上下文栈,可以应用堆栈信息快速定位问题(原文文档) 1.什么是执行上下文: 简而言之,执行上下文就是当前JavaScript代码被解析和执行时所在环境的抽象概念,Java ...

  5. 1--面试总结-js深入理解，对象，原型链，构造函数，执行上下文堆栈，执行上下文，变量对象，活动对象，作用域链，闭包，This

    参考一手资料:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/中文翻译版本:https://zhuanlan.zhihu.com/p ...

  6. js执行上下文栈和变量对象

    JavaScript执行上下文栈和变量对象 JS是单线程的语言,执行顺序肯定是顺序执行,但是JS 引擎并不是一行一行地分析和执行程序,而是一段一段地分析执行,会先进行编译阶段然后才是执行阶段. 例子一 ...

  7. 一篇文章看懂JS执行上下文

     壹 ❀ 引 我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.lo ...

  8. js执行上下文与执行上下文栈

    一.什么是执行上下文 简单说就是代码运行时的执行环境,必须是在函数调用的时候才会产生,如果不调用就不会产生这个执行上下文.在这个环境中,所有变量会被事先提出来(变量提升),有的直接赋值,有的为默认值 ...

  9. js执行上下文（由浅入深）

    每一个函数都有自己的执行上下文EC(执行环境 execution context),并且每个执行上下文中都有它自己的变量对象VO(Variable object),用于存储执行上下文中的变量 .函数声 ...

随机推荐

  1. 闭包、装饰器decorator、迭代器与生成器、面向过程编程、三元表达式、列表解析与生成器表达式

    一.装饰器 一.装饰器的知识储备 不想修改函数的调用方式,但是还想在原来的函数前后添加功能 1.可变长参数  :*args和**kwargs def index(name,age): print(na ...

  2. 常见SMT极性元器件识别方法

    极性元件在整个PCBA加工过程中需要特别注意,因为方向性的元件错误会导致批量性事故和整块PCBA板的失效,因此工程及生产人员了解SMT极性元件极为重要. 1.片式电阻(Resistor)无极性 2.电 ...

  3. ELK-全文检索技术-kibana操作elasticsearch

    前言:建议kibana语法一定要学好! 1       软件安装 1.1     ES的安装 第一步:解压压缩包,放到一个没有中文没有空格的位置 第二步:修改配置文件 1.  jvm.options ...

  4. RedHat7安装yum工具

    一                   RedHat7安装yum工具 1.1        查看yum是否可用 yum list yum repolist 1.2        卸载原yum rpm ...

  5. PAT Basic 1067 试密码 (20 分)

    当你试图登录某个系统却忘了密码时,系统一般只会允许你尝试有限多次,当超出允许次数时,账号就会被锁死.本题就请你实现这个小功能. 输入格式: 输入在第一行给出一个密码(长度不超过 20 的.不包含空格. ...

  6. jmeter之Ramp-up Period（in seconds）

    [1]决定多长时间启动所有线程.如果使用10个线程,ramp-up period是100秒,那么JMeter用100秒使所有10个线程启动并运行.每个线程会在上一个线程启动后10秒(100/10)启动 ...

  7. json格式字符串转字典

    //json格式字符串转字典+ (NSDictionary *)dictionaryWithJsonString:(NSString *)jsonString {        if (jsonStr ...

  8. git初始化命令行指引

    Git 全局设置 git config --global user.name "陈耿聪" git config --global user.email "swain@di ...

  9. Mybatis的体系结构（转载）

    原文:http://blog.csdn.net/hupanfeng/article/details/9068003/ MyBatis的前身叫iBatis,本是apache的一个开源项目, 2010年这 ...

  10. 美国的电信巨头T-Mobile今天披露了另一起数据遭黑客泄露事件

    您是T-Mobile预付费客户吗?如果是,您应该立即创建或更新您关联的帐户PIN /密码,以提供额外的保护.总部位于美国的电信巨头T-Mobile今天披露了另一起数据泄露事件,该事件最近暴露了一些使用 ...