JavaScript之预编译
javascript是一种解释性弱类型语言,在浏览器中执行时,浏览器会先预览某段代码进行语法分析,检查语法的正确与否,然后再进行预编译,到最后才会从上往下一句一句开始执行这段代码,简单得来说可以表示为三个步骤: 语法分析-->预编译-->解释执行;
先插入一段代码:


相信有一些javascript基础的人都应该很容易理解这行代码,这只是简单的声明了一个常见函数,而变量赋值如下:

在项目开发过程中,我们经常会定义一些变量来接受传递过来的数据,例如在发送Ajax请求时,后台会返回给我们一些数据,我们就会定义一些变量或数组来接受数据,然后再绑定数据到Dom元素上;
在理解了什么是函数声明和变量赋值之后,接下来我们开始解释预编译的过程,
浏览器在执行script代码块之前,会先进行预编译,预编译一般会分为以下四个步骤:
1.创建AO(Activation Object:执行期上下文)对象;
2.找出形参和变量声明,将变量和形参名作为AO属性名,值为undefined;
3.将实参值和形参统一;
4.在函数体内找出函数声明,值赋给函数体;
最后,浏览器会开始解释一行代码执行一行代码,如果变量在代码块里被重新赋值,那它最终的值就为代码块重新赋给它的值,例如上面例子中,第一个console.log(a)的值为function a(){},到了下一步变量a被重新赋值,var a = 123;所以在第二个第三个console.log(a)中,a的输出值为123,然后函数执行到var b = function (){},下面开始执行console.log(b),所以b的值为function (){};
最后,在理解了预编译之后,我们自然可以得出这道例题的结果:

对于预编译的理解,我们需要多做一些例题来加深印象,正所谓熟能生巧!
JavaScript之预编译的更多相关文章
- javascript的预编译和执行顺序
原文:javascript的预编译和执行顺序 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题 代码: 代码一<html> ...
- 一步一步的理解javascript的预编译
首先,我们要知道javascript是单线程.解释性语言.所谓解释性语言,就是翻译一句执行一句.而不是通篇编译成一个文件再去执行. 其实这么说还没有这么直观,读一句执行一句那是到最后的事了.到JS执行 ...
- JavaScript的预编译和执行
JavaScript引擎,不是逐条解释执行javascript代码,而是按照代码块一段段解释执行.所谓代码块就是使用<script>标签分隔的代码段. 整个代码块共有两个阶段,预编译阶段和 ...
- 还原真实,javascript之预编译 / 预解析
今天在群里吹水时,有群友提出一个问题.我一看很简单,就立马给出了答案:因为存在变量提升,所以输出undefined.本以为无人反驳,可确招来口诛笔伐.作为写实派的我,一贯以来坚持真实是我的使命,岂能容 ...
- JavaScript 之 预编译 作用域,作用域链
第一次写博客,本来是学习jQuery遇到闭包问题,发现并没有理解闭包,发现闭包牵扯的知识点太多.复习了一遍(发现自己该记住的全忘了)写在博客里,自己也是小白,希望大神们指点迷津,必将感激不尽. 我们知 ...
- Javascript的"预编译"思考
今天工作需要,搜索下JS面试题,看到一个题目,大约是这样的 <script> var x = 1, y = z = 0; function add(n) { n = n+1; } y = ...
- JavaScript函数——预编译
四部曲 创建AO对象 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined. 将实参值和形参值统一 在函数体内找函数声明,值赋予函数体. 权重按顺序依次增加.以下例子即可体现上述规则 ...
- javascript预编译和执行过程总结
javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块 ...
- javaScript 预编译过程浅尝
javaScript 预编译过程 1.创建AO对象(Activation Object) AO{ a: } 2.找形参和变量声明,将变量和形参作为AO属性名,值为undefined AO{ a:und ...
随机推荐
- 2020年最新版Web前端学习路线图-前端小白入门必读-pink老师推荐
Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业有什么帮助呢? 我学到什么程度可以胜任工作? ... 这里,p ...
- vue2.0开发环境下解决跨域问题
1.找到vue 项目下的配置文件 /config/index.js 2.找到 proxyTable 配置项 proxyTable: { '/api': { target: 'http://www.xx ...
- Crash
一.Crash类型 crash 一般产生自 iOS 的微内核 Mach,然后在 BSD 层转换成 UNIX SIGABRT 信号,以标准 POSIX 信号的形式提供给用户.NSException 是使 ...
- 如何找回QQ聊天记录、语音、图片?
多图长图预警,本教程适用于 安卓手机 认真仔细看完答案的成功几率翻倍哟! 请各位认真看答案!求您了~ 2020年/4/4日 更新 人民不会忘记,祖国不会忘记,我们不会忘记,先烈不朽. 调整答案顺序,使 ...
- MySQL的MVCC机制
1.MVCC简介 1.1 MVCC是什么? MVCC,Multi-Version Concurrency Control,多版本并发控制.MVCC 是一种并发控制的方法,一般在数据库管理系统中,实现对 ...
- java如何自定义一个线程池
java线程池的一些简单功能,后续会更新,代码不多,很好理解 package com.rbac.thread; import java.util.ArrayList; import java.util ...
- Java的多线程1:线程的使用
概述 进程是线程的容器,线程共享进程的内存空间,所以线程之间彼此通信是比较容易的,而线程又有自己私有的内存地址,其他线程无法访问.了解进程和线程关系,可以看我另一篇博客<进程与线程> Ja ...
- SpringBoot系列之学习教程汇总
对应SpringBoot系列博客专栏,例子代码,本博客不定时更新 一.配置篇 SpringBoot系列之@PropertySource读取yaml文件 >> source down ...
- spark——spark中常说RDD,究竟RDD是什么?
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是spark专题第二篇文章,我们来看spark非常重要的一个概念--RDD. 在上一讲当中我们在本地安装好了spark,虽然我们只有lo ...
- time_wait 详解和解决方案
1. 产生原因 2. 导致问题 3. Nginx 3.1 长连接 4. 解决方案 5 .参考 产生原因 TCP 连接关闭时,会有 4 次通讯(四次挥手),来确认双方都停止收发数据了.如上图,主动关闭方 ...