zoukankan      html  css  js  c++  java
  • JS变量提升和函数提升

      JS中变量会预解析,所谓的预解析就是:在当前作用域中,JavaScript代码执行之前,浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义。

     

    编译前:

    console.log(a);
    var a = 3;

    编译后可看做:

    var a; // 将变量a的声明提升至最顶端,赋值逻辑不提升。
    console.log(a); // undefined
    a = 3; // 代码执行到原位置即执行原赋值逻辑

    一、变量声明的提升是以变量所处的第一层词法作用域为“单位”的,即全局作用域中声明的变量会提升至全局最顶层,函数内声明的变量只会提升至该函数作用域最顶层。

    编译前:

    console.log(a);
    var a = "a";
    var foo = () => {
        console.log(a);
        var a = "a1";
    }
    foo()

    编译后可看做:

    var a;
    console.log(a); // undefined
    a = "a";
    var foo = () => {
        var a; // 全局变量会被局部作用域中的同名变量覆盖
        console.log(a); // undefined
        a = "a1";
    }

    二、函数声明的优先级高于变量声明。  

    三、函数提升只会提升函数声明,而不会提升函数表达式。

    编译前:

    console.log(foo1); 
    foo1(); 
    console.log(foo2);
    foo2(); 
    function foo1() {
        console.log("foo1");
    };
    var foo2 = function () {
        console.log("foo2");
    }

    编译后可看做:

    function foo1() {
        console.log("foo1");
    };
    var foo2;
    console.log(foo1);// [Function: foo1]
    foo1(); // foo1
    console.log(foo2); // undefined
    foo2(); // TypeError: foo2 is not a function
    foo2 = function () {
        console.log("foo2");
    }
  • 相关阅读:
    css去掉点击连接时所产生的虚线边框技巧兼容符合w3c标准的浏览器
    html中<a href> </a>的用法
    点击页面其他地方关闭弹出层
    CSS文字两端对齐
    mouseover和mouseenter的区别
    jquery中的$("#id")与document.getElementById("id")的区别
    console.log
    ie6中margin失效问题
    渐变
    CSS 清除浮动的4种方法
  • 原文地址:https://www.cnblogs.com/superlizhao/p/11474183.html
Copyright © 2011-2022 走看看