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

zhigoo 发布于2019-08-02 11:48 / 2815人阅读

摘要：代码在执行之前会先全局中变量提升函数声明。函数的执行上下文，也就是在这个函数范围内找到函数执行上下文中函数范围内，所有用声明的变量。函数执行时，按照执行位置查找变量作用域只会向上查找。下一回变量作用域与闭包

上一章：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提到顶部。所以如果不行代码，代码块里即使有错误也不会报出来，只有执行时才会运行代码内部东西。

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

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

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

云服务器混合云 js变量声明提升 js原型链的继承原型声明执行js函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53134.html

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

摘要：代码在执行之前会先全局中变量提升函数声明。函数的执行上下文，也就是在这个函数范围内找到函数执行上下文中函数范围内，所有用声明的变量。函数执行时，按照执行位置查找变量作用域只会向上查找。下一回变量作用域与闭包上一章：JS的数据类型传送门：https://segmentfault.com/a/11... 好！话不多少，我们就开始吧。对变量提升和函数声明的理解，能让你更清楚容易的理解，...

melody_lql 2019-08-29 17:05 评论0 收藏0
原型模式故事链(4)--JS执行上下文、变量提升、函数声明

摘要：代码在执行之前会先全局中变量提升函数声明。函数的执行上下文，也就是在这个函数范围内找到函数执行上下文中函数范围内，所有用声明的变量。函数执行时，按照执行位置查找变量作用域只会向上查找。下一回变量作用域与闭包上一章：JS的数据类型传送门：https://segmentfault.com/a/11... 好！话不多少，我们就开始吧。对变量提升和函数声明的理解，能让你更清楚容易的理解，...

netScorpion 2019-08-23 12:33 评论0 收藏0
原型模式故事链(5)--JS变量作用域、作用域链、闭包

摘要：上一章执行上下文变量提升函数声明传送门本次我们主要讲讲变量作用域和闭包变量作用域顾名思义变量起作用的范围。则是局部变量，只能在函数中使用。闭包则能长久保存变量，又不会污染。举例子定义外层函数，封装被保护的局部变量。上一章 JS执行上下文、变量提升、函数声明传送门：https://segmentfault.com/a/11... 本次我们主要讲讲变量作用域和闭包变量作用域：顾名思义：...

codecraft 2019-08-02 11:50 评论0 收藏0
原型模式故事链(5)--JS变量作用域、作用域链、闭包

摘要：上一章执行上下文变量提升函数声明传送门本次我们主要讲讲变量作用域和闭包变量作用域顾名思义变量起作用的范围。则是局部变量，只能在函数中使用。闭包则能长久保存变量，又不会污染。举例子定义外层函数，封装被保护的局部变量。上一章 JS执行上下文、变量提升、函数声明传送门：https://segmentfault.com/a/11... 本次我们主要讲讲变量作用域和闭包变量作用域：顾名思义：...

Drinkey 2019-08-29 17:07 评论0 收藏0