zoukankan      html  css  js  c++  java
  • 7_2:预解析 = 变量提升 + 函数提升

    重点

    1 在函数内部 直接赋值 没有用var声明 就当全局变量看

    一  带着问题学习

    坑1

    console.log(num);
    var num = 10; // 输出 undefined [为什么]

    学习了变量提升就可以理解了 执行了以下操作

    var num; //变量提升 [只提升变量声明 ]
    console.log(num); //顺序执行 num 此刻没有赋值 所有是 undefined
    num = 10;

    坑2

    fun(); //报错了 TypeError: fun is not a function [ 在这里不能调用 ]
    var fun = function () {
        console.log(22);
    }
    fun(); //在这里可以调用

    学习了变量提升 也可以理解了 相当于执行了以下代码
    var fun; [ fun 是变量 不是函数 ]
    fun();

    fun = function() {
      console.log(22);
    }

    二  预解析

    1)js解析器工作流程

    // 1 JS解析器运行JS代码分两步:预解析 和 代码执行
    // 2 预解析:JS引擎会把代码里面所有的 var function 提升到作用域的最前面
    // 3 代码执行:按照书写的顺序从上往下执行

    2)预解析

    //1 预解析分为: 变量预解析(变量提升) 和 函数预解析(函数提升)
    
    //2 变量提升:把所有的变量声明提升到当前作用域的最前面 [ 不提升赋值操作 ]
    
    //3 函数提升:把所有的函数声明提升到当前作用域的最前面 [ 不调用函数 ]

    3) 函数提升代码演示

    fun();
    function fun(){
      conslole.log();
    }
    fun();
    // 为什么在函数前后都可以调用?
    
    // 学习了函数提升后就可以理解了 等同于执行了以下代码
    
    function fun() {
      console.log()
    } //函数提升
    fun();
    fun(); 所有都可以执行

    匿名函数不能提升 因为是赋值的形式

    三  预解析案例

    案例1

    var num = 10;
    fun();//执行结果 undefined
    function fun() {
        console.log(num);
        var num = 20;
    }
    
    //预解析 相当于执行了如下代码
    var num;//1 提升变量 function fun() { var num;//3 局部变量提升 console.log(num); num = 20; } //2 提升函数 num = 10;//4 顺序执行 fun();//5 顺序执行

    先提升全局的 函数内部的变量提升到函数内部最上面

    案例2

    var num = 10;
    function fn() {
        console.log(num);
        var num = 20;
        console.log(num);
    }
    fn();
    //-----执行流程-----
    var num;
    function fn() {
        var num;
        console.log(num);
        num = 20;
        console.log(num);
    }
    num = 10;
    fn();

    案例3

    var a = 18;
    fun(); //a=undefined b=9
    function fun(){
      var b = 9;
      console.log(a);
      console.log(b);
      var a = '123';
    }
    //执行流程
    var a;
    function fun(){
      var b;
      var a;
      b = 9;
      console.log(a);
      console.log(b);
      a = '123';
    }
    a = 18;
    fun();
     

    案例4  经典面试题

    fl();
    console.log(c);
    console.log(b);
    console.log(a);
    function fl() {
        var a = b = c = 9;
        console.log(c);
        console.log(b);
        console.log(a);
    }
    
    // 预解析 
    function fl() {
        var a;
        a = b = c = 9; //等同于 a = 9; b = 9; c = 9;
        console.log(c);
        console.log(b);
        console.log(a);
    }
    fl();
    console.log(c); //c是全局变量
    console.log(b); //b是全局变量
    console.log(a); //a是局部变量//本节重点
    //var a = b = c = 9;// 等于 var a = 9; b = 9; c = 9 [ b和c直接赋值 没有var声明 当全局变量看 ]
    //而集体声明是逗号 var a = 9, b =9, c=9;
  • 相关阅读:
    [ jquery 选择器 :hidden ] 此方法选取匹配所有不可见元素,或者type为hidden的元素
    剑指 Offer 03. 数组中重复的数字 哈希
    LeetCode 1736. 替换隐藏数字得到的最晚时间 贪心
    Leetcode 1552. 两球之间的磁力 二分
    Leetcode 88. 合并两个有序数组 双指针
    LeetCode 1744. 你能在你最喜欢的那天吃到你最喜欢的糖果吗?
    LeetCode 1743. 相邻元素对还原数组 哈希
    LeetCode 1745. 回文串分割 IV dp
    剑指 Offer 47. 礼物的最大价值 dp
    剑指 Offer 33. 二叉搜索树的后序遍历序列 树的遍历
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14406244.html
Copyright © 2011-2022 走看看