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';
    }

    };
    }
    };

 

转载于:https://www.cnblogs.com/frontendnotes/p/6418959.html

JS作用域理解(声明提升)相关推荐

  1. JS 作用域与变量提升---JS 学习笔记(三)

    你知道下面的JavaScript代码执行时会输出什么吗? var foo = 1; function bar() {if (!foo) {var foo = 10;}console.log(foo); ...

  2. JS笔记(一):声明提升

    我们习惯将 var a = 2; 看作一个声明,而实际上JavaScript引擎并不这么认为.他将 var a 和 a = 2 当作两个单独的声明,第一个是编译阶段的任务,第二个则是执行阶段的任务. ...

  3. JS变量(声明)提升和函数声明提升

    目录 一.概念理解 1.变量声明提升 2.函数声明提升(又叫函数提升) 变量提升和函数提升的优先级 小结: 一.概念理解 变量提升:在当前作用于中,js代码自上而下执行之前,浏览器会把所有带var/f ...

  4. js作用域及作用域链概念理解及使用

    之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包,觉得写得很清晰,可以简单理解闭包产生原因,但看评论都在说了解了作用域链和活动对象才能真正理解闭包,起初不以为然,后来在跟公司同事交流的时 ...

  5. js变量作用域和变量提升

    在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解. 变量作用域 "一个变量的作用域表示这个变 ...

  6. Js 变量声明提升和函数声明提升

    Js代码分为两个阶段:编译阶段和执行阶段 Js代码的编译阶段会找到所有的声明,并用合适的作用域将它们关联起来,这是词法作用域的核心内容 包括变量声明(var a)和函数声明(function a(){ ...

  7. 关于JavaScript的词法作用域及变量提升的个人理解

    关于JavaScript的作用域,最近听到一个名词:"词法作用域":以前没有听说过(读书少),记录一下对此的理解,加深印象. 词法作用域:在JavaScript中,一个函数的作用域 ...

  8. 原生js之理解作用域

    谈到作用域,我们就能想到全局变量.局部变量等名词,接下来,我讲谈谈我对作用域的理解. ES5中的作用域 ES5中,有两种作用域:函数作用域和全局作用域. 第一段代码: <script type= ...

  9. 作用域js和java区别_js作用域理解

    学习笔记:(图中水印来自同名微信订阅号,现已改名为'码上猿梦') //javaScript作用域: //首先声明一点,js中没有块级作用域, 比如java中for循环中for(int i = 0; i ...

最新文章

  1. nginx如何处理php请求,Nginx是如何处理HTTP请求的
  2. 【co】ES6-20/21 iterator与generator
  3. codeigniter_如何在浏览器中查看CodeIgniter日志文件
  4. jQuery 对象与Dom 对象互转
  5. 华为nova 8系列发布日期曝光:售价还卖贵点?
  6. 如果常数项没有经过显著性检验_时间序列(一):平稳性、自相关函数与LB检验...
  7. Jquery.Validation表单验证
  8. 从全职高手开始的系统_全职高手8年登上巅峰荣耀,阅文做对了什么?
  9. BZOJ3571 [Hnoi2014]画框 【分治 + KM算法】
  10. Internet Explorer 10 的 User-Agent 字符串
  11. 180822 逆向-网鼎杯(2-1)
  12. paddle 基础函数 cosine_decay
  13. 分享一个目前还支持离线下载的网盘
  14. Win7系统DNS服务器未响应的解决办法【系统天地】
  15. “亚马逊抄袭”引热议,拼多多、淘宝、京东该怎么玩?
  16. 【PostMan使用】PostMan的简单使用教程
  17. 什么叫轻量瓷_骨瓷碗价格多少钱
  18. 基于ESP32的硬件项目教程(三)ESP32的引脚说明及数字信号读写操作
  19. 计算机专业考海关都是做什么,海关一般招什么专业
  20. STC89C52系列单片机的特殊功能寄存器表

热门文章

  1. 对话国际农民丰收节贸易会-万祥军:雀巢全球谋定农民合作
  2. 性能测试四十八:Jenkins+Ant+Jmeter系统部署
  3. 对象的克隆(clone方法)
  4. RF内置库函数学习(一)
  5. Caffe学习系列(13):对训练好的模型进行fine-tune
  6. Maven构建Struts2框架的注意事项
  7. ASP.NET MVC 3 RC发布
  8. zen-cart首页能否在中间栏显示“所有商品”?
  9. vb.net中类型转换
  10. PMCAFF微课堂 | SegmentFault联合创始人高阳带你玩转垂直社群