环境与作用域与闭包

最新推荐文章于 2024-09-07 13:38:28 发布

三生镇魂曲

最新推荐文章于 2024-09-07 13:38:28 发布

阅读量90

点赞数

分类专栏：学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_36936887/article/details/115187398

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

环境与作用域

在浏览器环境下，全局数据默认不会被回收，直到浏览器关闭

全局数据可以渗透到函数内部，被函数内部访问

函数的环境与作用域

函数体内定义的数据默认在函数内部使用

function exam() {
  var a = 1
  let b = 2
  const c = 3
  console.log(a) // 1
  console.log(b) // 2
  console.log(c) // 3
}
exam()
console.log(a, b, c) // Uncaught ReferenceError: a is not defined

子级函数内定义数据不会向父级传递，但可以访问父级数据

function exam() {
  var a = 1
  function test() {
    let b = 2
    console.log(a) // 1
  }
  test()
  console.log(b) // Uncaught ReferenceError: b is not defined at exam
}
exam()

函数不调用不开辟空间
函数调用一次，开辟一次空间，每次都不相同

函数运行结束，内部数据未被使用则释放空间

function exam() {
  let n = 1
  console.log(++n)
}
exam() // 2
exam() // 2
exam() // 2

若函数内部存在数据被使用则不释放空间

function test() {
  let n = 1
  return function () {
    console.log(++n)
  }
}
let run = test()
run() // 2
run() // 3
run() // 4
run() // 5

构造函数中作用域形态

new会开辟空间存放数据，在实例销毁之前，对实例数据的更改都会反映在构建的内存空间中

function Fn() {
  let n = 1
  this.sum = function () {
    console.log(++n)
  }
}
const a = new Fn()
a.sum() // 2
a.sum() // 3
a.sum() // 4
a.sum() // 5

块级作用域

es6中定义的let、const为块级作用域

{
  var a = 3
  console.log(a) // 3
}
{
  let b = 2
  console.log(b) // 2
}
console.log(a) // 3
console.log(b) // ReferenceError: b is not defined

for中的var、let

for 自带块级特性

for (var i = 0; i < 2; i++) {
  console.log(i) // 0 1
}
for (let j = 0; j < 2; j++) {
  console.log(j) // 0 1
}
console.log(i) // 2
console.log(j) // j is not defined

由于var不存在块级作用域，在存在定时器等特殊状况的情况下得不到预期结果
```
for (var i = 0; i < 2; i++) {
  setTimeout(function() {
    console.log(i) // 2 2
  }, 1000);
}
for (let j = 0; j < 2; j++) {
  setTimeout(function() {
    console.log(j) // 0 1
  }, 1000);
}
console.log(i) // 2
```
var表示在全局定义数据i，在定时器函数构建的空间中不会存储变量i而是从父级作用域中取值

for作为同步代码先行执行后i=2，等定时器函数运行时i已经被赋值为2

let具备块作用域，定时函数在构建空间存储时会将当前i的值保存在自己的作用域空间中，使用时先从自身作用域空间查找使用

模拟出var的块级作用域

for (var i = 0; i <= 3; i++) {
  (function (i) {
    setTimeout(() => {
      console.log(i) // 0 1 2 3
    }, 1000)
  })(i)
}
console.log('window.i',i) // 4

利用自调用函数将循环中的i作为实参传递(实际是建立了循环次数**(4次)**的新函数作用域空间)

定时器函数构建作用域空间时会携带每次传递来的实参作为自身参数

闭包

函数可以访问其他函数作用域内的数据

闭包运用之数组区间

let arr = [1,2,3,45,66,5,63,345,4251,3]
function between(start,end) {
  return function (value) {
    return value>= start && value<=end
  }
}
console.log(arr.filter(between(5,100))) // [45, 66, 5, 63]

filter需要一个回调函数

建立函数between返回filter需要的回调函数

由于作用域问题，在回调函数执行时获取父级作用域空间的数据的（即形成闭包）

因此传递实参给between以达到控制数组区间的目的

闭包的内存泄漏

<body>
  <button desc="storage">内存</button>
  <button desc="leak">泄漏</button>
  <button desc="problem">问题</button>
  <script>
    let btns = document.querySelectorAll('button')
    btns.forEach(item=>{
      let desc = item.getAttribute('desc')
      item.addEventListener('click',()=>{
        console.log('desc:',desc)
        console.log('item:',item)
      })
      item = null
    })
  </script>
</body>

由于函数内数据使用时不释放内存的原因，对于事件处理函数中会存储DOM对象本身，对于只需要获取特定数据的操作来说，无疑导致了大量的内存浪费，过多的事件处理函数可能导致内存泄漏问题

因此在事件处理函数之外获取数据，通过闭包可以在事件处理函数中获取数据，之后在手动释放内存空间，以达到优化程序的作用

三生镇魂曲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
环境与作用域与闭包

环境与作用域在浏览器环境下，全局数据默认不会被回收，直到浏览器关闭全局数据可以渗透到函数内部，被函数内部访问函数的环境与作用域函数体内定义的数据默认在函数内部使用function exam() { var a = 1 let b = 2 const c = 3 console.log(a) // 1 console.log(b) // 2 console.log(c) // 3}exam()console.log(a, b, c) // Uncaught Re
复制链接

扫一扫