上一章：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. Kali安装在U盘+使用aircrack-ng套件

    因为: Kali Linux 自带aircrack-ng 虚拟机VMware不能用笔记本内置网卡,需要另外买一个无线网卡,然而并不想买 不想给笔记本重装Kali Linux系统 有闲置的32GU盘 所 ...

  2. java 环境配置及开发工具

    1.下载JDK 网址:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2 安装jdk 3.安装好jdk后配置环境变 ...

  3. 01: jenkins简介与安装

    jenkins参考博文:https://www.w3cschool.cn/jenkins/jenkins-173a28n4.html Jenkins中文官网:http://www.jenkins.or ...

  4. [NodeJs系列]聊一聊BOM

    最近在看Node源码的时候,偶然间,看到如下函数: /** * Remove byte order marker. This catches EF BB BF (the UTF-8 BOM) * be ...

  5. 一个Accecc_Token生成和缓存和读取类，微信/小程序开发必须学

    Access_Token是调用微信和小程序各种接口的临时凭证,有效期2小时(7200秒),很多接口都需要调用access_token接口生成一个access_token的,例如微信支付,微信分享,公众 ...

  6. Centos7 配置LAMP+fastcgi（Centos7.2+php7.0+mariadb+httpd）

    环境:阿里云centos7.3 一.安装并配置数据库 1.安装数据库 #yum install mariadb-server  mariadb -y 2.启动服务并设置开机自启 # systemctl ...

  7. 在html中展示pdf

    pc端 插件: https://pdfobject.com/ 使用: <!doctype html> <html lang="en"> <head&g ...

  8. Android判断是debug还是release模式

    1.当有些功能不希望在release模式实现时,但是debug模式又需要的时候,就可以对当前版本模式进行判断.如是debug模式则日志输出级别设置为Level.DEBUG,release模式设置为Le ...

  9. Linux日常操作整理

    1. Linux下建立ssh互信 需要在两台机器上保证安装ssh步骤:cd ~/.sshssh-keygen(每台机器执行此操作)ssh root@192.168.2.100 cat ~/.ssh/i ...

  10. 终于明白上一篇的一顿误操作是什么了，是$，不是S ！！！！！

    1,在命令行中输入export PATH=/usr/bin:/usr/sbin:/bin:/sbin:/usr/X11R6/bin这样可以保证命令行命令暂时可以使用.命令执行完之后先不要关闭终端2. ...