ES6（4）闭包

最新推荐文章于 2023-07-13 17:49:18 发布

原创最新推荐文章于 2023-07-13 17:49:18 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6

本文深入解析JavaScript中的闭包概念，解释如何通过闭包访问另一个函数作用域中的变量，延长局部变量的生命周期。同时，文章探讨了高阶函数的定义及其实现方式，即函数作为参数传递或作为返回值使用。通过实例代码展示了闭包和高阶函数的应用场景，如按钮事件处理和定时任务。

闭包（有局部变量才会产生闭包）

指有权访问另一个函数作用域中变量的函数（一个作用域可以访问另外一个函数内部的局部变量）

函数返回的是函数就是高阶函数

// fn外面的作用域访问fn内部的局部变量
function fn() {
  let num = 10;
  return function() {
    console.log(num);
  };
}
let f = fn();
console.log(f.prototype.constructor);
// f是指向了fun构造函数，所以可以访问fn里面的变量
// 打印结果
//  () {
//   console.log(num);
// }
f();

闭包作用：延伸了变量的作用范围

闭包应用

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>

let btns = document.querySelectorAll("button");
for (let i = 0; i < btns.length; i++) {
  // (i => {
  //   btns[i].onclick = function() {
  //     console.log(i);
  //   };
  // })(i);
  (i => {
    setTimeout(() => {
      console.log(btns[i].innerHTML);
    }, 3000);
  })(i);
}