浏览器解析js的顺序

javascript解析器工作步骤

  1. “找到一些东西”:var、function、参数;(预解析)

    ==备注:如果遇到重名分为以下两种情况==

    • 变量和函数重名时,只留下函数
    • 函数重名,根据代码的上下文顺序,留下最后一个
  2. 逐行解读代码

    ==备注:表达式可以修改与预解析的值==

    • 函数调用:也会进行预解析:找到var、function、参数
    • JS解析器在执行第一步预解析的时候,会从代码的开始搜索直到结尾,只去查找var、function和参数等内容。一般把第一步称之为“JavaScript的预解析”。而且,当找到这些内容时,所有的变量,在正式运行代码之前,都提前赋了一个值:未定义;所有的函数,在正式运行代码之前,都是整个函数块。
实例1
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript">
 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
 </script>
</head>
<body>
</body>
</html>

原因:由于,“JavaScript解析器”在逐行解析代码时,先找到var关键字,然后得知有一个变量a,所以会给a默认赋值一个undefined值,存入“仓库”中,然后,继续向下解析代码,当找到function a () {alert(2);}时,根据“函数和变量重名,保留函数”的规则,此时的a变为function () {alert(2);},再继续向下找,当找到变量a的时候,不变,仍继续向下找,当找到函数function () {alert(4);}时,根据“函数重名上下文”原则,替换为function () {alert(4);},最终a被赋值为function () {alert(4);},存到“仓库”中,当逐行执行代码时,执行到第一个alert(a)时,将会弹出“function () {alert(4);}”,接着向下执行,当执行到a=1时,由于表达式可以改变预解析的值,所以此时的a变为1,执行到第二个alert(a)时,弹出值为1,当执行到function a () {alert(2);}时,由于此时是一个函数声明,并不会修改a的值,所以执行到第三个alert(a)时,弹出的仍为数字“1”,依次类推,此后将会陆续弹出“3”、“3”。
实例2
var a=1;
function fn(){
    alert(a);   //1
    a=2;
}
fn();
alert(a);       //2
原因:在fn函数里面没有var,就根据作用域链往父级外面找
实例3
var a=1;
function fn(a){
    alert(a);       //1
    a=2;
}
fn(a);
alert(a);       //1
原因:在fn函数中,只是将全局变量a的值赋给了fn的参数,全局变量a完全没有影响,相当于值传递
实例4
var a=1;
function fn(a){
    alert(a);
    a=2;
}
fn();           //undefined
alert(a);       //2 
原因:调用fn是没有将全局变量的a传给fn的参数,所以打印出来会是undefined;而后面的是打印的全局变量的a

原文地址:https://www.cnblogs.com/15fj/p/8413913.html

时间: 2024-10-30 08:07:13

浏览器解析js的顺序的相关文章

js里各浏览器解析XML,支持IE、火狐、Chrome等

js在chrome中加载XML,js加载XML支持ff,IE6+,Opera等浏览器 见代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js里各浏览器解析XML,支持IE.火狐.Chrome等</title> </head> <body> <script> fu

JS作用域,浏览器解析原理

---恢复内容开始--- 浏览器: JS解析器:这儿理解为两步1)JS的预解析:“找一些东西”:var function 参数:   (1)所有的变量,在正式运行代码之前,都提前赋一个值:未定义   a=undefined:(2)所有的函数,在正式运行代码之前,都是整个函数块  fn1=function fn1(){alert(2);} 2)逐行解读代码(在第一步形成的仓库的基础上解读)表达式:= + - * / % !++ -- ......逐行读到表达式的时候会改变与预解析中变量的值 注:J

js 执行顺序

一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属性制定外部的js文件 放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p> 作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="

selenium+phantomjs解析JS

背景知识: PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG.PhantomJS可以用于页面自动化,网络监测,网页截屏,以及无界面测试等. Selenium也是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE(7.8.9).Mozilla Firefo

浅解析js中的对象

浅解析js中的对象 说到对象,我首先想到的是每逢过年过节,长辈们老是开玩笑的问我“你找了对象没?”.不说大家都知道,这里的“对象”指的是“女朋友”,但是今天我想要说的js中的“对象”和我们生活中谈到的“对象”不是同一回事,但是其中也有着很多相似之处.    在讲js中的对象之前,我想先抛出几个疑问:    什么是对象?    对象有哪些?    对象能做什么?    如何创建对象?    如何对对象进行操作?    对象有特性么?有的话有哪些特性?    对象有属性么?有的话有哪些?对属性如何操

HTML基础-浏览器渲染操作的顺序

在前端中,我们需要对浏览器的渲染操作做一个了解,不然的话,我们可能在做前端开发过程中会找不出错误的原因,因此 能够了解浏览器的渲染操作的顺序有助于我们对问题的排除. 页面加载网页-浏览器渲染操作的顺序 1.解析HTML结构 2.加载外部脚本和样式表文件 3.解析并执行脚本代码 4.构造HTML DOW模型 5.加载图片等外部文件 6.页面加载完毕

解析js中作用域、闭包——从一道经典的面试题开始

如何理解js中的作用域,闭包,私有变量,this对象概念呢? 就从一道经典的面试题开始吧! 题目:创建10个<a>标签,点击时候弹出相应的序号 先思考一下,再打开看看 //先思考一下你会怎么写,是不是这样? 可是结果呢,弹出来的都是10,为啥? var i,a for(i=0;i<10;i++){ a=document.createElement('a') a.innerHTML=i+'<br>' a.addEventListener('click',function(eve

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错.后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的. 源码: /** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 * 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, * 显示到页面时完全按传入的顺

js_ 预解析(js代码如何执行的)

1.要理解js代码是如何执行的 js代码是由  浏览器的 js解析引擎  来执行的,js代码执行(从上往下)之前要先预解析 js代码执行  :  同步.异步   (异步要等同步代码都执行完后再执行:异步的代码放在栈中等待同步代码从上往下全部执行完成之后再执行) 预解析  :作用 注意:定义函数中的 用函数表达式方式里只存在变量名提升,没有匿名函数提升 1.变量提升 2.函数提升 案例1: 案例2: 案例3: 原文地址:https://www.cnblogs.com/yangyutian/p/10