JavaScript深入学习之作用域与作用域链

简介: JavaScript深入学习之作用域与作用域链

前言


在文章的最开始,先简要的介绍一下关于作用域的几个概念,作用域相关的知识可以参考词法作用域与动态作用域


  • [[scope]]: 每个函数在创建时,都会有一个隐藏属性 [[scope]] ,它指向函数执行时创建的 AO
  • VO变量对象:也可称作 AO ,存储函数中所需要的变量、参数、函数等数据,VO 中包含一个额外的属性,该属性指向创建该 VO 的函数本身。
  • 作用域链:[[scope]] 中所存储的执行期上下文对象的集合,这个集合呈链式链接,这种链式链接叫做作用域链。
  • 查找变量:在那个函数里面查找变量,就从那个函数的作用域链顶端依次向下查找。


JavaScript中的作用域


JavaScript有两种作用域:


  • 全局作用域
  • 局部作用域


除了函数内部和 {} 内部定义的变量,其余都属于全局作用域。ES6 提供了块级作用域,目前局部作用域包含函数作用域和块级作用域。


全局作用域


全局作用域中定义的变量可以被任何地方访问。一般有如下几种属于全局作用域:


  • 最外层定义的函数和最外层函数之外定义的变量拥有全局作用域。
  • imply global:未经声明直接赋值的变量。


function func() {
    implyGlobalVar = 'global';
    var localVar = 'local'
}
func() // 执行
console.log(implyGlobalVar) // global
console.log(localVar)       // localVar is not defined
复制代码


var a = b = 10; b也属于imply global


  • window上的属性都具有全局作用域: 在 JavaScript 中,window == Global


全局作用域存在一定的弊端:如果张三和李四同时都在自己的全局定义同一个全局变量,则会发生变量的覆盖。


局部作用域


与全局作用域相反,局部作用域内的变量只能被定义它的局部作用域访问。


  • 函数作用域


     函数作用域里的变量和函数只能由函数内部访问


function foo() {
    var localVar = 'local'
    function localFunc() {
        console.log(local)
    }
    localFunc() // local
}
localFunc() // 报错
复制代码


  • 作用域是分层的,内部函数可以访问外部函数作用域里的变量,反之不可以(作用域链)。


function foo() {
    var localInnerVar = 'localInner'
    function localFunc() {
        console.log(local)
    }
    localFunc() // localInner
}
复制代码


注意:快语句({}内的语句),比如ifwhile等,不会创建新的作用域。


if (1) {
    var a = 10
}
console.log(a) // 10
复制代码


  • 块级作用域ES6 新增了 letconst 两种声明变量的命令,所声明的变量只能在指定块的作用域内被访问。


  • 不会发生变量提升


console.log(b) // undefined
console.log(a) // Uncaught ReferenceError: a is not defined
let a = 'i am there'
var b = 'i am here'
复制代码


  • 不允许重复声明


console.log(a) // Identifier 'a' has already been declared
var a = 'the first'
let a = 'the second'
复制代码


  • 常见闭包问题解决


  • 在学习闭包问题的时候,很容易写出类似下面的代码


var arr = [];
for (var i = 0; i < 10; i++) {
    arr[i] = function() {
        console.log(i);
    }
}
arr[0]() // 10
复制代码


  • 最终返回的结果是10,把所有的arr执行一遍,发现最后的结果都是10
    当时我们采用立即执行函数的方式来解决上面的闭包问题:


var arr = [];
for (var i = 0; i < 10; i++) {
    (function (i) {
        arr[i] = function() {
            console.log(i);
        }
    }(i))
}
arr[0]() // 0
复制代码


  • 立即执行函数解决上述闭包问题,其实就是借助了作用域链方面的知识,相当于给 arr[i] 函数的外层添加了一层作用域。但当我们学习 let 之后,解决上面问题就简单多了。


var arr = [];
for (let i = 0; i < 10; i++) {
    arr[i] = function() {
        console.log(i);
    }
}
arr[0]() // 0
复制代码


