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

看一下代码

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. 网站QQ客服链接代码

    个人QQ客服代码 <a href="tencent://message/?uin=QQ号码">在线咨询</a> 企业QQ客服代码 <a href=&q ...

  2. 5-Perl 变量

    1.Perl 变量变量是存储在内存中的数据,创建一个变量即会在内存上开辟一个空间.解释器会根据变量的类型来决定其在内存中的存储空间,因此你可以为变量分配不同的数据类型,如整型.浮点型.字符串等.上一章 ...

  3. Function(Of T) as T 泛型类型多态返回对象的实现

    Shared Function ResultT(Of T As result)(msg As String, Optional success As Boolean = False) As T Dim ...

  4. vue全局设置请求头 (封装axios请求)

    Vue.http.interceptors.push((request, next) => { // 请求发送前的处理逻辑 request.headers.set('Authorization' ...

  5. element-ui Cascader 级联选择器 点击label选中

    通过修改label的样式解决: 注意:el-cascader-panel 是直接挂载在body上的,所以需要全局设置 .el-cascader-panel .el-radio{ width: 100% ...

  6. python 小记

    判断一个数是奇数还是偶数 #!/usr/bin/env python3 #_*_coding:UTF-8_*_ def pan(num): ==: print( str(num) + ' is: 偶数 ...

  7. shell脚本中使用nohup执行命令不生效

    1 例如 !#/bin/bash nohup echo "hello world" 2 解决办法 加上 source /etc/profile 就好了 !#/bin/bash so ...

  8. 构建虚拟工控环境系列 - 罗克韦尔虚拟PLC

    一. 概述 本篇主要介绍罗克韦尔虚拟PLC的搭建,使用的操作系统为Windows7 x86 Ultimate(DEEP_GHOST_WIN7_SP1_X86_V2015_06.iso),虚拟化软件为 ...

  9. Boost::pool (1)

    POOL 什么是pool 池分配是一种非常快速的内存分配方案,但其使用受到限制.有关池分配的更多信息(也称为简单隔离存储,请参阅 池化概念和简单隔离存储). 我为什么要使用Pool? 使用池可以更好地 ...

  10. 最全的PHP正则表达式

    一.校验数字的表达式 1 数字:^[0-9]*$2 n位的数字:^\d{n}$3 至少n位的数字:^\d{n,}$4 m-n位的数字:^\d{m,n}$5 零和非零开头的数字:^(0|[1-9][0- ...