细聊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预编译机制,包括变量提升和函数声明提升等概念。希望这些知识能帮助大家写出更高效的代码。感谢阅读,期待未来更多精彩分享~

相关推荐
脑袋大大的7 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络9 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘9 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way9 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家9 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
GISer_Jing12 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆12 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding13 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景14 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui