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

看一下代码

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. Codeforces 1178F2. Long Colorful Strip

    传送门 首先涂区间,那么区间最多有 $2n$ 个相邻位置不同的情况,并且连续相同的颜色可以合并起来 那么这样操作完以后,区间长度最多为 $2n$ 发现涂完一段区间以后其他的操作都不能出现一边在区间内而 ...

  2. Centos7.3安装Mysql5.7.26(glibc即linux通用版)

    1.检查防火墙是否关闭 //查看防火墙状态 firewall-cmd --state //关闭防火墙 systemctl stop firewalld systemctl disable firewa ...

  3. MVC进阶讲解+小技巧-乱七八糟

    开发步骤 1.建立项目 2.建立文件夹 3.建立Controllers 4.生成页面 5.编写Html+Js 6.编写异步请求的Action的方法,返回部分页(用于分页) 7.Js中显示部分页 8.增 ...

  4. Flink概述

    计算引擎 大数据计算引擎分为离线计算和实时计算,离线计算就是我们通常说的批计算,代表是Hadoop MapReduce.Hive等大数据技术.实时计算也被称作流计算,代表是Storm.Spark St ...

  5. opencv 模板匹配, 已解决模板过大程序不工作的bug

    #include <opencv2/opencv.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv ...

  6. xpath下载

    1.下载地址,版本号为 2.0.2: 链接: https://pan.baidu.com/s/1GXPm1kMENXhOkefKcEQnlA 密码: 8wwv 2.安装 1).在chrome右上角找到 ...

  7. 解决docker pull 速度慢问题

    解决docker pull 速度慢问题 将docker镜像源修改为国内的: 在 /etc/docker/daemon.json 文件中添加以下参数(没有该文件则新建): { "registr ...

  8. 使用JFreeChart创建柱状图的工具类

    package cn.xfz.oa.util; import java.awt.Font; import java.util.List; import org.jfree.chart.ChartFac ...

  9. java web中 8080端口号被占用的问题处理,终于明白了 Address already in use: JVM_Bind(端口冲突)

    1.错误描述 2011-7-20 11:05:18 org.apache.catalina.core.StandardServer await严重: StandardServer.await: cre ...

  10. ANSIBLE自动化管理工具

    ansible 基础 自动化运维工具 官网:https://www.ansible.com/ 官方文档:https://docs.ansible.com/ ansible 特性 1. 模块化:调用特定 ...