jeddygong / frontend-document

前端每日一练,大厂面试题目,涵盖前端所有知识点,每天进步一点点。HTML/CSS/Javascript/Nodejs/Typescript/ECMAScript/Vue/React/Webpack/小程序/网络/设计模式/数据结构/算法/安全/工程化/性能优化
https://jeddygong.github.io/frontend-document
MIT License
10 stars 4 forks source link

[JS][2021-01-03] 对闭包有什么看法,为什么要用闭包?说一下闭包原理以及应用场景。 #3

Open jeddygong opened 3 years ago

jeddygong commented 3 years ago

什么是闭包

​ 函数执行后返回结果是一个内部函数,并被外部变量所引用,如果内部函数持有被执行函数作用域的变量,即形成了闭包。

​ 可以在内部函数访问到外部函数的作用域。

​ 使用闭包,一可以读取函数中的变量,二可以将函数中的变量存储在内存中,保护变量不被污染。而正因为闭包会把函数中的变量值存储在内存中,会对内存有消耗,所以不能滥用闭包,否则会影响网页性能,造成内存泄露。当不需要使用闭包时,要及时释放内存,可将内存函数对象的变量赋值为null。

闭包原理

优点

缺点

应用场景

一、典型应用是模块封装,在各个模块规范出现之前,都是用这样的方式防止变量污染全局。

var example = (function () {
  // 这样声明为模块私有变量,外界无法直接访问;
  var a = 0;
  function example1 () {}
  example1.prototype.nav = function nav() {
    return a;
  }
  return example1;
} ())

二、在循环中创建闭包,防止取到意外的值。

​ 如下所示,无论哪个元素触发事件,都会弹3.因为函数执行后引用的i是同一个i,而i在循环结束后就是3

for (var i = 0; i < 3; i++) {
    document.getElementById('id'+i).onfocus = function () {
    alert(i);
  }
}

// 可用闭包解决
function callBack (n) {
  return function () {
    alert()n
  }
}
for (var i =0; i < 3; i ++) {
  document.getElementById('id'+i).onfocus = callBack(i);
}