zoukankan      html  css  js  c++  java
  • JS变量声明提前的原理

    JS声明变量背后的原理

    x = 1;
    alert(x);
    var y = function() {
    alert(x); 
    var x = 2;
    alert(x); 
    }
    y();
     上面的代码也会你答对了它会分别输出:1,undefined,2。对于我来说,第一反应它会输出:1,1,2。为什么第二个会输出undefined?在上面我明确定义了一个全局变量x,为何找不到?
    那是因为:js编译器在执行这个y函数的时候,会把把它body里面的声明变量提前到最前面进行声明。比如:var x=2; 编译器先会在body最前面进行var x 声明。其实上面的代码等同于下面的这段代码:
    x = 1;
    alert(x);
    var y = function() {

    var x;//此时x还未赋值,所以为undefined。
    alert(x); 
    x = 2;
    alert(x); 
    }
    y();
     所以也就不难理解x=undefined的了.但是如果把var x = 2;这段代码给删掉,在内部它没有进行var声明。它会一直沿着作用域向上找,此时的x 就为全局x.


    接下来再看一个更有趣的例子。
    var a = 1;
    function b() {
    a = 10;
    return;
    }
    b();
    alert(a);
    ///////////////////////////////////
    var a = 1;
    function b() {
    a = 10;
    return;
    function a() {}

    b();
    alert(a);
      例子很简单。第一个例子为输出10,第二个会输出1。这是为什么呢?况且第二个例子我都return 了。按理都应当输出10才对呀!那时因为JS编译器在背后作怪。
    两段代码差别就是第二个例子多了个function a(){};便这个函数体里面什么也没有,并且也没有对它进行任何调用。

    实JS编译器在背后会把function a() {}编译成 var a=function (){}。此时对于函数内部也有一个a=10; 外面的a些也还是1;根据JS作用域。会先找内部的a,如果找不到再向上一级一级找。
    最张alert(a) 就会显示1;

    总结:
    在函数区域内,如果有声明变量,则使用内部的变量,如果没有声明该变量,它会一直沿着作用域向上找,找不到时,则使用函数外声明的全局变量;

  • 相关阅读:
    IoT(Internet of things)物联网入门介绍
    SIP协议解析
    nginx内核优化参考
    下线注册中心微服务
    vscode配置vue+eslint自动保存去除分号,方法与括号间加空格,使用单引号
    linux常见故障整理
    部署Glusterfs
    解决 eslint 与 webstrom 关于 script 标签的缩进问题
    单个maven项目使用阿里云镜像方法
    idea启动tomcat日志乱码解决办法
  • 原文地址:https://www.cnblogs.com/huan-lin/p/3683041.html
Copyright © 2011-2022 走看看