博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS作用域理解(声明提升)
阅读量:5812 次
发布时间:2019-06-18

本文共 2226 字,大约阅读时间需要 7 分钟。

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

你可能感兴趣的文章
USB 通信原理
查看>>
7zZip zip RAR iOS
查看>>
date命令的详细用法!
查看>>
分布式存储ceph集群部署
查看>>
UiAutomator源码分析之UiAutomatorBridge框架
查看>>
python 开发之selenium
查看>>
Xcode3.2.5中找不到Mac OS X - Command Line Utility -...
查看>>
css的div垂直居中的方法,百分比div垂直居中
查看>>
如何理解EM算法
查看>>
nginx 域名跳转一例~~~(rewrite、proxy)
查看>>
linux用户家目录无损迁移到独立硬盘
查看>>
文件查找
查看>>
shell编程前言(一)
查看>>
5、centos7.*配置yum的EPEL源及其它源
查看>>
JSON前后台简单操作
查看>>
shell中一些常见的文件操作符
查看>>
CentOS 7 装vim遇到的问题和解决方法
查看>>
JavaScript基础教程1-20160612
查看>>
使用第三方类、库需要注意的正则类RegexKitLite的使用
查看>>
iOS \U7ea2 乱码 转换
查看>>