JS闭包原理及其使用场景解析

闭包定义

可以通过内层函数访问外层函数的作用域的组合叫做闭包。

闭包使用场景

使用闭包来实现防抖

function debounce(callback, time) {
  var timer;
  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      callback()
    }, time)
  }
}<br data-filtered="filtered"><br data-filtered="filtered">window.onresize = debounce(() => {console.log(666)},500)

使用闭包设计单例模式

class Car{
  constructor(color){
    this.color = color
  }
}
var proxy = (function createCar() {
  var instance;
  return function (color) {
    if (!instance) {
      instance = new Car(color)
    }
    return instance
  }
})()
var car = proxy('white')

使用闭包遍历取索引值（古老的问题）

for (var i = 0; i < 10; i++) {
  setTimeout(function(){console.log(i)},0) //10个10
}
for (var i = 0; i < 10; i++) {
  (function(j){
    setTimeout(function(){console.log(j)},0) // 0 - 9
  })(i)
}

闭包性能

因为闭包会使外层函数作用域中的变量被保存在内存中不被回收，所以如果滥用闭包就会导致性能问题，谨记。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript闭包原理与用法学习笔记

    本文实例讲述了JavaScript闭包原理与用法.分享给大家供大家参考,具体如下: 闭包(Closure) 闭包是一个函数和词法环境的组合,函数声明在这个词法环境中. 词法作用域: 看下面的一个例子: function init() { var name = 'GaoPian'; // name是局部变量 function displayName() { //displayName();是内部函数,一个闭包 alert(name); // 使用外部函数声明的变量 } displayName();

  • JS学习笔记之闭包小案例分析

    本文实例讲述了JS学习笔记之闭包小案例.分享给大家供大家参考,具体如下: 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <style type="text/css"> *{ list-style

  • JS实现利用闭包判断Dom元素和滚动条的方向示例

    本文实例讲述了JS实现利用闭包判断Dom元素和滚动条的方向.分享给大家供大家参考,具体如下: 一.判断滚动条的方向,利用闭包首先保存滚动条的位置,然后当滚动时候不断更新滚动初始值,然后通过差指判断方向 function scroll(fn) { //利用闭包判断滚动条滚动的方向 var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; window.addEventListener("scroll"

  • 深入了解JS之作用域和闭包

    作用域和闭包 ECMAScript5: JS 的代码没有代码块:使用函数运行的机制进行创建闭包:闭包就是作用域的意思: ES5中,JS中只有函数才可以创建能操作的作用域: JavaScript中的内存也分为栈内存和堆内存.一般来说,栈内存中存放的是存储对象的地址,而堆内存中存放的是存储对象的具体内容.对于原始类型的值而言,其地址和具体内容都存在与栈内存中:而基于引用类型的值,其地址存在栈内存,其具体内容存在堆内存中.堆内存与栈内存是有区别的,栈内存运行效率比堆内存高,空间相对推内存来说较小,反之

  • JS页面获取 session 值，作用域和闭包学习笔记

    JS页面获取 session 值，作用域和闭包学习笔记

    本文实例讲述了JS页面获取 session 值,作用域和闭包.分享给大家供大家参考,具体如下: Javascript获取session的值: var name= "${sessioScope.变量名}"; 注意这里面需要使用 "" 把 El 表达式给括起来,否则就取不到数据. JSP获取session的值: 可以直接${sessionScope.变量名},在标签里也是一样. JSP获取URL的值: var name = "<%=request.get

  • JavaScript 闭包的使用场景

    一.闭包 由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,闭包就是能够读取其他函数内部变量的函数.所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁. 比如下面的代码: function f1() { var n = 999; function f2() { console.log(n); } return f2; } var result = f1(); result();//999 函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见

  • 新手入门js闭包学习过程解析

    新手入门js闭包学习过程解析

    闭包,其实是一种语言特性,它是指的是程序设计语言中,允许将函数看作对象,然后能像在对象中的操作般在函数中定义实例(局部)变量,而这些变量能在函数中保存到函数的实例对象销毁为止,其它代码块能通过某种方式获取这些实例(局部)变量的值并进行应用扩展. 我们的理解: 其实闭包就是一个函数,一个外部函数通过调用函数并return返回出内部函数,这里的内部函数就是一个闭包:此时在内部函数中是可以访问到外部函数的变量的: 要想理解闭包,首先我们要了解栈堆内存和作用域链:首先我们来讲解栈堆内存: 首先我们来看个

  • js核心基础之闭包的应用实例分析

    本文实例讲述了js闭包的应用.分享给大家供大家参考,具体如下: 需求:有一个列表,当点击哪一行,则显示当前是第几行. html代码: <p>第一行</p> <p>第二行</p> <p>第三行</p> 错误js代码示范: function addHander(nodes){ for ( var i=0;i<nodes.length;i++) { var node=nodes[i]; node.onclick=function(){

  • js 闭包深入理解与实例分析

    本文实例讲述了js 闭包.分享给大家供大家参考,具体如下: 1.什么是闭包 定义:是指有权访问另一个函数作用域中的变量的函数 创建闭包:在一个函数内部创建另一个函数 基本特点 在返回的匿名函数中 可以调用外部函数的变量 如下例中所示 内部函数(匿名函数) 可以访问外部函数的变量num 形式如a[num] 原因是匿名函数作用域链中包括外部函数test1的作用域 闭包有权访问包含函数内部的所有变量 如下面的 外部函数定义变量d 在闭包中可以直接访问到d (var dd=d) function tes

  • JS常见面试试题总结【去重、遍历、闭包、继承等】

    本文实例讲述了JS常见面试试题.分享给大家供大家参考,具体如下: JavaScript面试题总结 1,首先是数组去重算法:给一个数组,去掉重复值 (function() { var arr = [1, 2, 3, 3, 4, ]; function unique() { var result = []; var tem = {}; for (var i = 0; i < arr.length; i++) { if (!tem[arr[i]]) { result.push(arr[i]); tem

  • JavaScript闭包相关知识解析

    闭包是JavaScript中的一个难点,同时也是它的特色,JavaScript的很多高级应用都要依靠闭包来实现.以下是我学习闭包的记录,希望对你有些帮助. 变量作用域 在学习闭包之前,我们首先要理解JavaScript不同与其他语言独特的变量作用域.在JavaScript中,不存在局部作用域的概念,但是有全局作用域以及函数作用域.全局作用域与其他语言的相同,没有需要注意的地方,而函数作用域是指函数内部声明的变量在函数外部无法直接访问. var a = 99; function f1() { co

  • JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】

    本文实例讲述了JavaScript 函数用法.分享给大家供大家参考,具体如下: 初始函数 Function类型,即函数的类型. 典型的JavaScript函数定义: function 函数名称(参数表){ //函数执行部分 return ; } //注意:参数列表直接写形参名即可 return语句:return返回函数的返回值并结束函数运行 函数也可以看做数据来进行传递 参数列表相当于函数入口,return 语句相当于函数出口 函数可以作为参数来传递. function test ( a ) {

  • js闭包的9个使用场景

    js闭包的9个使用场景

    1.返回值(最常用) //1.返回值 最常用的     function fn(){         var name="hello";         return function(){             return name;         }     }     var fnc = fn();     console.log(fnc())//hello 这个很好理解就是以闭包的形式将 name 返回. 2.函数赋值 var fn2; function fn(){   

随机推荐