河南省建设监理协会网站人才十,php网站开发实,wordpress合理使用cookie,wordpress 免费主题下载本篇为第二篇#xff0c;本系列文章会在后续学习后持续更新。
第一篇#xff1a;#深入学习JavaScript系列#xff08;一#xff09;—— ES6中的JS执行上下文
第二篇#xff1a;# 深入学习JavaScript系列#xff08;二#xff09;——作用域和作用域链
第三篇#x…本篇为第二篇本系列文章会在后续学习后持续更新。
第一篇#深入学习JavaScript系列一—— ES6中的JS执行上下文
第二篇# 深入学习JavaScript系列二——作用域和作用域链
第三篇# 深入学习JavaScript系列三——this
第四篇# 深入学习JavaScript系列四——JS闭包
第五篇# 深入学习JavaScript系列五——原型/原型链
第六篇 # 深入学习JavaScript系列六——对象/继承
第七篇# 深入学习JavaScript系列七——Promise async/await generator
上一篇提到 在js的执行上下文中词法环境中会包含作用域链同时词法环境解释阶段生成在执行完毕后会被销毁这也说明了作用域链的生命周期是随着函数的创建与销毁的。
先通过两个问题来引出一下
1、js执行上下文和作用域链的关系
作用域链和执行上下文是紧密相连的概念。
执行上下文是JavaScript代码执行时的环境包括变量、函数、参数等信息。每个函数都有自己的执行上下文而全局代码也有自己的执行上下文。
从执行上下文的角度来说 作用域链是由当前执行上下文和所有外层执行上下文的变量对象组成的链式结构。当JavaScript代码在一个执行上下文中查找变量时会先在当前执行上下文的变量对象中查找如果没有找到就会继续在外层执行上下文的变量对象中查找直到找到该变量或者到达全局执行上下文。
因此作用域链的形成是由执行上下文的嵌套关系决定的。在函数定义时就已经确定了该函数的作用域链。当函数被调用时会创建一个新的执行上下文并将该执行上下文的变量对象添加到作用域链的顶端从而形成新的作用域链。 函数销毁时与之对应的作用域链节点也会销毁。
总之作用域链和执行上下文是密不可分的它们共同构成了JavaScript代码的作用域和变量查找机制。
2、什么是js作用域链和作用域
在 JavaScript 中每个函数都有一个作用域链它是一个由当前函数和所有外层函数的变量对象组成的列表。当 JavaScript 引擎查找一个变量时它会先在当前函数的变量对象中查找如果找不到就会在外层函数的变量对象中查找直到找到该变量或者到达全局对象为止。
每个函数内部声明的变量和函数都只能在该函数内部访问外部无法访问。但是如果一个函数内部嵌套了另一个函数那么内部函数可以访问外部函数的变量和函数这就是作用域链的作用。
作用域链的创建是在函数定义时确定的而不是在函数调用时确定的。当一个函数被调用时它会创建一个新的执行上下文并将其添加到调用栈中。在执行上下文中会创建一个变量对象该变量对象包含了当前函数的所有变量和函数声明。同时该执行上下文的作用域链会指向当前函数的作用域链。
当 JavaScript 引擎在执行一个函数时如果需要访问一个变量它会先在当前函数的变量对象中查找如果找不到就会在外层函数的变量对象中查找直到找到该变量或者到达全局对象为止。这个查找的过程就是作用域链的遍历过程。
通过上面两个问题的展开其实已经能大致了解了作用域与作用域链下面就展开讲一讲 在学习作用域链时需要注意哪些内容
3、作用域和作用域链的创建
js采用的是静态作用域也就是说js函数的作用域是在函数定义的情况下就已经确定了那么作用域链也是在函数定义的时候就创建
举个静态作用域的小例子
var value 1;function foo() {console.log(value);
}function bar() {var value 2;foo();
}bar();// 结果是 1 在函数定义的时候确定的作用value等于1 所以调用的时候也等于1 如果上述的代码是动态作用域那么value就是在执行时才生成 所以打印为2
动态作用域的语言
BashBash 是一种常用的 Unix shell它支持动态作用域。在 Bash 中变量的作用域是在函数被调用时PerlPerl 是一种通用的高级编程语言它支持动态作用域。在 Perl 中变量的作用域是在程序运行时确定LispLisp 是一种函数式编程语言它也支持动态作用域。在 Lisp 中变量的作用域是在函数被调用时确定Emacs LispEmacs Lisp 是一种基于 Lisp 的编程语言它是 Emacs 编辑器的扩展语言也支持动态作用域。
4 作用域和作用域链的执行销毁
js有两种函数作用域全局作用域和函数作用域创建上面已经讲到了那么执行呢其实是在函数中的变量被使用时会执行先在当前作用域中查找变量然后再逐步往上查找父级作用域直到找到为止 如果最终都没找到那么就会抛出一个 ReferenceError 异常。
作用域链及作用域链的销毁
当一个函数执行完毕之后那么它的执行上下文也随之销毁于此同时。对应的函数作用域和作用域链也会销毁当前函数作用域节点函数中声明的变量也会被销毁这就是js中大垃圾回收机制gc 最常见的有标记清除法和计数算法
注如果函数中使用了闭包那可能包含外部变量此时只有外部变量被销毁时才能销毁对应的闭包。这就是所谓的内存泄漏。
5 几个作用域练习题目
题目一:
var scope global scope;
function checkscope(){var scope local scope;function scope(){return scope;}return scope();
}
checkscope();
// local scopevar scope global scope;
function checkscope(){var scope local scope;function scope(){return scope;}return scope;
}
checkscope()();
// local scope解释函数的作用域基于函数创建的位置
注checkscope()()和checkscope()的区别
题目一中checkscope()是一个函数它返回另一个函数scope()。这个内部函数scope()可以访问checkscope()函数的局部变量。它是一个闭包函数因为它可以访问其外部函数checkscope()的词法环境。
checkscope()()是在调用checkscope()返回的函数scope()。它不是直接调用checkscope()函数本身。由于checkscope()函数返回了一个函数因此需要在checkscope()后添加另一个括号来调用内部函数scope()。相当于》checkscope(). f()
题目二
var a 1;function foo() {console.log(a);var a 2;
}foo();
// undefined解释因为在函数 foo() 中先执行了 var a 2 语句此时变量 a 被重新定义并赋值为 2。所以在函数 foo() 中变量 a 的值是 2而不是全局变量 a 的值。因此执行 console.log(a) 语句时输出的是 undefined因为变量 a 被重新定义但没有被初始化。 变量能提升 但是赋值不能提升
题目三
var x 1;function outer() {var y 2;function inner() {var z 3;console.log(x y z);}inner();
}outer();
// 6解释在调用inner函数时可以访问外层作用域中的变量 x 和 y。变量 x 的值是 1变量 y 的值是 2变量 z 的值是 3。所以执行 console.log(x y z) 语句时输出的是 6。
题目四:
function foo() {var a 1;function bar() {console.log(a);}return bar;
}var baz foo();
baz();
答案代码输出的是1。因为bar函数在定义时可以访问到其外层函数foo的变量a并将其保存在函数作用域内部。当执行baz()时实际上是执行了内部函数bar()此时访问到的变量a是定义时保存在bar函数作用域内的变量所以输出的是1
题目五
var a 1;
function foo() {console.log(a);
}function bar() {var a 2;foo();
}bar();
答案代码输出的是1。因为bar函数定义了一个名为a的局部变量并将其赋值为2但是在调用foo函数时它会在全局作用域中查找变量a因为在foo函数内部没有定义变量a。因此foo函数输出的是全局变量a的值即1。
关键点 foo的父级作用域不是bar 而是全局 只是foo在bar中执行。
题目六
var a 1;
function foo() {var a 2;function bar() {console.log(a);}return bar;
}var baz foo();
baz();
答案代码输出的是2。在foo函数内部定义了一个局部变量a并将其赋值为2然后返回了内部定义的函数bar。bar函数可以访问到foo函数的作用域链因此可以访问到变量a。当调用baz函数时实际上是执行了内部函数bar此时访问到的变量a是定义时保存在foo函数作用域内的变量所以输出的是2。
和题目五对比因为bar函数是定义在foo函数内的 所以bar的父级作用域是foo
看到这里的同学都很厉害那就顺便给我点个赞吧
参考一# JavaScript深入之作域链
参考二# JavaScript深入之词法作用域和动态作用域
