作用域的理解--第一篇

浏览器:
“JS解析器”
1)JS 的预解析   “找一些东西” :var function 参数
  a = ...
  所有的变量,在正式运行代码之前,都提前赋了一个值:未定义
  fn1 = function fn1(){ alert(2); }
  所有的函数,在正式运行代码之前,都是整个函数块 

  遇到重名的:只留一个
  变量和函数重名了,就只留下函数

  相同的函数名的话, 后面会覆盖前面的函数

2)逐行解读代码:
  表达式:= + - * / % ++ -- ! 参数……

  表达式可以修改预解析的值!

  注意:  函数声明不叫表达式

  在逐行解读代码的过程中,如果遇到函数调用,那么js解析器,就又会重复上面两步。

  1、预解析,2,、逐行解读代码 函数里面没有的东西(变量等),它会顺着作用域链网上找,去找父类的

3) script标签: 如果一个页面有两块或多块script标签的, js是自上而下去执行的,上面的执行完毕后(预解析、逐行解读代码),才会执行下面的区域,执行上面区域的时候,会把上面都信息保留下来(变量值啊....等)。

4) 即使有对个函数嵌套,那js解析器的执行的步骤还是,那两步先去预解析,再去逐行执行代码,遇到函数调用后再到函数里面,重复的去执行先前那两步...

案例一:

    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

    注意: 如果此时你再 调用a()的话,浏览器会给 你报个错。因为此时 仓库里已经没有a这个方法了, 只有 a = 3; 3() //这样写必然会报错

    案例二:

    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

时间: 2024-08-24 14:37:43

作用域的理解--第一篇的相关文章

深入理解javascript作用域系列第一篇——内部原理

× 目录 [1]编译 [2]执行 [3]查询[4]嵌套[5]异常[6]原理 前面的话 javascript拥有一套设计良好的规则来存储变量,并且之后可以方便地找到这些变量,这套规则被称为作用域.作用域貌似简单,实则复杂,由于作用域与this机制非常容易混淆,使得理解作用域的原理更为重要.本文是深入理解javascript作用域系列的第一篇——内部原理 内部原理分成编译.执行.查询.嵌套和异常五个部分进行介绍,最后以一个实例过程对原理进行完整说明 编译 以var a = 2;为例,说明javasc

深入理解javascript作用域系列第三篇

前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇--声明提升(hoisting) 变量声明提升 a = 2 ; var a; console.log( a ); 直觉上,会认为是undefined,因为var a声明在a = 2;之后,可能变量被重新赋值了,因为会被赋予默认值undefined.但是,真正的输出结果是2 console.log( a ) ; var a

深入理解this机制系列第一篇——this的4种绑定规则

× 目录 [1]默认绑定 [2]隐式绑定 [3]隐式丢失[4]显式绑定[5]new绑定[6]严格模式 前面的话 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅.前面的作用域系列已经详细介绍过作用域的知识.本系列开始将介绍javascript的另一大山脉——this机制.本文是该系列的第一篇——this的4种绑定规则 默认绑定 全局环境中,this默认绑定到window console.log(this === window);//true 函数独立调用时

深入理解javascript作用域系列第三篇——声明提升(hoisting)

× 目录 [1]变量 [2]函数 [3]优先 前面的话 一般认为,javascript代码在执行时是由上到下一行一行执行的.但实际上这并不完全正确,主要是因为声明提升的存在.本文是深入理解javascript作用域系列第三篇——声明提升(hoisting) 变量声明提升 a = 2 ; var a; console.log( a ); 直觉上,会认为是undefined,因为var a声明在a = 2;之后,可能变量被重新赋值了,因为会被赋予默认值undefined.但是,真正的输出结果是2 c

深入理解javascript作用域系列第四篇——块作用域

× 目录 [1]let [2]const [3]try 前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用其他类型的作用域单元甚至可以实现维护起来更加优秀.简洁的代码,比如块作用域.随着ES6的推广,块作用域也将用得越来越广泛.本文是深入理解javascript作用域系列第四篇——块作用域 let for (var i= 0; i<10; i++) { console.log(i); } 上面这段是很熟

深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域

× 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关于作用域的两种不同翻译而已.但实际上,它们并不相同,却相互纠缠在一起.本文先用一张图开宗明义,然后进行术语的简单解释,最后根据图示内容进行详细说明 图示 查看大图 概念 [作用域] 作用域是一套规则,用于确定在何处以及如何查找标识符.关于LHS查询和RHS查询详见作用域系列第一篇内部原理. 作用域分

深入理解javascript对象系列第一篇——初识对象

× 目录 [1]定义 [2]创建 [3]组成[4]引用 前面的话 javascript中的难点是函数.对象和继承,前面已经介绍过函数系列.从本系列开始介绍对象部分,本文是该系列的第一篇——初识对象 对象定义 javascript的基本数据类型包括undefined.null.boolean.string.number和object.对象和其他基本类型值不同的是,对象是一种复合值:它将许多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值 于是,对象也可看做是属性的无序集合,每个属性都是一个

深入理解javascript作用域系列第五篇

前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关于作用域的两种不同翻译而已.但实际上,它们并不相同,却相互纠缠在一起.本文先用一张图开宗明义,然后进行术语的简单解释,最后根据图示内容进行详细说明 图示 查看大图 概念 [作用域] 作用域是一套规则,用于确定在何处以及如何查找标识符.关于LHS查询和RHS查询详见作用域系列第一篇内部原理. 作用域分为词法作用域和动态作用域.javascript使用词法作

深入理解表单脚本系列第一篇——表单对象

× 目录 [1]表单属性 [2]表单事件 [3]表单方法 前面的话 javascript最初的一个应用就是分担服务器处理表单的责任,打破处处依赖服务器的局面.尽管目前的web和javascript已经有了长足的发展,但web表单的变化并不明显.由于web表单没有为许多常见任务提供现成的解决方法,很多开发人员不仅会在验证表单时使用javascript,而且还增强了一些标准表单控件的默认行为.本文是表单脚本系列第一篇——表单对象 表单属性 在HTML中,表单是由form元素来表示的,而在javasc