从字面上理解----域就是空间、范围、区域,作用就是读、写,所以作用域我们可以简单理解为:在什么样空间或者范围内对数据进行什么样的读或写操作。

看一下代码

alert(a);                    // 为什么是undefined
var a = 1; alert(a); //为什么浏览器无反应
a = 1;

要了解为什么这些现象必须先知道浏览器是如何读取js代码,而这段浏览器专门用来读取js代码的片段我们称之为-----js解析器 

首先,我们来理解“JS解析器”是如何工作的?

先看如下代码

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

当“JS解析器”识别到 <script> 它就开始工作了,至少从两个部分开始

1)先找一些东西 :根据 var function 参数 先找齐了再开始工作。于是先找到a,但是不会读取a等号后面的东西,所以a是未定义,

可以简单理解为 -----所有的变量,在正式运行代码之前,都提前赋了一个值:未定义  a=.......

然后根据 function  找到   fn1 = function fn1(){ alert(2); }

所有的函数,在正式运行代码之前,都是整个函数块

                         整体简单理解为:有变量未定义,由函数整个函数整体

这一步称之为----------‘js的预解析’

                        原则:遇到重名的------1、只留一个2、变量和函数重名了,就只留下函数

2)逐行读代码 :

表达式:= + - * / % ++ -- ! 参数……

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

如最上面代码当读取到

alert(a); 

先去第一步仓库中找到a未定义

于是alert是undefined

接着才会执行 var a=1;此时a的值才是1

第二段里面没有var function 参数 所以仓库里面没有东西所以浏览器毫无反应

案例一:分析如下代码

alert(a);                    // function a (){ alert(4); }
var a = 1;
alert(a); //
function a (){ alert(2); }
alert(a); //
var a = 3;
alert(a); //
function a (){ alert(4); }
alert(a); //
a ()                        // 报错 Uncaught TypeError: number is not a function

分析过程

1)预解析    var function 参数

            遇到重名的------1、只留一个2、变量和函数重名了,就只留下函数

             最后留下function a (){ alert(4); }  整个集合

2)逐行读代码   所以第一行alert(a); 是集合 function a (){ alert(4); }

               接着给据:表达式可以修改预解析的值!
遇到第二行var a = 1; 于是第三行alert(a); 的值是1
第四行无作用不执行
于是第五行alert(a); 还是1
遇到第六行var a = 3; 于是第七行alert(a); 的值是3
第八行无作用不执行
于是第九行alert(a); 还是3
第十行a(); 因为此时仓库中只有a=3,而此时在仓库中没有function 所以报错

第06课:作用域、JS预解析机制的更多相关文章

  1. JS预解析机制

    JS的预解析过程: 1,预解析 2,再逐行解读代码, 实例: ---------------------------- <script>        var name="xm& ...

  2. [妙味JS基础]第六课:作用域、JS预解析机制

    知识点总结 浏览器的解析方法 script 全局变量,全局函数 自上而下 函数 由里到外 "JS的解析器": 1)“找一些东西”:var function 参数 var a=未定义 ...

  3. javascript-初级-day06作用域、JS预解析机制

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  4. js作用域其二:预解析

    文章目錄 解析机制 JavaScript是一门解释型的语言 , 想要运行js代码需要两个阶段 编译阶段: 编译阶段就是我们常说的JavaScript预解析(预处理)阶段,在这个阶段JavaScript ...

  5. JS的解析机制

    JS的解析机制,是JS的又一大重点知识点,在面试题中更经常出现,今天就来唠唠他们的原理.首先呢,我们在我们伟大的浏览器中,有个叫做JS解析器的东西,它专门用来读取JS,执行JS.一般情况是存在作用域就 ...

  6. 轻松搞定javascript变量(闭包,预解析机制,变量在内存的分配 )

    变量:  存储数据的容器     1.声明        var   2.作用域       全局变量. 局部变量. 闭包(相对的全局变量):   3.类型         a.基本类型(undefi ...

  7. 进击JavaScript核心 --- (2)函数和预解析机制

    一.函数 每个函数都是 Function类型的实例,也具有属性和方法.由于函数也是一个对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定 1.函数的定义方式 (1).函数声明 fun ...

  8. 轻松搞定javascript预解析机制(搞定后,一切有关变态面试题都是浮云~~)

    hey,guys!我们一起总结一下JS预解析吧! 首先,我们得搞清楚JS预解析和JS逐行执行的关系.其实它们两并不冲突,一个例子轻松理解它们的关系: 你去酒店吃饭,吃饭前你得看下菜谱,点下菜(JS预解 ...

  9. js预解析相关知识总结以及一些好玩的面试题

    js预解析的题像在做智力题一样有意思~ 预解析 预解析:在解释这行代码之前发生的事情——变量的声明提前了,函数的声明提前 console.log(num) ——未定义Num,结果是报错 var num ...

随机推荐

  1. CentOS7 Python3上安装paramiko

    1. CentOS 7下安装Python3.5 CentOS7默认安装了python2.7.5,要用 Python3需要自己手动安装.注意不要删除python2. 1.1 下载python3源码包 w ...

  2. Java反射的理解(六)-- 通过反射了解集合泛型的本质

    Java反射的理解(六)-- 通过反射了解集合泛型的本质 上述写了那么多,我们可能会有个疑问,为什么要用反射,步骤比我们常规的加载类操作复杂多了,别急,这个问题我最后才解答,我们先来了解集合泛型的本质 ...

  3. redis 学习(19)-- RDB与AOF的抉择

    RDB与AOF的抉择 1.RDB VS AOF RDB AOF 启动优先级 低 高 体积 小 大 恢复速度 快 慢 数据安全性 容易丢数据 根据策略决定 轻重 重 轻 2.RDB的最佳策略 关闭RDB ...

  4. git的常用指令(二) git add -A 、git add . 和 git add -u

    git add . :他会监控工作区的状态树,使用它会把工作时的所有变化提交到暂存区,包括文件内容修改(modified)以及新文件(new),但不包括被删除的文件. git add -u :他仅监控 ...

  5. C# 定义热键

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  6. C# 使用Emit实现动态AOP框架 进阶篇之优化

    目  录 C# 使用Emit实现动态AOP框架 (一) C# 使用Emit实现动态AOP框架 (二) C# 使用Emit实现动态AOP框架 (三) C# 使用Emit实现动态AOP框架 进阶篇之异常处 ...

  7. XML基础介绍【一】

    XML基础介绍[一] 1.XML简介(Extensible Markup Language)[可扩展标记语言] XML全称为Extensible Markup Language, 意思是可扩展的标记语 ...

  8. Go语言基础之Cookie和Session

    Cookie和Session Cookie和Session是Web开发绕不开的一个环节,本文介绍了Cookie和Session的原理及在Go语言中如何操作Cookie. Cookie Cookie的由 ...

  9. Hive权限管理(十)

    Hive权限管理 1.hive授权模型介绍 (1)Storage Based Authorization in the Metastore Server 基于存储的授权 - 可以对Metastore中 ...

  10. 两步创建vue全局组件

    import Login from './Login' export default { install: function(Vue){ Vue.component('Login', Login); ...