欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Js代码执行时的那点事儿

程序员文章站 2022-06-29 11:31:33
...

在一些笔试的题中,有可能会出现类似下面这么一道题

console.log(a)
a(4);
var a=1;
console.log(a);
function a() {
    console.log(2);
}
console.log(a);
var a=3;
console.log(a);
function a(b) {
    console.log(a,b);
    a=5
    console.log(a);
}
a();
console.log(a);

作为一个前端的小白,表示这么多a,又是变量,又是函数的,看的真是累,没有什么头绪。那么下面就来捋一捋,到底这段代码执行的时候,发生了些什么。

首先得有一个“作用域”的概念,简单讲,就是“变量或者函数的有效作用范围”。接着来说一下,什么时候会进入到作用域中。只要记住以下两点即可:

  1. 当浏览器看到script标签的时候
  2. 调用方法时候

不用问为什么,浏览器就是这么做的。接着进入作用域后,发生了什么事情呢?

  1. js的预解析
  2. js逐行执行

一件一件事儿来说。首先是预解析,在这个过程中,还分成了两部分:

  1. 开辟一个空间
  2. 去找有没有var,有没有方法参数,如果有var,有方法参数,就把var和方法参数声明的变量赋值为undefined,去找有没有function,如果有function,就将整个function的内容存到空间。

讲完这些基本的,来看看具体到了代码中是什么情况。

Js代码执行时的那点事儿

上面的图应该挺清楚了,这也可以解释js的“声明提前”,“声明函数会比函数表达式先执行”之类的一些现象了,最上面的一堆a的例子就不仔细解释