讲师中心 微信公众号
AI工具推荐 视频效率加速

详解JS的解析顺序及作用域

阿丽酱_9563

阿丽酱_9563

发布时间:2018-03-28 10:38:53

|

1425人浏览过

|

来源于php中文网

原创

本文主要为大家分享一篇详解JS的解析顺序和作用域,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧。

一、javascript的解析顺序

我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的。我们看一下下面的代码。

1 alert(a);
2 var a = 1;

如果执行顺序是从上到下的,在上面弹出一个a,浏览器会认为从上到下执行的,那么当它alert(a)的时候,他就会发现没有这个东西,那么他就会报错,但是实际上他弹出来的结果是undefined。返回值是undefined说明a没有被定义也就是没有赋值。下面来讲解一下javascript的解析顺序。

1.ES5中有声明意义的关键字

var   会存在变量提升

function  也有声明变量的的作用。

2.解析顺序

1.找声明 var、function 声明:只是声明变量,而不包括赋值。

2. 执行

注意:以上两步 都遵循从上至下,执行的时候遇到等号,先看等号的右边。

注意:当function声明的变量和var声明的变量重名时,function的变量权重会比var声明的要高。

下面多来几个例子解析一下就清楚许多了,但是看例子之前要知道一下什么叫作用域。

二、作用域

作用域就是:起作用的范围分为下面两种

1.全局作用域

2.函数作用域

他们两个的区别看下面的例子仔细分析。

三、看几个例子解析一下执行顺序的步骤

1. 第一个例子:

var x = 5; 
a(); 
function a(){ 
alert(x); var x = 10;
 }
 alert(x);

解析过程

1,.寻找声明 (看全局作用域)

var x;
function a(){}

2.执行

x = 5;

a() ------------->执行到这个函数的过程中在重新进行以上两步

1,寻找声明 var x;  (函数作用域)

2. 执行

alert(x); 这个x在函数作用域中存在,并且还没有执行到赋值的那一步,那么弹出的东西就是undefined;

x = 10;

alert(x) 这里弹窗是全局变量 5;

所以浏览器弹窗的内容是 undefined 5

2. 第二个例子

a() function a(){ alert(x); var x = 10;}alert(x);

解析过程 按照上面的例子一样分析

1. 寻找声明

function a(){}

2.执行

a()------------------------->函数

1.寻找声明

var x;

2.执行

alert(x) 弹出未定义

x = 10;

alert(x); 这里的x会从全局中寻找x,但是发现并没有x,所 以浏览器会 报错 x is not defined x没有被定义

所以浏览器的弹出的内容是 undefined 报错

我相信看了这两个例子的人都对这个解析过程都有了清除的了解,如果还是不太了解,建议重新看一次。

下面介绍几个需要注意的地方, 直接上例子

3. 第三个例子

前面讲到了当function声明的变量和var声明的变量重名时,function的变量权重会比var声明的要高。来一个例子证明一下

alert(a)function a() { alert("函数")}var a = 1; alert(a)

解析过程

1.寻找声明

function a(){}

var a;

2. 执行

alert(a) 前面说到了function的声明比var声明的权重高,所有执行这个的时候他会弹出这个 函数块(函数体)

a = 1;

alert(a); 这里弹出的就是 1 了

所以最后的结果就是 函数块 1;

4.第四个例子

子作用域可以向父级作用域找变量,直到全局作用域为止,反之不行。 如果子作用域有同样的变量,那么他就会使用自己的,不会去找爸爸要。

var a = 5;function fn() { alert(a)}fn()

解析过程

1.寻找声明

var a;

function fn(){}

2.执行

a = 5;

fn()--------------------------------------> 函数

1.找声明

2.执行

alert(a); 他这里没有a 所以去找爸爸要。 a = 5; 所以弹窗是 5

所以最后结果为 弹窗5

下面看一下爸爸会不会去找儿子要东西

function fn(){ var b = 5; return b; }fn();alert(b);

1.寻找声明

function fn(){}

2. 执行

fn()----------------------------------------> 函数

1.寻找声明

1.var b;

2.执行

return b;

alert(b); //我们看一下返回值是多少 b is not defined 他说b没有被定义,说明父作用域不可以向自作用域去寻找变量。

5. 第五个例子

当一个变量无中生有时,不管从哪个作用域出来的,统统归到window下,下面看两个例子

fn(); alert(a); var a = 0; alert(a); function fn(){ var a = 1; }

这一个例子应该可以自己分析了 最后的结果是 undefined 0

我们再来看一下下面这个你会很吃惊

fn() alert(a) var a = 0; alert(a); function fn(){ a = 1; }

明明都一样,我吃惊什么 返回值不是还是 undefined 和 0 吗

但是你有没有发现倒数第二行 上面的声明了 下面的没有声明,来解析一波

1.寻找变量

var a;

function fn(){}

2.fn()---------------------------->函数

a = 1; 这个时候就说到了那一点,无中生有的变量,统统归到window下面

所以下面的执行过程

alert(a) 这里的弹窗就是 1 了

a = 0;

 alert(a) 弹出 0

所以最后的结果是 1 0

四、严格模式

严格模式下的代码执行时,非常严格

变量不允许无中生有

意义:规范代码开发的流畅,逻辑

"use strict"a = 1;alert(a);

当我们写后面两句代码的时候不会报错和出现问题,但是当我们加上第一句代码的时候,我们在这样写的时候就会报错了。所以我们还是按照规范的标准来,提高自己的能力

五、可能好多人做了上面的例子感觉不太过瘾,下面我再给出几个例子,可以自己去分析分析,我会在最后面给出答案。

1. 第一个例子  // 10 报错

var a = 10;alert(a);a()function a(){ alert(20);}

2.第二个例子 undefined 1 0

var a = 0; function fn(){ alert(a); var a = 1; alert(a); } fn(); alert(a);

3.第三个例子 当同样的声明同样的名字重复时,后面写的会覆盖前面写的 //2 1 1 3

a() var a = function(){ alert(1) } a(); function a(){ alert(2); } a(); var a = function(){ alert(3); } a()


热门AI工具

更多
UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

相关专题

更多
全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

4925

2025.09.18

python 全局变量
python 全局变量

本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

2070

2025.09.18

c++ 全局变量
c++ 全局变量

本专题整合了c++全局变量的使用、定义、作用域等等内容,阅读专题下面的文章了解更多详细内容。

199

2026.03.17

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

4676

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1395

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

1838

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

10223

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

1020

2023.09.01

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

100

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn