javascript编译过程

作用域和作用域链

[[scope]]: 每个JavaScript函数都是一个对象,对象中有些属性我们可以访问,有些不可以,但有些不可以,这些属性仅供JavaScript引擎存取,[[scope]]就是其中一个。[[scope]]指的是我们所说的作用域,其中存储了运行期上下文集合。

作用域链:[[scope]]中所存储的执行期上下文对象的集合,这个集合呈链式链接(叫做作用域链)

语法分析

通篇扫描看有没有语法错误

预编译

预编译前奏
1.imply global 暗示全局变量:即任何变量,如果变量未经声明
就赋值,此变量就为全局变量所有
2.一切声明的全局变量,全是window属性

预编译(发生在函数执行的前一刻)
四部曲:

{
	this : window
	arguments : {}
}
  1. 创建AO对象(Activation Object执行期上下文)
  2. 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
  3. 将实参和形参统一
  4. 在函数体里面找函数声明-----function test(){}
### JavaScript 编译工具概述 在现代Web开发环境中,多种工具可用于编译JavaScript代码。这些工具不仅限于简单的语法转换,还包括优化、压缩以及将新标准的特性转义到旧版浏览器兼容的形式。 #### Babel:下一代JS编译器 Babel 是最流行的JavaScript编译器之一,支持最新的ECMAScript提案并能向下兼容老版本浏览器。它允许开发者编写符合最新规范的代码,并自动处理不同环境下的差异[^1]。 ```bash npm install --save-dev @babel/core @babel/cli @babel/preset-env npx babel script.js --out-file compiled-script.js --presets=@babel/preset-env ``` #### TypeScript:带有静态类型的超集 TypeScript 增加了可选的静态类型检查给JavaScript,这有助于减少运行时错误的发生率。TypeScript文件会被编译成普通的JavaScript,在此过程中会移除所有的类型定义[^3]。 ```typescript // example.ts function greet(name: string): void { console.log(`Hello, ${name}`); } greet('World'); ``` 编译命令如下: ```bash tsc example.ts ``` #### Webpack:模块捆绑器兼编译平台 Webpack 主要作为一个模块打包工具存在,但它也具备强大的加载和预处理器能力来处理各种资源文件,包括但不限于CSS、图片甚至其他语言源码(如Sass)。当配置适当插件后,也可以用来编译JavaScript代码。 ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值