一篇文章带你了解js作用域

于梦中2010

走在前端的大道上

本篇将自己读过的相关 javascript作用域 文章中,对自己有启发的章节片段总结在这(会对原文进行删改),会不断丰富提炼总结更新。

说说你对JavaScript作用域的理解?

JavaScript是门动态语言,跟Java不一样,JavaScript可以随意定义全局变量和局部变量,变量会在该作用域下提升,而且JavaScript没有块级作用域。全局变量就是定义在全局的变量了,局部变量是定义在函数里的变量,每一个函数都是一个作用域,当函数执行时会优先查找当前作用域,然后逐级向上。定义在 if 和 for 语句里的变量,在大括号外面也能访问到,这就是没有块级作用域。

JavaScript是静态作用域,在对变量进行查询时,变量值由函数定义时的位置决定,和执行时的所处的作用域无关。

知道ES6的童鞋可能还会指出 JavaScript已经有块级作用域了,而且用 let 和 const 定义的变量不会提升。

来感受一下

第一题

var a = 1;
function fn() {
  console.log('1:' + a);

  var a = 2;
  bar()
  console.log('2:' + a)
}

function bar() {
  console.log('3:' + a)
}

fn()

第一个 a 打印的值是 1:undefined 而不是 1。因为我们在 fn() 中定义了变量 a,用 var 定义的变量会在当前作用域提升,但是并不会携带赋给变量的值一起提升。

第二个 a 打印的值是 3:1 而不是 2。因为函数 bar 是定义在全局作用域中的,所以作用域链是 bar -> global,bar 里面没有定义a,所以就会顺着作用域链向上找,然后在 global 中找到了 a。

第三个 a 打印的值是 2:2。这句话所在的作用域链是 fn -> global,执行 console.log('2:' + a) 会首先在 fn 作用域里查找 a,找到有 a,并且值为2,所以结果就是2。
答案:

// 第一题正确答案
1:undefined
3:1
2:2

第二题

var a = 1;
function fn() {
  console.log('1:' + a);
  a = 2
}

a = 3;
function bar() {
  console.log('2:' + a);
}

fn();
bar();

第一个 a 打印的值是 1:3,既不是 undefined 也不是 1。首先, fn 中的 a = 2 是给变量 a 赋值,并没有定义变量。然后,执行函数 fn,在查找变量 a 时,此时查找的变量就是全局变量 a,不过此时 a 的值为3。

第二个 a 打印的值是 2:2。函数 bar 所能访问的作用域链为 bar->global,在执行函数 bar 时,a 的值已经被修改成了 2。
答案:

// 第二题正确答案
1:3
2:2

知识点:

在JavaScript中,通过 let 和 const 定义的变量具有块级作用域的特性。

通过 var 定义的变量会在它自身的作用域中进行提升,而 let 和 const 定义的变量不会。

每个JavaScript程序都具有一个全局作用域,每创建一个函数都会创建一个作用域。

在创建函数时,将这些函数进行嵌套,它们的作用域也会嵌套,形成作用域链,子作用域可以访问父作用域,但是父作用域不能访问子作用域。

在执行一个函数时,如果我们需要查找某个变量值,那么会去这个函数被 定义 时所在的作用域链中查找,一旦找到需要的变量,就会停止向上查找。

“变量的值由函数定义时的位置决定”这句话有歧义,准确说是查找变量时,是去定义这个函数时所在的作用域链查找。

参考文章:
1.题解JavaScript作用域

阅读 1.3k

于梦中的前端成长日记
于梦中的前端成长日记——记录点滴

前端菜鸟儿,请多关照!

2.1k 声望
180 粉丝
0 条评论

前端菜鸟儿,请多关照!

2.1k 声望
180 粉丝
文章目录
宣传栏