我是靠谱客的博主 神勇毛衣,最近开发中收集的这篇文章主要介绍js的预编译,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

// 什么是预编译: 引擎会在解释javaScript代码之前对其进行编译,编译阶段中的一部分工作就是找到所有的声明,并用适合的作用域将它们关联起来

// 预编译什么时候发生:预编译分为全局预编译和局部预编译,全局预编译发生在页面加载完成时执行,而局部预编译发生在函数执行的前一刻

// 全局编译的步骤

// 1、生成GO(global object)对象, 这个GO就是window

// 2、将全局的变量声明(的名)储存GO对象中,value为undefined

// 3、将全局的函数声明的函数名作为GO对象中的key,函数整体内容为value储存到GO对象中

// 例子:

// var a;

// function fun() {}

// function abc() {}

// function a() {}

// console.log(a);

// var a = 100;

// console.log(a);

// 会生成一个对象(GO)

// 分析变量声明(var)——变量作为GO对象的属性名,值为undefined(变量的赋值是js代码执行的时候发生的,不是预编译的时候)

// 分析函数声明(function)——函数名作为GO对象的属性名,值为函数体(如果遇到同名,直接覆盖

// GO{

// a: undefined; function a(){},

// fun: function fun(){},

// abc:function abc(){},

// }

// 所以当代码执行到console.log(a)的时候,打印的是function a() {}

// 当执行到var a = 100的时候,GO对象就变成下面的样子

// GO{

// a: undefined; function a(){}; 100,

// fun: function fun(){},

// abc:function abc(){},

// }

// 所以当代码执行到第二个console.log(a)的时候,打印的是100

// ----------------------------------------------------------

// 局部编译的步骤

// 1、执行前的一瞬间,会生成一个AO(action object)对象

// 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() {}

function d() {}

var d = a

console.log(d); // 123

}

fn(1)

// 预编译执行的过程

// 第一步 创建AO对象

// AO {

// }

// 第二步 到函数体作用域里找形参和变量声明,将形参和变量作为AO对象的属性名,值为undefined

// AO{

// a: undefined,

// b:undefined,

// d:undefined

// }

// 第三步 将实参和形参统一

// AO{

// a: undefined; 1,

// b:undefined,

// d:undefined

// }

// 第四步 在函数体里找函数声明,将函数名作为AO对象的属性名,值赋予函数体,重复则覆盖之前的

// AO{

// a: undefined; 1; function a() {},

// b:undefined,

// d:undefined; function d() {}

// }


 

// 代码执行过程

// 当执行到第一个console.log(a);的时候AO对象如下,所以打印出function a() {}

// AO{

// a: undefined; 1; function a() {},

// b:undefined,

// d:undefined; function d() {}

// }

// 当执行到第二个console.log(a);的时候AO对象如下,所以打印出123

// AO{

// a: undefined; 1; function a() {}; 123,

// b:undefined,

// d:undefined; function d() {}

// }

// 当执行到第三个console.log(a);的时候AO对象如下,所以打印出123

// AO{

// a: undefined; 1; function a() {}; 123,

// b:undefined,

// d:undefined; function d() {}

// }

// 当执行到console.log(b);的时候AO对象如下,所以打印出匿名函数function(){}

// AO{

// a: undefined; 1; function a() {}; 123,

// b:undefined; function(){},

// d:undefined; function d() {}

// }

// 当执行到console.log(d);的时候AO对象如下,所以打印出123

// AO{

// a: undefined; 1; function a() {}; 123,

// b:undefined; function(){},

// d:undefined; function d() {}; 123

// }

// 函数执行完毕,销毁AO对象

最后

以上就是神勇毛衣为你收集整理的js的预编译的全部内容,希望文章能够帮你解决js的预编译所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(46)

评论列表共有 0 条评论

立即
投稿
返回
顶部