js 函数提高和变量提高

时间  2019-11-10
标签 函数 提高 变量 栏目 JavaScript 繁體版
原文   原文链接

 

总结：html

函数提高比变量提高优先级高！

词法分析

词法分析方法：

js运行前有一个相似编译的过程即词法分析，词法分析主要有三个步骤：函数

  • 分析参数
  • 再分析变量的声明
  • 分析函数说明

具体步骤以下：

  • 函数在运行的瞬间，生成一个活动对象（Active Object），简称AO
  • 分析参数
  1. 函数接收形式参数，添加到AO的属性，而且这个时候值为undefine,例如AO.age=undefine
  2. 接收实参，添加到AO的属性，覆盖以前的undefine
  • 分析变量声明，如var age;或var age=23;
  1. 若是上一步分析参数中AO尚未age属性，则添加AO属性为undefine，即AO.age=undefine
  2. 若是AO上面已经有age属性了，则不做任何修改
  • 分析函数的声明，若是有function age(){}

把函数赋给AO.age ,覆盖上一步分析的值post

代码例子1

这样咱们先经过一段代码来理解词法分析：spa

复制代码 
<script>
    function t1(age) {
        console.log(age);
        var age = 27;
        console.log(age);
        function age() {}
        console.log(age);
    }
    t1(3);
</script>
复制代码

词法分析阶段：

 等价于：

<script>
    function t1(age) {
        var age=     function () {}
        console.log(age);
        var age = 27;
        console.log(age);
   
        console.log(age);
    }
    t1(3);
</script>

　　

  • 首先造成Active Object即AO对象

 

  • 第一步：分析形式参数

AO.age = undefinecode

传入实参即对AO.age=undefine进行覆盖：htm

AO.age = 3对象

 

  • 第二步：分析局部变量

存在var age = 27;blog

这个时候遵循若是AO.age存在值则不做任何修改，按照第一步分析的最后结果AO.age = 3,因此这里不做任何修改即：ip

AO.age = 3it

 

  • 第三步：分析函数的声明，

由于函数中存在function age(){}函数

因此按照规则应该将函数赋值给AO.age覆盖第二步分析的AO.age = 3即：

AO.age = function age(){}

执行阶段

执行t1函数，到console.log(age)时，词法分析的最后AO.age= function age(){},因此会打印：

function age(){}

 

var age=27；给age赋值27

到第二个console.log（age）这个时候age已经从新被赋值27，因此这个时候会打印：

27

 

function age() 并无调用因此并不会执行

 

到第三个console.log（age）这个时候age的值并无被再次修改，因此这个时候会打印：

27

运行js查看结果以下与咱们分析的彻底相符：

 

代码例子2

 

复制代码 
<script>
    function t1(age) {
        var age;
        console.log(age);
        var age = 23;
        console.log(age);
        function age() {}
        console.log(age);
    }
    t1(22)
</script>
复制代码

和上面的词法分析过程同样

词法分析阶段：

等价于：

<script>
    function t1(age) {
        var age=  function () {};
        console.log(age);
        var age = 23;
        console.log(age);
      
        console.log(age);
    }
    t1(22)
</script>

　　

  • 首先造成Active Object即AO对象

 

  • 第一步：分析形式参数

AO.age = undefine

传入实参即对AO.age=undefine进行覆盖：

AO.age = 22

 

  • 第二步：分析局部变量

第一步中最后获得AO.age = 22

因此这里var age；以及var age =23 ，由于AO.age属性已经存在值，因此这个时候遵循若是存在则不做任何修改，即：

AO.age = 22

 

  • 第三步：分析函数的声明，

由于函数中存在function age(){}函数

因此按照规则应该将函数赋值给AO.age覆盖第二步分析的AO.age = 22即：

AO.age = function age(){}

 

执行阶段

执行t1函数，到console.log(age)时，词法分析的最后AO.age= function age(){},因此会打印：

function age(){}

 

var age=23；给age赋值23

到第二个console.log（age）这个时候age已经从新被赋值23，因此这个时候会打印：

23

 

function age() 并无调用因此并不会执行

 

到第三个console.log（age）这个时候age的值并无被再次修改，因此这个时候会打印：

23

 

运行js查看结果以下与咱们分析的彻底相符：

 

代码例子3

复制代码 
<script>
    function t1(age) {
        var age;
        console.log(age);
        age = 23;
        console.log(age);
        function age() {
            console.log(age);
        }
        age();
        console.log(age)
    }
    t1(22)
</script>
复制代码

词法分析阶段：

等价于：

