上一章：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. opencv滤镜-使用opencv实现各种图像滤镜特效

    图像处理-滤镜 链接:https://mangoroom.cn/opencv/image-processing-filter.html opencv滤镜-实现晕影vignetting效果 链接:htt ...

  2. win10+vs2013+pcl1.8.0(x86) 环境配置遇到的各种小问题解决

    1.PCL提供了各自的PDB调试文件(解压后放入pcl安装目录的bin下) 2.OpenNI的安装需同其余在pcl第三方库文件夹下 3.添加附加依赖项的.lib文件请按照网上对应版本添加,另外需要每行 ...

  3. Forsaken给学生分组

    链接:https://ac.nowcoder.com/acm/contest/1221/C来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5242 ...

  4. ExpressionToSQL

    ExpressionToSql using System; using System.Collections.Generic; using System.Collections.ObjectModel ...

  5. springboot中model，modelandview，modelmap的区别与联系

    springboot 中Model,ModelAndView,ModelMap的区别与联系 Model是一个接口,它的实现类为ExtendedModelMap,继承ModelMap类 public c ...

  6. java复习(3)继承下

    一.抽象类 ------------------------------------- 1.抽象定义概述:抽象类时从多个事物中奖共性的,本质的内容抽取出来 例如:狼和狗共性都是犬科,犬科就是抽象出来的 ...

  7. 剑指offer-7：调整数组顺序使奇数位于偶数前面

    一.相对位置可以改变 1.题目 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分. 2.分析 不考虑相对位置,可以类比快排,用左右 ...

  8. 7.利用canvas和js画一个渐变的

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. issue - 登录前的信息和标识文件

    DESCRIPTION (描述) /etc/issue 是一个文本文件,它包含了在登录提示符出现之前显示的信息或者系统标识.如果 getty(1) 支持的话,它可能包括多个 @char 和 \char ...

  10. 苹果预热 WWDC 2019

    Erika Hairston 是一位来自旧金山的 23 岁耶鲁大学毕业生,她的首款 app Zimela 刚刚上线.这款应用主要为了宣传科技行业的多样性.Hairston 设计的 Zimela 通过建 ...