上一章：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. tp5后台同步更新配置文件

    thinkphp5 配置文件路径:app/extra/web.php public function add(){ $path = 'app/extra/web.php'; $file = inclu ...

  2. $().click()和$(document).on('click','要选择的元素',function(){})的不同（转https://www.cnblogs.com/sqh17/p/7746418.html）

    $(document).on();用于动态绑定事件 jQuery的出现,大大简化了对dom的操作,但是如果不是仔细阅读api和进行操作,就不知道其中最大的优点和使用方式.就拿$().click()和$ ...

  3. liunx 环境下安装 Eclipse C++

    第一步:首先安装JDK 进入JDK官网:https://www.oracle.com/technetwork/java/javase/downloads/index.html  下载对应的jdk 注意 ...

  4. lua基础（2）

    错误处理: local function add(a,b) assert(type(a) == "number", "a 不是一个数字") assert(typ ...

  5. AIX中的页空间管理

    1.页空间简介(Paging  Space) 页空间是指硬盘上的存储内存信息的区域. 一个页空间也叫做一个交换空间. 是系统中一个类型为paging的逻辑卷.       2.创建页空间 使用mkps ...

  6. PAT Basic 1042 字符统计 (20 分)

    请编写程序,找出一段给定文字中出现最频繁的那个英文字母. 输入格式: 输入在一行中给出一个长度不超过 1000 的字符串.字符串由 ASCII 码表中任意可见字符及空格组成,至少包含 1 个英文字母, ...

  7. Spring学习之设计模式，动态代理和gclib动态代理

    传统的代理模式是静态代理,也就是在方法区域中写入方法. 而动态代理的作用是,不修改实现类的代码,能够在代码的前后或者抛出异常的前后执行某个方法. 动态代理类的实现 //Interface public ...

  8. Heshen's Account Book HihoCoder - 1871 2018北京区域赛B题（字符串处理）

    Heshen was an official of the Qing dynasty. He made a fortune which could be comparable to a whole c ...

  9. 修改vue-cli脚手架顶部图标

    1. 将ico图标放到static目录下 2. 在 build/webpack.dev.conf.js 文件修改   new HtmlWebpackPlugin({ ... favicon: './s ...

  10. LOJ-6277-数列分块入门1(分块)

    链接: https://loj.ac/problem/6277 题意: 给出一个长为 的数列,以及 个操作,操作涉及区间加法,单点查值. 思路: 线段树可以解决,用来学习分块. 分块概念就是,将序列分 ...