JS执行顺序

javascript给人的直观感受是,从上往下执行,但实际上却不是这样的,先看个例子

1. console.log(test);

2. var test = "你好";

3. console.log(test);

4. console.log(test2);

第1行结果为:undefined

第3行结果为:"你好"

第4行会报错:test2 is not defined

执行第1行时,test还没有定义,为什么没像第4行一样报错?

因为javascript执行时,在同一个作用域内是先编译再执行

编译的时候会编译 function 和 var 这两个关键词定义的变量,编译完成后从上往下执行并向变量赋值

所以执行第1行时, var test 已经执行过了,所以test不会报错,而test2就会报错

需要注意的是,对 var test 执行编译时,只是先定义了 test 这个变量,并不会把 "你好" 这个值赋给test,而是到第2行时才给test赋值的,这就是为什么第1行的执行结果是 undefined

对于上面的例子,可以这样理解

//先编译 var 定义的变量

1. var test;

//编译完成后,从上到下执行代码

2. console.log(test);

3. test = "你好";

4. console.log(test);

5. console.log(test2);

再看一下function的编译执行过程

例子

test();//执行结果是"你好"

function test() {

console.log("你好");

}

模拟编译执行过程

//找到 function 定义的部分进行编译

//以函数名作为变量名,同时用函数赋值

1. var test = function (){

console.log("你好");

};

//从头执行

2. test();

编译时,function和var是有些不一样的, function编译时会把function赋值给变量,而var编译时不会赋值

再看一个例子

var a = 1;

function test() {

a = 2;

return;

function a() {}

}

test();

console.log(a); //结果还是1

为什么结果是1不是2?我们模拟下编译执行过程就理解了

var a;

var test = function (){

//原因就在这

//这里 a 已经变成了局部变量

var a = function (){};

//这时给 a 赋值,实际是给局部变量a 赋值

a = 2;

return;

}

test();

console.log(a);

本文分享自微信公众号 - 性能与架构(yogoup),作者:杜亦舒

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-10-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mysql体系结构

    客户端连接器 mysql为外部程序提供的客户端connector,例如 PHP JAVA .NET RUBY 连接管理 管理客户端连接的相关操作,例如 ...

    dys
  • 认识一下 Java 11

    可能很多人现在 Java8 的新特性还没用熟呢,Java 11 就已经来了,下面一起来看下 Java 11 的几个新特性:

    dys
  • 深入了解浏览器的重绘与重排

    重绘与重排是浏览器渲染的重要动作,对前端性能影响非常大,所以值得多了解一下 什么是重绘与重排? 重绘是一个改变元素外观的行为,例如改变visibility...

    dys
  • 中国或成医疗AI最大市场,谁能成就医学界 ImageNet? | 垂直AI特稿

    【新智元导读】人工智能技术的发展,给垂直产业带来巨大变革,以医疗、无人车、安防、金融等垂直行业的变化最受到关注,多位知名投资人都强调现在真正能落地的就是AI在垂...

    新智元
  • [PHP] 工厂模式的日常使用

    陶士涵
  • 原生JS动态添加、删除元素&内容

    创建元素 createElement ,创建内容 createTextNode ,添加元素 appendChild

    德顺
  • AI+医疗募捐、医疗旅游,AI为我们打开的是哪扇窗?

    “看病难,看病贵”,相信每个去过医院的人都深有体会。尤其是城镇低收入群体和农村居民的医疗负担更为沉重,一旦某个人患了重大的伤病,其全家都会陷入极度焦虑的状态。即...

    用户2908108
  • 巧用 TypeScript (一)

    TypeScript 提供函数重载的功能,用来处理因函数参数不同而返回类型不同的使用场景,使用时,只需为同一个函数定义多个类型即可,简单使用如下所示:

    三毛
  • 干货 | 1400篇机器学习的文章中,这10篇是最棒的!

    【导读】在过去的一个月中, 作者从近 1400 篇有关机器学习的文章中挑选了最有可能帮助职业生涯发展的 10 篇推荐给大家(入选比率为0.7%)。

    AI科技大本营
  • 干货 | 1400篇机器学习的文章中,这10篇是最棒的!

    【导读】在过去的一个月中, 作者从近 1400 篇有关机器学习的文章中挑选了最有可能帮助职业生涯发展的 10 篇推荐给大家(入选比率为0.7%)。

    用户1737318

扫码关注云+社区

领取腾讯云代金券