上一章：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. Quartz的job中注入的services接口为空的解决办法

    自己重新定义一个类继承AdaptableJobFactory类 public class JobFactory extends AdaptableJobFactory { @Autowired pri ...

  2. IDEA的快捷方式

    一,IDEA的快捷方式1,F8单步执行 2,F9运行调试 3,CTRL +鼠标左键=进入查看定义 4,CTRL+alt +鼠标左键=查看实现 5,Shift+F6重命名 6,alt +intsert= ...

  3. ivew组件上传图片文件的功能：

    解决的问题: 1.使用view的<Upload>组件实现图片文件的上传. 2.<Upload>组件action请求地址无法到自己写的后台. 3.前台base64的图片展示. 4 ...

  4. sql修改表名字段名

    修改字段: ALTER TABLE user_info CHANGE NAME name VARCHAR(10); 修改表名alter TABLE user_role RENAME user_info ...

  5. 校内题目T2695 桶哥的问题——吃桶

    同T2一样外校蒟蒻可能没看过: 题目描述: 题目背景 @桶哥 桶哥的桶没有送完. 题目描述 桶哥的桶没有送完,他还有n个桶.他决定把这些桶吃掉.他的每一个桶两个属性:种类aia_iai​和美味值bib ...

  6. 基于python的知乎开源爬虫 zhihu

    今天在无意之中发现了一个知乎的开源爬虫,是基于Python的,名字叫zhihu_oauth,看了一下在github上面star数还挺多的,貌似文档也挺详细的,于是就稍微研究了一下.发现果然很好用啊.就 ...

  7. webpack 热更新

    1.安装webpack npm install webpack -g  //全局安装 npm install webpack --save-dev  //开发环境 2.使用webpack 创建一个we ...

  8. 八、asynicio模块以及爬虫应用asynicio模块(高性能爬虫)

    asynicio模块以及爬虫应用asynicio模块(高性能爬虫) 一.背景知识 爬虫的本质就是一个socket客户端与服务端的通信过程,如果我们有多个url待爬取,只用一个线程且采用串行的方式执行, ...

  9. gitlab搭建之互备模式

    gitlab搭建之互备模式   gitlab搭建之互备模式 前言:gitlab目前默认的部署方式是本地单机部署,为了提高gitlab环境的可靠性和稳定性,必须构建一套互备搭建方案:借助gitolilt ...

  10. vue项目配置及项目初识

    目录 Vue项目环境搭建 Vue项目创建 重构项目依赖 1.需要转移的文件 2.重构依赖 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main. ...