闭包的概念以及使用

最新推荐文章于 2022-05-13 14:59:36 发布

萤火_之光

最新推荐文章于 2022-05-13 14:59:36 发布

阅读量106

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_44499870/article/details/116550391

版权

1. 如何产生闭包

闭包

作用域应用的特殊情况，有两种表现
函数作为参数被传递
函数作为返回值被返回

//函数作为返回值

        function create() {
            let a = 100
            return function () {
                console.log(a);
            }
        }
        let fn = create()
        let a = 200
        fn()

//函数作参数

        function obj(fn) {
            let a = 200
            fn()
        }
        let a = 100
        function fn() {
            console.log(a);
        }
        obj(fn)

函数中的自由变量，取决于函数定义的地方，跟执行的地方没关系

this5大调用场景
普通函数、
对象方法、
call apply bind
class
箭头函数

this取什么值，是在执行时确认的，定义时无法确认

        function fn() {
            console.log(this);
        }
        fn()//window
        fn.call({ x: 10 })//{x:10}
        const fn1 = fn.bind({ x: 20 })
        fn1()//{x:20}
        //全局下，普通函数fn1执行，相当于window执行了fn1函数,所以this是window
       //call apply bind可以修改this,

手写bind代码如下：

// 模拟 bind
Function.prototype.bind1 = function () {
    // 将参数拆解为数组
    const args = Array.prototype.slice.call(arguments)

    // 获取 this（数组第一项）
    const t = args.shift()

    // fn1.bind(...) 中的 fn1
    const self = this

    // 返回一个函数
    return function () {
        return self.apply(t, args)
    }
}

function fn1(a, b, c) {
    console.log('this', this)
    console.log(a, b, c)
    return 'this is fn1'
}

const fn2 = fn1.bind1({x: 100}, 10, 20, 30)
const res = fn2()
console.log(res)

this指向：

普通函数中调用，this指向window
对象方法中调用，this指向当前对象
call apply bind中调用， this指向被传入的对象
class中的方法中调用， this指向实例对象
箭头函数，this就是父级上下文中的this

闭包的引用

闭包应用场景一，封装对象的私有属性和方法

// 闭包隐藏数据，只提供 API
function createCache() {
    const num=100
    const data = {} // 闭包中的数据，被隐藏，不被外界访问
    return {
        num:num,
        set: function (key, val) {
            data[key] = val
        },
        get: function (key) {
            return data[key]
        }
    }
}

const c = createCache()
console.log(c.num)//num此时就作为c私有属性
c.set('a', 100) //set此时作为c的私有方法
console.log( c.get('a') )

闭包应用场景二，闭包作用回调函数

		   <body>
			    <a href="#" id="as1">20</a>
			    <a href="#" id="as2">40</a>
			</body>
			<script>
			 function changeSize(size){
			     return function(){
			         document.body.style.fontSize=size+'px';
			     }
			 }
			 var size20=changeSize(20);
			 var size40=changeSize(40);
			
			 document.getElementById('as1').onclick=size20;
			 document.getElementById('as2').onclick=size40;
			
			</script>

闭包应用场景三，函数节流防抖

var debounce = function(func, delay) {
			  var timer = null
			  return function() {
			      var that = this;
			      var args = arguments;
			       
			      if(timer) {
			          clearTimeout(timer);
			      }
			 
			      timer = setTimeout(function() {
			          func.apply(that, args);
			      }, delay)
			  }
			}
			 
			ipt.addEventListener('keyup', debounce(function(e){
			  console.log(e.target.value);
			}, 400))

面试问：怎么理解闭包

一、什么是闭包：

①要理解闭包，首先理解javascript特殊的变量作用域，变量的作用于无非就是两种：全局变量，局部变量。
②javascript语言的特殊处就是函数内部可以读取外部作用域中的变量。
③我们有时候需要得到函数内的局部变量，但是在正常情况下，这是不能读取到的，这时候就需要用到闭包。在javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包是指有权访问另一个函数作用域中的变量的函数。其本质是函数的作用域链中保存着外部函数变量对象的引用。

二.闭包的应用场景：

①函数作为参数被传递
②函数作为返回值被返回
③实际应用（隐藏数据）：为什么说隐藏数据了呢，因为普通用户只能通过get、set等api对数据进行查看和更改等操作，没法对data直接更改，达到所谓隐藏数据的效果；jquery就利用了这一特性，必须调用$.ajax()才能访问内部属性方法。
封装功能时(需要使用私有的属性和方法)，
函数防抖、函数节流
单例模式

三.闭包的优点：

（一）变量长期驻扎在内存中
（二）另一个就是可以重复使用变量，并且不会造成变量污染
①全局变量可以重复使用，但是容易造成变量污染。不同的地方定义了相同的全局变量,这样就会产生混乱。”
②局部变量仅在局部作用域内有效，不可以重复使用，不会造成变量污染。
③闭包结合了全局变量和局部变量的优点。可以重复使用变量，并且不会造成变量污染

四.闭包的缺点：

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。