作用域链



JavaScript 函数执行时,首先会在自身的 AO 中查找对应属性值,若查找不到,则会去父级的 AO 上找,在查找不到则再去父级的父级查找,直到找到根 window 对象,这样形成的 “AO链” 就是作用域链。


下面以一个例子来模拟整个作用域链的流程:



function foo() {
    function bar() {
        var inner = 234;
        outer = 0;
        console.log(inner);
    }
    var outer = 123;
    bar();
    console.log(outer)
    console.log(glob)
}
var glob = 100;
foo()
复制代码


  1. foo函数创建


全局预编译过程,创建 GO

image.png


  1. foo函数执行


foo 函数执行,创建自己的 AO,执行函数预编译四部曲,将自身 AO 添加至 [[scope]] 链顶端


image.png



  1. bar函数执行

image.png


bar函数执行: outer = 0,在barAO中没有outer属性,沿红色作用域链向上查找,foo的AO中存在outer属性,因此将foo的AO中的outer值修改为0inner属性可以在自身AO中找到,因此直接打印234


  1. bar函数执行完毕,barAO进行销毁,继续执行foo中未执行完的代码


image.png


outer可以在自身AO中找到,直接打印0glob不在自身AO中,沿作用域链可在GO中查找到,打印100foo执行完毕,AO销毁。


习题


题目一


var foo = 1;
function bar() {
    console.log(foo);  //undefined
    if (!foo) {
        var foo = 10;
    }
    console.log(foo); //10
}
bar();
复制代码


题目二


var a = 1;
function b() {
    console.log(a);  // fn
    a = 10;
    return;
    function a() { }
}
b();
console.log(a); //1
复制代码


题目三


console.log(foo); //fn  C
var foo = "A";
console.log(foo)  //A
var foo = function () {
    console.log("B");
}
console.log(foo); //fn  B
foo(); // B
function foo(){
    console.log("C");
}
console.log(foo)  //fn B
foo(); // B
复制代码


题目四


var foo = 1;
function bar(a) {
    var a1 = a;
    var a = foo;
    function a() {
        console.log(a); //1
    }
    a1();
}
bar(3);
复制代码


往期精彩文章



相关文章
|
12天前
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中,需要合理地利用作用域和作用域链来组织代码结构,提高代码的可读性和可维护性。
|
11天前
|
自然语言处理 JavaScript 前端开发
[JS]作用域的“生产者”——词法作用域
本文介绍了JavaScript中的作用域模型与作用域,包括词法作用域和动态作用域的区别,以及全局作用域、函数作用域和块级作用域的特点。通过具体示例详细解析了变量提升、块级作用域中的暂时性死区等问题,并探讨了如何在循环中使用`var`和`let`的不同效果。最后,介绍了两种可以“欺骗”词法作用域的方法:`eval(str)`和`with(obj)`。文章结合了多位博主的总结,帮助读者更快速、便捷地掌握这些知识点。
23 2
[JS]作用域的“生产者”——词法作用域
|
13天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
12天前
|
JavaScript 前端开发
如何在 JavaScript 中实现块级作用域?
【10月更文挑战第29天】通过使用 `let`、`const` 关键字、立即执行函数表达式以及模块模式等方法,可以在JavaScript中有效地实现块级作用域,更好地控制变量的生命周期和访问权限,提高代码的可维护性和可读性。
|
20天前
|
JavaScript 前端开发
javascript的作用域
【10月更文挑战第19天javascript的作用域
|
25天前
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域是指程序中可访问的变量、对象和函数的集合。它分为函数作用域和局部作用域。函数作用域内的变量仅在函数内部可见,而全局作用域的变量在整个网页中均可访问。局部变量在函数执行完毕后会被销毁,而全局变量则在整个脚本生命周期中都存在。未使用 `var` 关键字声明的变量默认为全局变量。
|
1月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
19 2
|
1月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
17 2
|
1月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
35 1
|
1月前
|
JavaScript
js学习--抽奖
js学习--抽奖
15 1