前端歌谣-第贰拾四课-预编译流程
前言
我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是预编译基础的讲解
环境配置
npm init -y
yarn add vite -D
修改page.json配置端口
{
"name": "demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vite --port 3002"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vite": "^4.4.9"
}
}
案例1
var a=1
b=1
console.log(window.a)
window={
a:1,
b:2
}
运行结果
案例2
function test(){
var a=b=1
}
test()
console.log(window.a)
console.log(window.b)
运行结果
案例3
function test(a){
console.log(a)
var a=1
console.log(a)
function a(){
}
console.log(a)
var b=function(){}
console.log(b)
function d(){
}
}
//AO
//AO={
// a:undefined->2->function a(){}->1
// b:undefined->function b(){}
// d:function d(){}
//}
//
test(2)
运行结果
案例2
function test(a,b){
console.log(a)
c=0
var c;
a=5;
b=6;
console.log(b)
function b(){}
function d(){}
console.log(b)
}
test(1)
// AO{
// a:undefined-->a-->5
// b:undefined-->function b(){}-->6
// c:undefined-->0
// d:function d(){}
//}
运行结果
案例3
var a=1;
function a(){
console.log(2)
}
console.log(a)
// GO{
// a:undefined-->function a(){}--->1
//
//}
运行结果
案例4
console.log(a,b)
function a(){}
var b=function(){}
// GO{
// a:undefined---->function a(){}
// b:a:undefined
//}
运行结果
案例5
function test(){
var a=b=1;
console.log(b)
}
test()
//GO={
// b:1
//}
//AO{
// a:undefined--->1
//}
运行结果
案例6
var b = 3
console.log(a)
function a(a) {
console.log(a)
var a = 2;
console.log(a)
function a() {
}
var b = 5;
console.log(b)
}
a(1)
//AO{
// a:undefined--->1---->function a()--->2
// b:undefined--->5
//
//}
//GO{
// b:undefined--->3
// a:function a(){}
//}
运行结果
案例7
a=1
function test(){
console.log(a)
a=2
console.log(a)
var a=3
console.log(a)
}
test()
var a;
//GO{
// a:undefined--->1
// test:function test(){}
//}
//AO{
// a:undefined--->2--->3
//
//}
运行结果
案例8
function test(){
console.log(b)
if(a){
var b=2
}
c=3;
console.log(c)
}
var a;
test()
a=1
console.log(a)
// AO{
//
// b:undefined-->2
//
//}
//GO{
// a:undefined-->1
// test:function test(){}
// c:3
//}
运行结果
案例9
function test(){
return a;
a=1;
function a(){
}
var a=2
}
console.log(test())
// AO{
// a:undefined---->function a(){}
//
//}
//
运行结果
案例10
console.log(test())
function test(){
a=1
function a(){
}
var a=2
return a
}
//AO{
// a:undefined--->function a(){}-->1--->2
//
//
//}
//
运行结果
案例11
a=1
function test(e){
function e(){}
arguments[0]=2
console.log(e)
if(a){
var b=3
}
var c;
a=4;
var a;
console.log(b)
f=5
console.log(c)
console.log(a)
}
var a;
test(1)
console.log(a)
console.log(f)
//GO{
// a:undefined-->1
// test:function test(){}
// f:5
//}
//AO{
// e:undefined---->1---->function e(){}--->2
// b:undefined
// c:undefined
// a:undefined---->4
//}