美文网首页
js预编译

js预编译

作者: 仔崽06 | 来源:发表于2021-02-05 17:14 被阅读0次

函数声明与函数表达式

定义函数的主要方法有三种

1.函数证明

function test(){
}

2.函数表达式

var test=function(){
}

3.new Function

var str=`return Hello${name}`
var test=new Function('name',str)
test('zdb')

函数预编译

函数预编译发生在函数执行的前一刻,分为4个步骤.

步骤
1.创建AO(Activation Object)对象,AO所谓执行期上下文.
2.找形参和变量声明,将变量和形参名作为AO对象的属性名,值为undefined.
3.将实参值和形参统一.
4.在函数体里面找函数声明,值赋予函数体.
  • 代码示例
function fn(a){
    console.log(a) //[Function: a]
    var a=123;
    console.log(a) //123
    function a(){}
    console.log(a) //123
    var b=function(){}
    console.log(b) //[Function: b]
    function d(){}
}
fn(1)

1.创建AO

// Activation Object
AO{}

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

AO{
   a:undefined,
   b:undefined
}

3.将形参和实参统一.

AO{
   a:1,
   b:undefined
}

4.在函数体里查找函数,值赋予函数体

AO{
   a:[Function:a],
   b:undefined,
   d:[Function:d]
}

5.执行函数代码

AO{
   a:[Function:a],
   b:[Function: b],
   d:[Function:d]
}
function fn(a){
    console.log(a) //[Function: a]  AO读取a
    var a=123;  //AO a赋值为123 
    console.log(a) //123
    function a(){}  //预编译提升不再执行
    console.log(a) //123
    var b=function(){}  //将AO b赋值为[Function: b]
    console.log(b) //[Function: b]
    function d(){}  //预编译提升不再执行
    console.log(d)  // [Function: d]
}
fn(1)

全局预编译

步骤
1.创建GO(Global Object)对象.
2.寻找变量声明,并且当做属性放在GO对象里,值为undefined
3.寻找函数声明,值赋予函数体.
  • 代码示例
console.log(global) //[Function: global]
var global=100
function global(){
    
}
console.log(global) //100

1.全局创建GO对象.

GO{
}

2.寻找变量声明,并且当做属性放在GO对象里,值为undefined.

GO{
  global:undefined
}

3.寻找函数声明,值赋予函数体

GO:{
  global:[Function: global]
}

4.代码运行

console.log(global) //读取GO 这时候global成为[Function: global]
var global=100  //GO里的global已被改完100
function global(){
    
} //变量提升不执行
console.log(global) //100 GO里的global
  • 代码示例
function test(){
   console.log(b); //undefined
   if(a){
       var b=100
   }
   c=234
   console.log(c) //234
}
var a;
test()
a=10;
console.log(c) //234

1.创建全局GO

GO{
    a:undefined,
    test:[Function:test]
}

2.函数test执行前,预编译,创建AO

AO{
}

3.函数体寻找形参,声明变量,作为AO属性赋值undefined

AO{
  b:undefined
}

4.将函数形参,实参值统一.
5.在函数体内查找函数声明,值赋予函数体.
6.执行函数代码,if里的a默认为全局GO的a属性,a值为undefined所以if代码不执行.
7.函数体c未经var声明,默认c为GO属性并赋值234

GO{
 a:undefined
 c:123
}

8.console.log(c),值为GO里的c打印234
9.test函数执行完毕,执行a=10,全局GO属性a修改值为10
10.console.log(c) 读取是GO的c,所以值为234

  • 代码示例
function test(){
   var a=b=123 
}
console.log(window.a) //undefined
console.log(window.b) //123

1.变量赋值至右向左.
2.函数体内没有var声明的变量默认为全局变量.

imply global 暗示全局变量

如果未经声明的变量赋值,比变量默认为全局变量所有

console.log(a) //error

//imply global 
 a=100
 console.log(a)  //100
 console.log(window.a) //100

相关文章

  • JS的变量和函数提升

    1.js的运行和预编译过程 <1>.语法分析 查找基本语法有无错误; <2>、预解析/预编译 执行之前进行预解析;...

  • day05-JS运行和编译

    1.JS运行和编译 1.1语法分析:查找基本语法有没有错误 1.2 预解析:执行之前进行预解析 ...

  • 2018-07-06

    js高级 今日所学摘要: ①js的预编译:js很特别,在js代码执行前会进行预编译,预编译的结果就是——变量提升。...

  • JS预解析

    JS解释器运行JS分为两步:预解析、代码执行 预解析 JS解释器会把JS里面所有的var和function提升到当...

  • 2018-07-27

    JS实现图片预加载

  • 前端的那些事(一):变量提升与函数提升

    前言 是不是经常遇到面试问你,为什么会变量提升,函数提升,它的行为又是什么? 解答 js程序编译有两个步骤: 预解...

  • js 编译顺序

    一、js 编译1. js 是按照代码块进行编译和执行,代码块之间相互独立。

  • Scope & Closures

    JS 也是编译型语言,并不是边解释边执行的。 编译的时机是代码即将执行之前。 Hoisting 编译时 JS 会把...

  • js编译、解析Urlencode

    js编译、解析Urlencode

  • JavaScript 的“预 编译”

    JavaScript 执行引擎并非一行一行地分析和执行程序,而是一段一段地分析执行的。而且,在同一段程序的分析执行...

网友评论

      本文标题:js预编译

      本文链接:https://www.haomeiwen.com/subject/bepwtltx.html