js进阶笔记之作用域
目录
全局作用域
局部作用域
函数作用域
块作用域
作用域链
闭包
垃圾回收机制
作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域分为全局作用域和局部作用域。
全局作用域
<script> 标签和 .js 文件的【最外层】就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问
<script>// 此处是全局function sayHi() {// 此处为局部}// 此处为全局
</script>全局作用域中声明的变量，任何其它作用域都可以被访问，如下代码所示
<script>// 全局变量 nameconst name = '小明'// 函数作用域中访问全局function sayHi() {// 此处为局部console.log('你好' + name)}// 全局变量 flag 和 xconst flag = truelet x = 10// 块作用域中访问全局if(flag) {let y = 5console.log(x + y) // x 是全局的}
</script>总结：
-
为
window对象动态添加的属性默认也是全局的，不推荐！ -
函数中未使用任何关键字声明的变量为全局变量，不推荐！！！
-
尽可能少的声明全局变量，防止全局变量被污染
JavaScript 中的作用域是程序被执行时的底层机制，了解这一机制有助于规范代码书写习惯，避免因作用域导致的语法错误。
局部作用域
局部作用域分为函数作用域和块作用域。
函数作用域
在函数内部声明的变量只能在函数内部被访问，外部无法直接访问。
<script>// 声明 counter 函数function counter(x, y) {// 函数内部声明的变量const s = x + yconsole.log(s) // 18}// 设用 counter 函数counter(10, 8)// 访问变量 sconsole.log(s)// 报错
</script>总结：
-
函数内部声明的变量，在函数外部无法被访问
-
函数的参数也是函数内部的局部变量
-
不同函数内部声明的变量无法互相访问
-
函数执行完毕后，函数内部的变量实际被清空了
块作用域
在 JavaScript 中使用 {} 包裹的代码称为代码块，代码块内部声明的变量外部将【有可能】无法被访问。
<script>{// age 只能在该代码块中被访问let age = 18;console.log(age); // 正常}// 超出了 age 的作用域console.log(age) // 报错let flag = true;if(flag) {// str 只能在该代码块中被访问let str = 'hello world!'console.log(str); // 正常}// 超出了 age 的作用域console.log(str); // 报错for(let t = 1; t <= 6; t++) {// t 只能在该代码块中被访问console.log(t); // 正常}// 超出了 t 的作用域console.log(t); // 报错
</script>JavaScript 中除了变量外还有常量，常量与变量本质的区别是【常量必须要有值且不允许被重新赋值】，常量值为对象时其属性和方法允许重新赋值。
<script>// 必须要有值const version = '1.0.0';// 不能重新赋值// version = '1.0.1';// 常量值为对象类型const user = {name: '小明',age: 18}// 不能重新赋值user = {};// 属性和方法允许被修改user.name = '小明明';user.gender = '男';
</script>总结：
-
let声明的变量会产生块作用域，var不会产生块作用域 -
const声明的常量也会产生块作用域 -
不同代码块之间的变量无法互相访问
-
推荐使用
let或const
作用域链
作用域链本质上是底层的变量查找机制，在函数被执行时，会优先查找当前函数作用域中查找变量，如果当前作用域查找不到则会依次逐级查找父级作用域直到全局作用域
<script>// 全局作用域let a = 1let b = 2// 局部作用域function f() {let c// let a = 10;console.log(a) // 1 或 10console.log(d) // 报错// 局部作用域function g() {let d = 'yo'// let b = 20;console.log(b) // 2 或 20}// 调用 g 函数g()}console.log(c) // 报错console.log(d) // 报错f();
</script>
-
嵌套关系的作用域串联起来形成了作用域链
-
相同作用域链中按着从小到大的规则查找变量
-
子作用域能够访问父作用域，父级作用域无法访问子级作用域
闭包
闭包概念 ： 内部函数及其对外部变量的引用捆绑在一起
或 内部函数访问外部函数的变量
形成条件：闭包 内部函数＋外部函数 (提供一个变量)
作用：闭包 延伸变量的作用域，形成独立的作用域
原理：作用域链
缺点：容易造成内存泄漏（内存因某种原因无法释放）
<body><script>// 1. 闭包 : 内层函数 + 外层函数变量// function outer() {// const a = 1// function f() {// console.log(a)// }// f()// }// outer()// 2. 闭包的应用： 实现数据的私有。统计函数的调用次数// let count = 1// function fn() {// count++// console.log(`函数被调用${count}次`)// }// 3. 闭包的写法 统计函数的调用次数function outer() {let count = 1function fn() {count++console.log(`函数被调用${count}次`)}return fn}const re = outer()// const re = function fn() {// count++// console.log(`函数被调用${count}次`)// }re()re()// const fn = function() { } 函数表达式// 4. 闭包存在的问题： 可能会造成内存泄漏</script>
</body>垃圾回收机制
JS为我们声明的变量、函数等分配内存，当这些变量、函数、对象的内存不再使用->垃圾
垃圾回收(GC)机制
引用计数------ie浏览器
简单，容易造成内存泄漏
标记清除
标记通过全局标记所有从全局出发能够访问到的对象，不能够访问到的对象未被标记
// 垃圾回收(GC)机制// let cat = { name: '猫', age: 10 }// console.log(cat.name)// cat = null// 引用计数-ie浏览器// 简单。容易造成内存泄漏// let cat = { name: '猫', age: 10 }// let cat2 = cat// cat = nullfunction f() {let o = {a: 1,}let o2 = {b: 2,}o.b = o2o2.a = o}f()// 标记清除// 标记 通过全局 标记所有从全局出发能够访问到的对象，不能够访问到的对象未被标记function fn() {c = {}let o = {}let o2 = {}o.a = o2o2.b = o}fn()console.log(c)