<script>
    function t1(age) {
        var age=  function age() {  //函数表达式
            console.log(age);
        };
        console.log(age); //输出age函数
        age = 23;    
        console.log(age);   //age是变量
      
        age();  //报错
        console.log(age)
    }
    t1(22)
</script>

　　

  • 首先造成Active Object即AO对象

 

  • 第一步：分析形式参数

AO.age = undefine

传入实参即对AO.age=undefine进行覆盖：

AO.age = 22

 

  • 第二步：分析局部变量

第一步中最后获得AO.age = 22，因此这里遵循，若是AO.age存在值则不做任何修改即：

AO.age = 22

 

  • 第三步：分析函数的声明

由于函数中存在function age(){console.log(age)}函数

因此按照规则应该将函数赋值给AO.age覆盖第二步分析的AO.age = 22即：

AO.age = function age(){console.log(age)}

 

执行阶段

执行t1函数，到console.log(age)时，词法分析的最后AO.age= function age(){console.log(age)},因此会打印：

function age(){console.log(age)}

 

age = 23，这个时候会覆盖原来的function age(){console.log(age)}，因此第二个console.log(age)会打印：

23

 

function age() 是一个函数表达式，因此不会作任何操做

 

age() 这个时候的age仍是23,并非函数表达式，因此这里会报错

 

运行js查看结果以下与咱们分析的彻底相符：

 

 

这里的提示错误确实也是说age不是一个函数

代码例子4

复制代码 
<script>
    function t1(age) {
        var age=function  age() {
            console.log(age);
        }
; console.log(age); 
age();
 console.log(age);
 }
 t1(23) </script>
复制代码

词法分析阶段：

 

  • 首先造成Active Object即AO对象

 

  • 第一步：分析形式参数

AO.age = undefine

传入实参即对AO.age=undefine进行覆盖：

AO.age = 23

 

  • 第二步：分析局部变量

第一步中最后获得AO.age = 23，因此这里遵循，若是AO.age存在值则不做任何修改即：

AO.age = 23

 

  • 第三步：分析函数的声明

由于函数中存在function age(){console.log(age)}函数

因此按照规则应该将函数赋值给AO.age覆盖第二步分析的AO.age = 23即：

AO.age = function age(){console.log(age)}

 

执行阶段

执行t1函数，到console.log(age)时，词法分析的最后AO.age= function age(){console.log(age)},因此会打印：

function age(){console.log(age)}

 

function age() 是一个函数表达式，因此不会作任何操做

 

age()这个时候age是一个函数表达式，这里会执行function age(){console.log(age)}，这个时候函数里console.log（age），age没有被修改因此仍是function age(){console.log(age)}，即打印：

function age(){console.log(age)}

 

最后一个console.log(age)这里的age没有被修改仍是function age(){console.log(age)}，因此会打印：

function age(){console.log(age)}

 

运行js查看结果以下与咱们分析的彻底相符：

代码例子5:

复制代码 
<script>
    function t1(age) {
        console.log(age);   //23
        var age = function () {
            console.log(age)
        }
        age();   //函数
        console.log(age);  //函数
    }
    t1(23);
</script>
复制代码

词法分析阶段：

  • 首先造成Active Object即AO对象

 

  • 第一步：分析形式参数

AO.age = undefine

传入实参即对AO.age=undefine进行覆盖：

AO.age = 23

 

  • 第二步：分析局部变量

第一步中最后获得AO.age = 23，因此这里遵循，若是AO.age存在值则不做任何修改即：

AO.age = 23

 

  • 第三步：分析函数的声明

这里并无函数声明表达式

因此最后分析的结果是：

AO.age = 23

 

执行阶段

执行t1函数，到console.log(age)时，词法分析的最后AO.age=23

因此第一个console.log（age）会打印

23

 

var age = function () {console.log(age)},这里将var = 23进行覆盖这个时候age是一个函数表达式

 

age() 正好调用function () {console.log(age)}，这个时候这个函数里的console.log（age），age并无修改仍是一个函数表达式，因此会打印

function () {console.log(age)}

 

最后一个console.log（age）仍是打印：

function () {console.log(age)}

 

运行js查看结果以下与咱们分析的彻底相符：

代码例子6:

复制代码 
<script>
    function t1(age) {
        console.log(age);
        var age = function age() {
            console.log(age);
        }
        age();
        console.log(age);
    }
    t1(23);
</script>
复制代码

代码例子6和代码例子5的分析基本同样，结果也是同样：

总结

总之，按照上述最开始写的方法分析，都能分析出结果来

全部的努力都值得期许，每一份梦想都应该灌溉！
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程