细聊JavaScript的预编译机制

前言

在上篇文章中我们了解到了JavaScript的作用域链,本文将继续深入探讨JavaScript的预编译机制

概念

预编译: 代码在执行前需要进行编译操作,用于确定代码之间的各种关联

简单来说,开始写程序的时候,预编译器已经帮我们做好了很多事情,让程序写起来更快,也更容易理解。就像我们在做手工之前,先准备好所有的材料和工具一样。

如何执行?

变量声明

代码在执行前是一定会被编译的,不编译引擎就不会识别出来,会出现诸多问题比如变量提升

我们来看个例子:

css 复制代码
console.log(a); 
var a = 1

变量 在编译过后会声明提升,代码在引擎眼中是这样的:

css 复制代码
var a
console.log(a);  //输出undefined
a = 1

函数声明

我们来举个函数的例子

scss 复制代码
test()
function test() {
    var a = 123
    console.log(a);
}

同样,函数声明 也会整体提升

scss 复制代码
function test() {
    var a = 123
    console.log(a);
}
test()//会输出123,不会报错

例子

好的,理解了这两个概念之后我们来看下面这行代码:

php 复制代码
var a = 1;
function fn(a) {
    var a = 2
    function a() { }
    console.log(a);
}
fn(3)

咱先分析一下:

  • 预编译发生在全局

    1. 创建全局GO对象
    2. 找变量声明,将变量名作为GO的属性名,值为undefined
    3. 在全局找函数声明,将函数作为GO的属性名,值为函数体
  • 预编译发生在函数体 内:

    1. 创建一个AO对象

    2. 找形参和变量声明,将形参和变量名作为AO的属性名,值为undefined

    3. 形参和实参统一

    4. 在函数体内找函数声明,将函数名作为AO的属性名,值为该函数体

    好,接下来我们进行编译,在原代码的基础上解释:

javascript 复制代码
//全局作用域
GO:{
a:undefined-->1
fn:function(){}
}
var a = 1;
function fn(a) {
    var a = 2
    function a() { }
    console.log(a);
}
//函数调用
AO:{
    a:undefined-->3-->function(){}   
}
fn(3)//输出为2

再来分析一段:

javascript 复制代码
  function fn(a) {
  console.log(a);
  var a = 4399
  console.log(a);
  function a() { }
  console.log(a);
  var b = function () { }
  console.log(b);
  function c() { }
  var c = a
  console.log(c);
}

步骤一:全局预编译

css 复制代码
GO:{
   fn:function(){}//全局就只有一个fn
  }

步骤二:全局代码执行,遇到了函数调用,进行函数编译

css 复制代码
AO: {
  a: undefined-- > 1-- > function a() { }
  b: undefined
  c: undefined-- > function c() { }
}

步骤三:函数编译完了之后再执行

javascript 复制代码
AO: {
  a: undefined-- > 1-- > function()-->4399
  b: undefined -->function () { }
  c: undefined-- > function c() { }-->4399
}

输出结果为

这个输出结果符合我们的预期

结语

好滴,以上就是本文全部内容啦,本文我们深入理解了JavaScript预编译机制,包括变量提升和函数声明提升等概念。希望这些知识能帮助大家写出更高效的代码。感谢阅读,期待未来更多精彩分享~

相关推荐
脑袋大大的32 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0141 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
江城开朗的豌豆3 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
goldenocean4 小时前
React之旅-05 List Key
前端·javascript·react.js
Mintopia5 小时前
像素的进化史诗:计算机图形学与屏幕的千年之恋
前端·javascript·计算机图形学
Mintopia5 小时前
Three.js 中三角形到四边形的顶点变换:一场几何的华丽变身
前端·javascript·three.js