zoukankan      html  css  js  c++  java
  • JS作用域理解(声明提升)

    1.JS解析步骤:

      a.预解析

        将变量声明提升;

        将函数声明及函数内容提升,可以理解成原来位置的函数在解析代码时已经提到代码初始位置;

        块内的变量声明和函数声明也会被提升,例如if语句

        遇到重名,只留下一个;

        如有重名变量和函数,留下函数;

        如有两个重名函数,后一个函数覆盖前一个函数;

        firefox不能预解析块内定义的函数,出于兼容性考虑,定义函数,一般要放到最外面

        (注意:变量提升的是声明,函数提升的是声明和内容)

      b.逐行解析代码

        遇到表达式,可以修改预解析的变量值,例如变量赋值可以将函数声明替换掉;

        (重点)先处理js代码,再处理代码中的事件和队列,例如,先将setTimeout解析出来,等代码执行完,再根据延时处理其中的函数

    2.如果有几个script代码部分,JS会按照先后顺序逐个解析执行,但是这几个代码部分共用一个域

    3.函数的参数相当于在函数内部定义了这个变量,相当于局部变量,在函数内部解析时也会进行声明提升

    4.JS中,每个函数都有自己的执行环境(作用域),其中使用的变量会按照作用域链进行搜索,一直到全局环境,并且只会对目标变量所处的环境造成影响

    5.被花括号包围的代码块在很多类c语言中会有块级作用域,JS没有块级作用域

    6.函数传参相当于赋值表达式

    7.只要是一个执行环境(作用域),就会发生JS解析两个步骤

    8.只有函数可以创建局部作用域,如果需要一个类似块级作用域的作用域,可以在块内加入一个函数

      例子:

        alert(a); // function a (){ alert(4); }

        var a = 1;

        alert(a); // 1

        function a (){ alert(2); 

        alert(a); // 1

        var a = 3;

        alert(a); // 3

        function a (){ alert(4); }

        alert(a); // 3    

        alert( typeof a );

        a(); // 报错

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

        <script>

          alert(a);        //报错

        </script>

          <script>

          var a=1;

        </script>

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

        <script>

          var a=1       

        </script>

          <script>

          alert(a);   //1

        </script>

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

        var a = 1;
        function fn1(){
        alert(a); // undefined
        var a = 2;
        }
        fn1();
        alert(a); // 1

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

        var a = 1;
        function fn1(){
         alert(a); // 1
        a = 2;
        }
        fn1();
        alert(a); // 2

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

        var a = 1;
        function fn1(a){
        alert(a); // undefined
        a = 2;
        }
        fn1();
        alert(a); // 1

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        var a = 1;
        function fn1(a){
        alert(a); // 1
        a = 2;
        }
        fn1(a);
        alert(a); // 1
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

        window.onload = function (){
        var aBtn = document.getElementsByTagName('input');

        for( var i=0; i<aBtn.length; i++ ){
        aBtn[i].onclick = function (){

        // alert( i ); // Undefined

        for( var i=0; i<aBtn.length; i++ ){
        aBtn[i].style.background = 'yellow';
        }

        };
        }
        };

     

  • 相关阅读:
    关于闭包的一些知识
    浏览器解析JavaScript原理(1)
    函数作用域及函数表达式
    jquery
    前端常用插件
    Git及GitHub
    angular框架
    express
    ES6基础
    Node.js相关总结
  • 原文地址:https://www.cnblogs.com/frontendnotes/p/6418959.html
Copyright © 2011-2022 走看看