浅谈JS的变量提升
JS的解析机制,是JS的又一大重点知识点,在面试题中更经常出现,今天就来唠唠他们的原理。首先呢,我们在我们伟大的浏览器中,有个叫做JS解析器的东西,它专门用来读取JS,执行JS。一般情况是存在作用域就存在解析,那它是怎么运行的呢。首先呢,然后分成两大步骤。
1 第一步叫做JS预解析,这一步骤实际上是一种准备工作把,在执行之前,它会先浏览整个代码,然后寻找三种东西。 1var 2 函数声明 我来分别解释一下。首先它会提取带var声明的变量,然后放到作用域中,但是不会提取变量的值,会先给他赋值为undefined。然后呢会找到函数声明(关于函数声明上个博文有说),然后会把整个函数包括内容放到作用域。函数的参数也会被放进去。
所以我们可以知道在代码运行前,所有带var声明的变量都提前被赋值为undefined,找到所有有名字的函数所有的内容和参数,都提前被解析。
2 第二步就是执行了,JS解析器会逐行解读代码,在这过程中,只有表达式可以修改预解析的值(比如 = + - * / % -- ++ ! 参数....()),其他的会跳过。
下面来看个简单的栗子
- var a;
- alert(a); //undefined 来自预解析
- a = 3; //逐行解读代码到这句的时候,表达式修改了预解析中a的值。
- alert(a); //
这是个很简单的代码,我们按照解析机制来分析下:
第一步,找函数声明和var,然后找到了 var a=1; 这一句,就把 a提取出来然后赋值为undefined。即此时 a=undefined。
第二步,逐行解读代码, var a; 不是表达式,跳过,第一个alert(a);由第一步可知此时a=undefined, a = 3; 是表达式,并且更改了a的值,于是现在a=3,
所以最后弹出的是3。
下面再看个稍微复杂点的栗子。
- var a=1;
- function fn1(){
- alert(a);
- var a =2 ;
- alert(a);
- }
- fn1();
- alert(a);
我们按照解析机制来分析下:
1 预解析:找到带var的a和函数fn1(),放到全局作用域。
全局仓库:
- a =undefined
- function fn1(){
- alert(a);
- var a =2 ;
- alert(a);
- }
2 运行,逐行解读代码
- var a=1; // 将全局a的值改成1
- function fn1(){ // 这里不是能够产生改变的表达式,所以运行的时候直接跳过。
- alert(a); // 先找局部变量a undefined
- var a =2 ; // 更改了局部作用域里a的值
- alert(a); // 2
- }
- fn1(); // 注意,当遇见函数的调用的时候,也会对函数进行预解析和运行两步操作。原理是相同的。只是作用域需要注意。
- alert(a);// 在全局作用域里找a.显然等于1
- 函数的解析过程:
1 预解析:有点需要注意,当函数有参数的时候,参数也会被预解析,根据var a =2 ;找到 a 放到局部仓库 且a =undefined (注意这和全局作用域里的不是一个a,因为作用域不同,所以互相是不影响的),
所以此时是有两个作用域
全局仓库:
- a =1;
- function fn1(){
- alert(a);
- var a =2 ;
- alert(a);
- }
函数里的局部仓库:
- a =undefined ;
2 逐行解读函数里面的代码:当读取到这里 alert(a); 会优先在局部仓库里找a ,弹出未定义 ,当局部没有的时候 会去全局找
解读到var a =2 ; 优先在局部仓库里找a,把值改为2;所以解读到函数里面的第二个 alert(a); 就等于2了,
解读到最后一个alert(a),因为在全部环境里执行,所以会在全局仓库里找a;弹出1。
这个栗子,比较长,认真看几遍,一定会会收获良多的。
再看一个有参数存在的栗子:
有参数函数:
- var a = 1;
- function fn1(a){
- alert(a); // 1 来自局部作用域参数a,而且这个值是全局作用域里面的a作为参数传进来的值。
- a = 2 ; 修改了局部作用域里的a的值
- var a;
- alert(a); //
- }
- fn1(a);
alert(a); // 1 来自全局作用域
这里全局的预解析就不用多说了,找到了整个函数,和 a =undefined 然后执行a =1 ,到函数调用的时候,开始了函数的解析.
函数解析过程
1 预解析的时候,也会找到参数a,并且把它放到局部作用域,赋值为a = undefined.
2 逐行解读代码:会从参数开始解读 参数相当于局部变量 fn1(a); 这里把全局作用域里面的a的值,当作参数传入,注意只是把值传入,两个a是互不影响的,
不在同一个作用域。所以函数中先弹出1,后来局部作用域里的a值被改为2,就弹出了2 ,。最后一句弹出了a是1,可以发现函数里面优先更改的是局部作用域里面的a.(当在局部找不到a的时候,会去全局找 并且可以修改全局的值,所以大家可以实验把参数去掉,弹出的就是1 2 2 了)
下面再看一种比较特殊的情况,
1 就是在预解析过程中,遇到重名的情况,这个时候规律就是这样的,会优先留下有内容的,简单来说就是:当函数与变量重名,留下函数,当函数与函数重名,留下后面的函数。栗子就不举了,大家自己实验一下。
2 当有多个作用域的时候 解析器 会先预解析第一块的作用域中的东西 然后运行完成以后 再去预解析下一块的作用域的东西 再运行,后面的作用域可以找到前面作用域留下的东西,反过来就不行。
注意 if for等不是一个作用域。
今天写的比较多,其实知识点原理都差不多,都是我平常学习的笔记总结,希望对大家有用。我是沐晴,下篇不见不散喔。
浅谈JS的变量提升的更多相关文章
- 浅谈JS中 var let const 变量声明
浅谈JS中 var let const 变量声明 用var来声明变量会出现的问题: 1. 允许重复的变量声明:导致数据被覆盖 2. 变量提升:怪异的数据访问.闭包问题 3. 全局变量挂载到全局对象:全 ...
- 浅谈JS严格模式
浅谈JS严格模式 简介 何为严格模式?严格模式(strict mode)即在严格的条件下运行,在严格模式下,很多正常情况下不会报错的问题语句,将会报错并阻止运行. 但是,严格模式可以显著提高代码的健壮 ...
- 浅谈JS中的闭包
浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...
- 浅谈 js 正则字面量 与 new RegExp 执行效率
原文:浅谈 js 正则字面量 与 new RegExp 执行效率 前几天谈了正则匹配 js 字符串的问题:<js 正则学习小记之匹配字符串> 和 <js 正则学习小记之匹配字符串优化 ...
- 浅谈js拖拽
本文来自网易云社区 作者:刘凌阳 前言 本文依据半年前本人的分享<浅谈js拖拽>撰写,算是一篇迟到的文章. 基本思路 虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准.但考虑 ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- 深入理解js的变量提升和函数提升
一.变量提升 在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域.变量提升即将变量声明提升到它所在作用域的最开始的部分.上个简历的例子如: ...
- 浅谈JS之AJAX
0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...
- 浅谈 js 字符串之神奇的转义
原文:浅谈 js 字符串之神奇的转义 字符串在js里是非常常用的,但是你真的了解它么?翻阅<MDN String>就可以了解它的常见用法了,开门见山的就让你了解了字符串是怎么回事. 'st ...
随机推荐
- js中的原型继承
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- LostRoutes项目日志——敌人精灵Enemy解析
Enemy类在Enemy.js中,类Enemy类继承自PhysicsSprite,以便于可以使用物理引擎中的一些特性. 原版的Enemy.js: var Enemy = cc.PhysicsSprit ...
- iOS - UIAlertController三种显示提示框代码
UIAlertView在IOS 8以上版本已经过时了,官方推荐我们使用UIAlertController代替UIAlertView.UIActionSheet 1、UIAlertController显 ...
- ThreadLocal 那点事儿(续集)
本篇是<ThreadLocal 那点事儿>的续集,如果您没看上一篇,就就有点亏了.如果您错过了这一篇,那亏得就更大了. 还是保持我一贯的 Style,用一个 Demo 来说话吧.用户提出一 ...
- Get Started with the Google Fonts API
Get Started with the Google Fonts API This guide explains how to use the Google Fonts API to add fon ...
- [转]CDN(内容分发网络)技术原理
1. 前言 Internet的高速发展,给人们的工作和生活带来了极大的便利,对Internet的服务品质和访问速度要求越来越高,虽然带宽不断增加, 用户数量也在不断增加,受Web服务器的负荷和传输距离 ...
- Redux-example
Redux-example Examples from http://redux.js.org/docs/introduction/Examples.html Counter Vanilla Run ...
- 操作系统中的IPC机制(inter-process Communication)
http://www.cnblogs.com/tsiangleo/p/4902695.html
- stm32中断遵循原则
故障案例: 定时器定时触发一个定时事件,在这个事件里面,会调用一个串口发送程序,发现串口发送数据不完整. 分析: 1.将发送函数剥离,放到独立的线程工作,运行稳定 2.使用单步调试,在定时中断事件中多 ...
- eclipse安装Hadoop-0.20.2插件
因为在使用Hadoop-0.20.2这个古董,需要使用它自带的eclipse插件,而我最初安装的是现代的eclipse4.10.0. 在经历两天,以及以下种种尝试之后,均以失败告终: 1.网上找适合的 ...